A webböngésző fejlesztői eszközeinek használata

2024 Szerző: Abigail Brown | [email protected]. Utoljára módosítva: 2023-12-17 06:50

Amellett, hogy a legtöbb böngészőgyártó az interneten böngészni vágyó mindennapi felhasználókra összpontosít, a webfejlesztők, tervezők és minőségbiztosítási szakemberek számára is szolgálnak, akik hatékony integráció révén segítenek létrehozni azokat az alkalmazásokat és webhelyeket, amelyekhez a felhasználók hozzáférnek. eszközök közvetlenül magukba a böngészőkbe.

Elmúltak azok az idők, amikor a böngészőben található egyetlen programozási és tesztelőeszköz lehetővé tette az oldal forráskódjának megtekintését, és semmi több. A mai böngészők lehetővé teszik, hogy sokkal mélyebbre merüljön, például JavaScript-kódrészletek végrehajtása és hibakeresése, DOM-elemek ellenőrzése és szerkesztése, valós idejű hálózati forgalom figyelése az alkalmazás vagy oldal betöltődése közben a szűk keresztmetszetek azonosítása érdekében, a CSS-teljesítmény elemzése, valamint a kód megfelelőségének ellenőrzése. nem használ túl sok memóriát vagy túl sok CPU-ciklust, és még sok más.

Tesztelési szempontból a reszponzív tervezés és a beépített szimulátorok varázslatával reprodukálhatja, hogy egy alkalmazás vagy weboldal hogyan fog megjelenni különböző böngészőkben, valamint különböző eszközökön és platformokon. A legjobb az egészben az, hogy mindezt anélkül teheti meg, hogy ki kellene hagynia a böngészőt!

Az alábbi oktatóanyagok végigvezetik, hogyan érheti el ezeket a fejlesztői eszközöket számos népszerű webböngészőben.

Google Chrome

A Chrome fejlesztői eszközei lehetővé teszik a kód szerkesztését és hibakeresését, az egyes összetevők auditálását, hogy felfedje a teljesítményproblémákat, szimulálja a különböző eszközképernyőket, beleértve az Android vagy iOS rendszert futtató képernyőket, és számos egyéb hasznos funkciót is végrehajthat.

1. Válassza ki a Chrome főmenüjét, amelyet három vízszintes vonal jelöl, és a böngésző jobb felső sarkában található.

2. Amikor megjelenik a legördülő menü, vigye az egeret a További eszközök lehetőség fölé.

   

3. Egy almenünek kell megjelennie. Válassza a Fejlesztői eszközök lehetőséget. A következő billentyűkódot is használhatja e menüpont helyett: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. A Chrome Developer Tools felületének most meg kell jelennie, amint az ezen a képernyőképen látható. A Chrome verziójától függően a látott kezdeti elrendezés kissé eltérhet az itt bemutatotttól. A fejlesztői eszközök fő központja, amely általában a képernyő alsó vagy jobb oldalán található, a következő lapokat tartalmazza.

5. Ezeken a szakaszokon kívül a következő eszközöket is elérheti a >> ikonon keresztül, amely a Performance jobb oldalán található. lap.

   • Memória: Figyelje és rögzítse a memóriahasználatot egy weboldalon. Láthatja, milyen nehéz a JavaScript a webhelyén.
   • Biztonság: Kiemeli a tanúsítványproblémákat és az aktív oldallal vagy alkalmazással kapcsolatos egyéb biztonsággal kapcsolatos problémákat.
   • Application: Vizsgálja meg a webalkalmazás által használt erőforrásokat. Teljes részletezést kaphat arról, hogy mit használnak.
   • Audits: Módokat kínál az oldalak vagy alkalmazások betöltési idejének és általános teljesítményének optimalizálására.

   

6. Eszköz mód lehetővé teszi az aktív oldal megtekintését egy szimulátorban, amely szinte pontosan úgy jeleníti meg, ahogyan a több mint tucatnyi eszköz egyikén, köztük több jól ismert Androidon is megjelenne. és iOS modellek, például iPad, iPhone és Samsung Galaxy. Lehetőség van egyéni képernyőfelbontások emulálására is, hogy megfeleljenek az Ön sajátos fejlesztési vagy tesztelési igényeinek.

   A Eszköz mód be- és kikapcsolásához válassza ki a mobiltelefon ikont, amely közvetlenül a bal oldalán található. Elemek lap.

   

7. A fejlesztői eszközei megjelenését is testreszabhatja, ha először kiválasztja a menügombot, amelyet három függőlegesen elhelyezett pont jelent. és a fent említett fülek jobb szélén található.

   Ebből a legördülő menüből áthelyezheti a dokkolót, megjelenítheti vagy elrejtheti a különböző eszközöket, valamint elindíthat fejlettebb elemeket, például egy eszközvizsgálót. Látni fogja, hogy maga a fejlesztői eszközök felülete nagymértékben testreszabható az ebben a részben található beállításokkal.

   

