Ebben az útmutatóban mély betekintést szeretnék adni neked a Safari Fejlesztői Eszközeinek használatába. Habár a Safari fejlesztői eszközei néhány különbséget mutatnak a Chrome és a Firefox eszközeihez képest, az alapelvek azonosak maradnak. Meg fogod tanulni, hogyan aktiválhatod a fejlesztői eszközöket, hogyan használhatod a különböző területeket és funkciókat, valamint hogyan hajthatod végre a lényeges debugging-folyamatokat. Kezdjük is el közvetlenül a legfontosabb megállapításokkal.
Legfontosabb megállapítások
- A Safari fejlesztői eszközei nem olyan könnyen elérhetők, mint más böngészőkben, mivel be kell őket kapcsolni a beállításokban.
- A fejlesztői eszközök felhasználói felülete és funkciói hasonlóak más böngészőkhöz, azonban az implementációkon belül specifikus különbségek vannak.
- Az iOS-eszközökön való hibakeresés lehetséges a Safarival, ha az eszközt USB-n keresztül csatlakoztatod.
Lépésről lépésre útmutató
1. Fejlesztői eszközök aktiválása a Safariban
A Safari fejlesztői eszközök aktiválásához módosítanod kell a Safari beállításait. Indítsd el a Safarit, és menj a menüsorba. Válaszd ki ott az „Safari“ lehetőséget, majd a „Beállítások“ lehetőséget.
Ugrálj a jobb oldalon található „Speciális“ fülre. Itt megtalálod a „Fejlesztői funkciók a webfejlesztők számára“ beállítást. Ez opció engedélyezése az eszközök aktiválásához.
2. Hozzáférés a fejlesztői eszközökhöz
Amint aktiválva vannak a fejlesztői eszközök, megnyithatod őket az „Fejlesztés“ menüpontban a menüsorban, vagy bizonyos billentyűkombinációk segítségével. A közvetlen hozzáférés a F12 vagy az Alt-Cmd-I gombokkal nem működik, de például a jobb egérgombbal kiválasztva az elemet választhatod az „Elem vizsgálata“ lehetőséget.
Használhatod a Cmd+Option+C billentyűkombinációt is a konzol megnyitásához és a különböző nézetek közötti váltáshoz.
3. Navigáció a fejlesztői eszközökben
A fejlesztői eszközök felhasználói felülete ugyanúgy néz ki, mint amilyeneket más böngészőkből ismerhetsz, azonban néhány speciális eltéréssel rendelkeznek. A bal oldali sidebaron váltogathatsz az „Elemek“, „Konzol“, „Források“, „Hálózat“ és egyéb lapok között.
Itt megtudhatsz többet a weboldal eleméről, annak stílusairól és elrendezéseiről. Bármely stílus módosítható a megfelelő CSS-szabályra kattintva.
4. Munka a Konzollal
A konzol a Safariban lehetővé teszi JavaScript kódok futtatását és a kívánt kimenetek megjelenítését. Egy érdekes aspektus az, hogy a kimenetek formázása eltérő lehet itt. Az első argumentum szövegként jelenik meg, míg az összes további argumentum JavaScript objektumként jelenik meg.
Ha további naplóüzeneteket adsz ki, ügyelj arra, hogy a formázás ne tartalmazzon szóközöket az egyes argumentumok között, hanem kötőjelekkel legyenek elválasztva. Ez fontos lehet az összefonódások elkerülése érdekében a hibaelhárítás során.
5. Forráskód és Töréspontok beállítása
A „Források“ fülön megnézheted weboldalad eredeti és transzpilált fájljait. Itt beállíthatod a töréspontokat is a hibaelhárítás megkönnyítése érdekében. Ehhez egyszerűen kattints a megfelelő kódsorra.
Ne felejtsd el használni a különböző vezérlőket is az átlépés megkönnyítéséhez. A Safari esetében a lépés funkcióhoz más a gyorsbillentyű; ehelyett specifikus szimbólumokat kell használnod.
6. Hálózatelemzések végzése
A „Hálózat“ fül megadja a lapon keresztül zajló összes kérésről részletes információkat. Itt láthatod a küldött és fogadott kéréseket, valamint a fejléceket és előnézeteket is.
Eine interessante Funktion hier ist die Unterscheidung zwischen den Headern und den Timings, die dir einen tieferen Einblick in die Performance deiner Seite geben.
7. Használja a teljesítményméréseket és idővonatokat
A "Idővonatok" fülön részletes teljesítményelemzéseket végezhet és felvételt készíthet, hogy jobban megérthesse webhelye sebességét és folyamatait.
Ez a funkció hasonlóan működik, mint a teljesítményprofillal más böngészőkben, azonban fel kell készülnie néhány különbségre a megjelenítésben és a nevezésben.
8. Hibakeresés mobil eszközökön
A Safari Developer Tools egyik kiemelkedő funkciója az, hogy lehetővé teszi webhelyek hibakeresését az iPhone-ján vagy iPad-ján. Csatlakoztassa az eszközt USB-n keresztül, majd az eszközbeállításokban engedélyezze a megfelelő hibakeresési lehetőségeket.
Ezután lépjen be a "Fejlesztői" menübe, és válassza ki a csatlakoztatott eszközt, hogy hozzáférést kapjon az aktív ablakokhoz és azok Developer Tools-aihoz.
Összefoglalás
Ebben a részletes útmutatóban megtanulta, hogyan aktiválja a Safari Developer Tools-ot, hogyan használja a különböző funkciókat és füleket, és hogyan végezzen hibakeresést mobil eszközökön. A legtöbb funkció hasonló más böngészők eszközeihez, azonban vannak speciális különbségek, főleg az felhasználói felület és a billentyűparancsok területén. Ha megismerkedik velük, a Safari hibakeresés gyors lesz.
Gyakran Ismételt Kérdések
Hogyan aktiválhatom a Developer Tools-ot a Safari-ban?Menjen a Safari beállításokba az „Speciálisan” menüpont alatt, és aktiválja az „Fejlesztői funkciók megjelenítése a webfejlesztők számára” opciót.
Hogyan nyithatom meg a konzolt a Safari-ban?A konzolt a Cmd+Option+C billentyűkombinációval vagy a „Elem vizsgálata” lehetőséggel az egérjobb-klikk menüben nyithatja meg.
Milyen különbségek vannak a Safari konzoljában más böngészőkhöz képest?A Safari első argumentumot szövegesként, a következőket JavaScript objektumként jeleníti meg, és a kimenetek között nem használ szóközt.
Lehetőségem van Safari-n iPhone-omon hibakeresést végezni?Igen, az iPhone-ját USB-n keresztül csatlakoztatva és engedélyezve a hibakeresési lehetőségeket, hibakeresést végezhet Safari-n az iPhone-ján.
Létezik ugyanaz a teljesítménymérés a Safariban, mint a Chromban?Igen, a Timeline-funkció a Safariban hasonló teljesítményelemzéseket tesz lehetővé, azonban a megjelenítés eltérhet.
