Tässä oppaassa aion antaa sinulle syvällisen katsauksen Safarin kehittäjätyökalujen käyttöön. Vaikka kehittäjätyökalut Safarissa eroavat joiltakin osin verrattuna niihin Chromeen ja Firefoxiin, perusperiaate pysyy samana. Opit aktivoimaan kehittäjätyökalut, käyttämään eri alueita ja toimintoja sekä toteuttamaan olennaiset virheenkorjauksen prosessit. Aloita suoraan tärkeimpien oivallusten kanssa.
Tärkeimmät oivallukset
- Developer Tools safarissa eivät ole yhtä helposti saavutettavissa kuin muissa selaimissa, koska ne on aktivoitava asetuksista.
- Kehittäjätyökalujen käyttöliittymä ja toiminnot ovat samanlaisia kuin muissakin selaimissa, mutta tiettyjä toteutuksia voi vaihdella.
- Virheenkorjaus iOS-laitteilla on mahdollista Safarissa kytkemällä laite USB:n kautta.
Vaiheittainen opas
1. Kehittäjätyökalujen aktivoiminen Safarissa
Aktivoidaksesi kehittäjätyökalut Safarissa, sinun tulee muokata Safarin asetuksia. Käynnistä Safari ja siirry ylävalikkoon. Valitse sieltä "Safari" ja edelleen "Asetukset".
Siirry sitten oikealla olevaan "Laajennettu" -välilehteen. Sieltä löydät vaihtoehdon "Näytä web-kehittäjille tarkoitetut toiminnot". Ota tämä vaihtoehto käyttöön aktivoidaksesi kehittäjätyökalut.
2. Pääsy kehittäjätyökaluihin
Kun kehittäjätyökalut ovat aktivoituna, voit avata ne joko valikossa "Kehittäjä" tai tietyillä näppäinyhdistelmillä. Suoraa pääsyä näppäimillä F12 tai Alt-Cmd-I ei ole, mutta voit esimerkiksi oikealla hiiren painikkeella klikata elementtiä ja valita "Käytä tarkasteluun".
Voit myös käyttää näppäinyhdistelmää Cmd+Option+C avataksesi konsolin ja vaihtaaksesi eri näkymien välillä.
3. Navigointi kehittäjätyökalujen kautta
Kehittäjätyökalujen käyttöliittymä näyttää samanlaiselta kuin muiden selainten käyttöliittymä, mutta niillä on joitakin erityisiä poikkeamia. Vasemmassa sivupalkissa voit vaihtaa välillä "Elementit", "Konsoli", "Lähteet", "Verkko" ja muihin.
Täällä saat lisätietoja sivuston elementeistä, jotta voit tarkastella ja muokata niiden tyylejä ja asetteluja. Voit muokata mitä tahansa tyyliä napsauttamalla vastaavia CSS-sääntöjä.
4. Työskentely konsolin kanssa
Safarin konsoli mahdollistaa JavaScript-koodin suorittamisen ja haluttujen tulosteiden näyttämisen. Mielenkiintoinen näkökohta on, että täällä tapahtuva tulostusmuotoilu poikkeaa. Ensimmäinen argumentti tulostetaan tekstiksi, kun taas kaikki seuraavat argumentit esitetään JavaScript-objekteina.
Kun tulostat lisää logiviestejä, varmista, että esityksessä ei ole välilyöntejä yksittäisten argumenttien välillä, vaan ne erotetaan viivoilla. Tämä voi olla tärkeää virheenkorjauksen yhteydessä väärinkäsitysten välttämiseksi.
5. Koodin ja keskeytyskohtien määrittäminen
"Lähteet" -välilehdessä voit tarkastella sivustosi alkuperäistiedostoja ja transpiloituja tiedostoja. Täällä voit myös asettaa keskeytyskohtia helpottaaksesi virheenkorjausta. Klikkaa vain sopivaa kohtaa koodissa.
Älä unohda käyttää erilaisia ohjaimia helpottaaksesi koodin läpikäyntiä. Safarissa koodin läpikäyntiin käytetty pikanäppäin on erilainen; sen sijaan käytät tiettyjä symboleja.
6. Verkkoliikenteen analysointi
"Verkko" -välilehti tarjoaa kattavat tiedot kaikista pyynnöistä, jotka sivusi tekee latausaikanaan. Täältä näet pyynnöt, jotka lähetetään ja vastaanotetaan, sekä niiden otsikot ja esikatselut.
Mielenkiintoinen toiminto täällä on ero otsikoiden ja aikataulujen välillä, jotka antavat sinulle syvemmän käsityksen sivustosi suorituskyvystä.
7. Suorituskyvyn mittaaminen ja aikajanat
"Aikajana"-välilehdellä voit tehdä kattavia suorituskykyanalyyseja ja tallennuksia sivustosi nopeuden ja toimintojen parempaa ymmärtämistä varten.
Tämä toiminto toimii samalla tavalla kuin suorituskykyprofiilit muissa selaimissa, mutta saatat joutua tottumaan joitain eroihin esityksessä ja nimissä.
8. Vianmääritys mobiililaitteilla
Safari Developer Toolsin erikoisuus on mahdollisuus vianmääritykseen iPhonessa tai iPadissa. Liitä laitteesi USB:llä ja ota käyttöön vastaavat vianetsintäasetukset laitteen asetuksissa.
Mene sitten "Kehitys"-valikkoon ja valitse yhdistetty laitteesi saadaksesi pääsyn avoimiin ikkunoihin ja niiden Developer Tools -työkaluihin.
Yhteenveto
Tämän kattavan ohjeen avulla opit aktivoimaan Safari Developer Toolsin, hyödyntämään erilaisia toimintoja ja välilehtiä sekä tekemään vianmäärityksen mobiililaitteilla. Useimmat toiminnot ovat samankaltaisia muiden selainten työkalujen kanssa, mutta on erityisiä eroavaisuuksia erityisesti käyttöliittymässä ja pikanäppäimissä. Kun tulet niihin tutuksi, Safari-vianmääritys sujuu nopeasti ja vaivattomasti.
Usein kysytyt kysymykset
Miten aktivoi Developer Tools Safarissa?Mene Safari-asetuksiin ja käynnistä vaihtoehto ”Näytä kehittäjille tarkoitetut toiminnot” laajennetuissa asetuksissa.
Miten avaan konsolin Safarissa?Voit avata konsolin painamalla Cmd+Option+C tai napsauttamalla ”Tarkastele elementtiä” kontekstivalikossa.
Mitä eroavaisuuksia on Safarin konsolissa verrattuna muihin selaimiin?Safarissa ensimmäinen argumentti tulostetaan tekstinä ja seuraavat JavaScript-objekteina, eikä tulosteiden välissä ole välilyöntejä.
Voinko tehdä vianmääritystä iPhonessani Safarilla?Kyllä, liittämällä iPhonen USB:llä ja aktivoimalla vianmääritysasetukset voit tehdä vianmääritystä sivustoille iPhonessasi.
Onko Safarissa samanlainen suorituskykyanalyysi kuin Chromessa?Kyllä, Aikaakäyrä-välilehti Safarissa mahdollistaa samanlaiset suorituskykyanalyysit, mutta esitystapa voi olla erilainen.