Mozilla Firefox

A Firefox webfejlesztői szakasza tervezőknek, fejlesztőknek és tesztelőknek egyaránt tartalmaz eszközöket, például stílusszerkesztőt és pixelcélzó szemcseppentőt.

1. Válassza ki a Firefox főmenüjét, amelyet három vízszintes vonal jelképez, és a böngészőablak jobb felső sarkában található.

2. A legördülő menü megjelenésekor válassza a Webfejlesztő lehetőséget.

   

3. A Webfejlesztő menünek meg kell jelennie, amely a következő lehetőségeket tartalmazza. Észreveheti, hogy a legtöbb menüelemhez billentyűparancsok vannak társítva.

   • Eszközök váltása: Megjeleníti vagy elrejti a fejlesztői eszközök felületét, amely általában a böngészőablak alján helyezkedik el. Billentyűparancs: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Lehetővé teszi a CSS- és HTML-kódok ellenőrzését és/vagy módosítását az aktív oldalon, valamint egy hordozható eszközön távoli hibakereséssel. Billentyűparancs: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Webkonzol: Lehetővé teszi JavaScript-kifejezések végrehajtását az aktív oldalon, valamint a naplózott adatok sokféle készletének áttekintését, beleértve a biztonsági figyelmeztetéseket, hálózati kéréseket, CSS-üzeneteket stb.. Billentyűparancs: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: A JavaScript Debugger segítségével pontosan meghatározhatja és kijavíthatja a hibákat töréspontok beállításával, DOM-csomópontok vizsgálatával, külső források fekete dobozzal való rögzítésével és még sok mással. Ahogy az Inspector esetében is, ez a funkció is támogatja a távoli hibakeresést. Billentyűparancs: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Stílusszerkesztő: Lehetővé teszi új stíluslapok létrehozását és az aktív weboldalba való beillesztését, vagy a meglévő lapok szerkesztését és a módosítások megjelenítésének tesztelését a böngészőben egyetlen kattintással. Billentyűparancs: Mac OS X, Windows (SHIFT+F7)
   • Teljesítmény: Részletes lebontást ad az aktív oldal hálózati teljesítményéről, a képkockasebességről, a JavaScript végrehajtási idejéről és állapotáról, a festék villogásáról és még sok másról. Billentyűparancs: Mac OS X, Windows (SHIFT+F5)
   • Hálózat: Felsorol minden, a böngésző által kezdeményezett hálózati kérelmet a megfelelő módszerrel, eredettartománysal, típussal, mérettel és az eltelt idővel együtt. Billentyűparancs: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Vessen egy pillantást a webhely által tárolt gyorsítótárra és cookie-kra. Billentyűparancs: (SHIFT+F9)
   • Fejlesztői eszköztár: Megnyit egy interaktív parancssori értelmezőt. Írja be a help kódot az értelmezőbe, hogy megtekinthesse az összes elérhető parancsot és a megfelelő szintaxisukat. Billentyűparancs: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Lehetővé teszi webalkalmazások létrehozását és futtatását egy tényleges Firefox OS-t futtató eszközön vagy a Firefox OS Simulatoron keresztül. Billentyűparancs: Mac OS X, Windows (SHIFT+F8)
   • Böngészőkonzol: Ugyanazokat a funkciókat nyújtja, mint a webkonzol (lásd fent). Azonban minden visszaadott adat a Firefox teljes alkalmazására vonatkozik (beleértve a bővítményeket és a böngészőszintű funkciókat is), nem csak az aktív weboldalra. Billentyűparancs: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Reszponzív kialakítású nézet: Lehetővé teszi, hogy azonnal megtekintsen egy webold alt különböző felbontásokban, elrendezésekben és képernyőméretekben, hogy utánozzon több eszközt, például táblagépeket és okostelefonokat. Billentyűparancs: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Pipetta: Megjeleníti az egyedileg kiválasztott képpontok hexadecimális színkódját.
   • Scratchpad: A Scratchpad segítségével JavaScript-kódrészleteket írhat, szerkeszthet, integrálhat és végrehajthat egy kiugró Firefox ablakból. Nyisson meg egy interaktív JavaScript-dokumentumot, amellyel kódot írhat, és tesztelheti azt egy webhelyen. Billentyűparancs: (SHIFT+F4)
   • Service Workers: Hibakeresés a szervizmunkásoknál a webalkalmazásában. Részletes információkat kaphat teljesítményükről és hibáikról.
   • Oldalforrás: Az eredeti böngésző alapú fejlesztői eszköz, ez az opció egyszerűen megjeleníti az aktív oldal elérhető forráskódját. Billentyűparancs: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Get More Tools: Megnyitja a Web Developer's Toolbox gyűjteményt a Mozilla hivatalos kiegészítői webhelyén, amely körülbelül egy tucat népszerű bővítményt tartalmaz, mint pl. mint Firebug és Greasemonkey.

   

Microsoft Edge/Internet Explorer

Általános nevén F12 Fejlesztői Eszközök, tisztelgés a billentyűparancs előtt, amely az Internet Explorer korábbi verziói óta elindította a felületet, az IE11 és a Microsoft Edge fejlesztői eszközkészletét hosszú utat tett meg a kezdetek óta azáltal, hogy monitorok, hibakeresők, emulátorok és on-the-fly fordítók nagyon praktikus csoportját kínálja.

A Microsoft már nem támogatja az Internet Explorert, és azt javasolja, hogy frissítsen az újabb Edge böngészőre. Látogasson el a webhelyükre a legújabb verzió letöltéséhez.

1. Válassza ki a További műveletek lehetőséget, amelyet három pont jelképez, és a böngészőablak jobb felső sarkában található.

   

2. Amikor megjelenik a legördülő menü, válassza a Fejlesztői eszközök. lehetőséget.

   

3. A fejlesztői felületnek most meg kell jelennie, jellemzően a böngészőablak alján. A következő eszközök állnak rendelkezésre, amelyek mindegyike elérhető a megfelelő lap fejlécére kattintva vagy a hozzá tartozó billentyűparancs használatával.

   

   • DOM Explorer: Lehetővé teszi a stíluslapok és a HTML szerkesztését az aktív oldalon, miközben a módosított eredményeket menet közben rendereli. Adott esetben az IntelliSense funkciót használja a kód automatikus kiegészítésére. Billentyűparancs: (CTRL+1)
   • Console: Lehetővé teszi hibakeresési információk benyújtását, beleértve a számlálókat, időzítőket, nyomkövetéseket és testreszabott üzeneteket egy integrált API-n keresztül. Lehetővé teszi továbbá, hogy kódot szúrjon be egy aktív weboldalba, és valós időben módosítsa az egyes változókhoz rendelt értékeket. Billentyűparancs: (CTRL+2)
   • Debugger: Lehetővé teszi töréspontok beállítását és a kód hibakeresését a végrehajtás során, szükség esetén soronként. Billentyűparancs: (CTRL+3)
   • Hálózat: Felsorol minden hálózati kérést, amelyet a böngésző kezdeményezett az oldal betöltése és végrehajtása során, beleértve a protokoll részleteit, a tartalom típusát, a sávszélesség-használatot és még sok mást. Billentyűparancs: (CTRL+4)
   • Teljesítmény: Részletezi a képkockasebességet, a CPU-kihasználást és a teljesítménnyel kapcsolatos egyéb mutatókat, amelyek segítenek felgyorsítani az oldalak betöltési idejét és egyéb tevékenységeket. Billentyűparancs: (CTRL+5)
   • Memória: Segít elkülöníteni és kijavítani a lehetséges memóriaszivárgást az aktuális weboldalon azáltal, hogy megjeleníti a memóriahasználati idővonalat a különböző időintervallumokból származó pillanatképekkel együtt. Billentyűparancs: (CTRL+6)
   • Emuláció: Megmutatja, hogyan jelenne meg az aktív oldal különböző felbontásokban és képernyőméretekben, emulált okostelefonokat, táblagépeket és egyéb eszközöket. Lehetőséget biztosít a felhasználói ügynök és az oldal tájolásának módosítására, valamint a különböző földrajzi helyek szimulálására a szélességi és hosszúsági fokok megadásával. Billentyűparancs: (CTRL+7)

4. A Konzol megjelenítéséhez, miközben bármely más eszközön belül nyomja meg a négyzetgombot, amelyen belül egy jobb zárójel található. a fejlesztői eszközök felületének jobb felső sarkában.

   

5. A fejlesztői eszközök felületének leválasztásához, hogy az külön ablak legyen, válassza ki a két lépcsőzetes téglalapot, vagy használja a következő billentyűkódot: CTRL+P. Az eszközöket visszahelyezheti eredeti helyükre a CTRL+P másodszori megnyomásával.

   

Apple Safari (csak Macen)

A Safari változatos fejlesztői eszközkészlete azt a nagy fejlesztői közösséget tükrözi, amely Mac-et használ tervezési és programozási igényeik kielégítésére. A nagy teljesítményű konzolon és a hagyományos naplózási és hibakereső funkciókon kívül egy könnyen használható reszponzív tervezési mód és egy eszköz is rendelkezésre áll, amellyel saját böngészőbővítményeket hozhat létre.

1. Válassza ki a Safari lehetőséget a böngésző menüjében, amely a képernyő tetején található. Amikor megjelenik a legördülő menü, válassza a Preferences lehetőséget. A következő billentyűkombinációt is használhatja e menüpont helyett: COMMAND+COMMA(,)

   

2. A Safari Preferences felületének meg kell jelennie a böngészőablak felett. Válassza a Speciális ikont, amely a fejléc jobb szélén található.

   

3. A Speciális beállításoknak most láthatónak kell lenniük. A képernyő alján található egy Fejlesztési menü megjelenítése feliratú opció a menüsorban, egy jelölőnégyzet kíséretében. Ha nem látható a négyzetben pipa, kattintson rá egyszer, hogy elhelyezzen egyet.

   

4. Zárja be a Preferences felületet.

5. Mostantól észre kell vennie egy új lehetőséget a böngésző menüjében Develop néven, amely a Könyvjelzők és az Ablak között található. Kattintson erre a menüpontra. Most egy legördülő menünek kell megjelennie, amely a következő lehetőségeket tartalmazza.

   • Oldal megnyitása a következővel:: Lehetővé teszi az aktív weboldal megnyitását a Mac számítógépére jelenleg telepített böngészők egyikében.
   • Felhasználói ügynök: Több mint tucat előre definiált felhasználói ügynökérték közül választhat, beleértve a Chrome, a Firefox és az Internet Explorer számos verzióját, valamint meghatározhatja saját egyéni értékét. string.
   • Lépjen be az adaptív tervezési módba: Az aktuális old alt úgy jeleníti meg, ahogyan az különböző eszközökön és különböző képernyőfelbontásoknál megjelenne.
   • Show Web Inspector: Elindítja a Safari fejlesztői eszközeinek fő felületét, amely általában a böngészőképernyő alján található, és a következő részeket tartalmazza: Elemek, Hálózat, Erőforrások, Idővonalak, Hibakereső, Tárhely, Konzol.
   • Hibakonzol megjelenítése: A fejlesztői eszközök felületét is elindítja, közvetlenül a Konzol lapon, amely hibákat, figyelmeztetéseket és egyéb kereshető információkat jelenít meg naplóadatok.
   • Oldal forrásának megjelenítése: Megnyitja a Erőforrások lapot, amely megjeleníti a dokumentum által kategorizált aktív oldal forráskódját.
   • Oldalforrások megjelenítése: Ugyanazt a funkciót hajtja végre, mint az Oldalforrás megjelenítése opció.
   • Show Snippet Editor: Megnyit egy új ablakot, ahol megadhatja a CSS- és HTML-kódot, és menet közben megtekintheti annak kimenetét.
   • Bővítménykészítő megjelenítése: Lehetővé teszi Safari-bővítmények létrehozását vagy szerkesztését CSS-, HTML- és JavaScript-kóddal.
   • Idővonal-rögzítés megjelenítése: Megnyitja az Idővonalak lapot, és elkezdi megjeleníteni a hálózati kéréseket, az elrendezést és a megjelenítési információkat, valamint a JavaScript-végrehajtást valós időben.
   • Gyorsítótár ürítése: Törli a merevlemezen jelenleg tárolt teljes gyorsítótárat.
   • Gyorsítótárak letiltása: Leállítja a Safari gyorsítótárazást, így minden oldal betöltéskor minden tartalom letöltésre kerül a szerverről.
   • Képek letiltása: Megakadályozza a képek megjelenítését az összes weboldalon.
   • Stílusok letiltása: Figyelmen kívül hagyja a CSS-tulajdonságokat az oldal betöltésekor.
   • JavaScript letiltása: Korlátozza a JavaScript végrehajtását az összes oldalon.
   • Bővítmények letiltása: Megtiltja az összes telepített bővítmény futtatását a böngészőn belül.
   • Webhely-specifikus feltörések letiltása: Ha a Safarit úgy módosították, hogy kifejezetten kezelje az aktív weboldalra jellemző problémákat, ez az opció blokkolja ezeket a módosításokat, így az oldal úgy tölt be, mint a módosítások bevezetése előtt.
   • Helyi fájlkorlátozások letiltása: Lehetővé teszi a böngésző számára, hogy hozzáférjen a helyi lemezeken lévő fájlokhoz. Ez a művelet biztonsági okokból alapértelmezés szerint korlátozott.
   • A kereszteredetű korlátozások letiltása: Ezek a korlátozások alapértelmezés szerint az XSS és más lehetséges veszélyek megelőzése érdekében lépnek életbe. Fejlesztési célból azonban gyakran ideiglenesen le kell tiltani őket.
   • JavaScript engedélyezése az Intelligens keresőmezőből: Ha engedélyezve van, lehetővé teszi URL-ek bevitelét a JavaScript: közvetlenül a címsorba beépítve.
   • Az SHA-1 tanúsítványok nem biztonságosként kezelése: Az SHA-1 algoritmust használó SSL-tanúsítványokat széles körben elavultnak és sebezhetőnek tekintik.