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

Integrált eszközök a webes tervezőknek, fejlesztőknek és tesztelőknek

A legtöbb böngésző számára, akik a mindennapos felhasználókra koncentrálnak, akik internetes szörföséget keresnek, a webes fejlesztők, tervezők és minőségbiztosítási szakemberek számára is segítenek, akik segítenek létrehozni azokat az alkalmazásokat és webhelyeket, amelyekhez ezek a felhasználók hozzáférnek. maguk.

Elmúltak azok a napok, amikor az egyetlen programozási és tesztelési eszköz a böngészőben lehetővé tette, hogy megtekinthesse az oldal forráskódját és semmit. A mai böngészők lehetővé teszik, hogy sokkal mélyebb merülést hajtson végre olyan dolgok végrehajtásával, mint a JavaScript-kivonatok végrehajtása és hibakeresése, a DOM elemek ellenőrzése és szerkesztése, a valós idejű hálózati forgalom alkalmazása az alkalmazás vagy oldal betöltésekor a szűk keresztmetszetek azonosítása, a CSS teljesítményének elemzése, nem túl sok memóriát vagy túl sok CPU- ciklust használnak, és még sok más. A tesztelési perspektívából reprodukálhatja, hogy az alkalmazás vagy a weboldal hogyan fog megjelenni a különböző böngészőkben, valamint a különböző eszközökön és platformokon a reaktív tervezés és a beépített szimulátorok varázsa révén. A legjobb rész az, hogy mindezt megteheti anélkül, hogy el kellene hagynia böngészőjét!

Az alábbi útmutatók azt mutatják be, 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 ellenőrzését a teljesítményt érintő problémák feltárására, a különböző eszközképernyők szimulálására, beleértve az Android vagy az iOS futását, valamint számos más hasznos funkciót.

1. Kattintson a Chrome főmenüjének, három vízszintes vonallal jelölve, és a böngésző jobb felső sarkában található.
2. Ha megjelenik a legördülő menü, vigye az egérmutatót a Több eszköz opció fölé.
3. Most egy almenü jelenik meg. Válassza ki a Fejlesztői eszközök jelölőnégyzetet. A menüpont helyett a következő billentyűparancsot is használhatja: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPCIÓ) + COMMAND + I )
4. Mostantól megjelenik a Chrome Fejlesztői Eszközök kezelőfelülete, amint az a példapéldányban látható. A Chrome verziójától függően a megjelenő kezdeti elrendezés kissé eltérhet az itt bemutatott formátumtól. A fejlesztőeszközök fő hubja, amely jellemzően a képernyő alsó vagy jobb oldali részén található, a következő füleket tartalmazza.
   Elemek: Képes megtekinteni a CSS és a HTML kódot, valamint szerkeszteni a CSS-t, és látni fogja a változások valós idejű hatásait.
   Konzol: A Chrome JavaScript konzolja lehetővé teszi a közvetlen parancsbejegyzést, valamint a diagnosztikai hibakeresést.
   Források: Lehetővé teszi a JavaScript kód hibakeresését egy hatékony grafikus felületen keresztül.
   Hálózat: Az aktív alkalmazással vagy oldalon minden kapcsolódó művelettel kapcsolatos részletes információkat csoportosít és megjelenít, beleértve a teljes kérés és válasz fejléceket, valamint a fejlett időzítési mutatókat.
   Idővonal: Lehetővé teszi a böngészőben végrehajtott összes tevékenység mélyreható elemzését, amint egy oldal vagy alkalmazás terhelési kérelme elindul.
5. Ezen szakaszokon kívül az alábbi eszközök is elérhetők a Timeline lap jobb oldalán található >> ikonon keresztül.
   Profil: A CPU profiler és a Heap profiler szakaszok miatt lebontva az átfogó memóriahasználatot és az aktív alkalmazás vagy oldal teljes végrehajtási idejét biztosítja.
   Biztonság: kiemeli a tanúsítványokkal kapcsolatos problémákat és egyéb biztonsági kérdéseket az aktív oldallal vagy alkalmazással kapcsolatban.
   Források: itt ellenőrizheti a cookie-kat, a helyi tárolást, az alkalmazás-gyorsítótárat és az aktuális weblap vagy alkalmazás által használt egyéb helyi adatforrásokat.
   Auditálás: az oldal vagy az alkalmazás betöltési idejének és általános teljesítményének optimalizálására szolgáló módszerek.
6. A Device Mode (Eszköz mód) lehetővé teszi, hogy az aktív oldalt szimulátorban tekintse meg, amely majdnem pontosan úgy jelenik meg, mint egy több tucat eszköz közül, köztük több ismert Android és iOS modellek, például az iPad, az iPhone és a Samsung Galaxy. Ön is képes arra, hogy emulálja az egyéni képernyőfelbontásokat, hogy megfeleljen az adott fejlesztési vagy tesztelési igényeknek. Az Eszköz mód be- és kikapcsolásához válassza ki az Elemek lap bal oldalán található mobiltelefon ikont.
7. A fejlesztői eszközök megjelenését is testreszabhatja, ha először kattintson a menüpontra, amelyet három függőlegesen elhelyezett pont jelenít meg, és a fent említett lapok jobb szélén található. A legördülő menüből áthelyezheti a dokkolóegységet, megjelenítheti vagy elrejtheti a különböző eszközöket, valamint elindíthatja a fejlettebb elemeket, például az eszközfelügyelőt. Meg fogja találni, hogy maga a dev eszközök interfész rendkívül testreszabható az ebben a részben található beállítások segítségével.

Mozilla Firefox

A Firefox Web Developer szekciója a tervezők, a fejlesztők és a tesztelők számára egyaránt alkalmas eszközöket, például egy stílusszerkesztőt és egy pixel-célzási szemcsés pipát.

Ajánlott olvasás: A Top 25 Greasemonkey és a Tampermonkey felhasználói scriptek

1. Kattintson a Firefox főmenü gombjára, amelyet három vízszintes vonal képvisel, és a böngészőablak jobb felső sarkában található.
2. Ha megjelenik a legördülő menü, válassza ki a Developer nevű ikont. Most a Web Developer menü jelenik meg, amely a következő opciókat tartalmazza. Észre fogod venni, hogy a legtöbb menüelemhez billentyűparancsok vannak társítva.
   Toggle Tools: Megjeleníti vagy elrejti a fejlesztői eszközök interfészét, általában a böngészőablak alján. Billentyűparancs: Mac OS X ( ALT (OPCIÓ) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Felügyelő: Lehetővé teszi, hogy az aktív oldalon és a hordozható eszközön ellenőrizze és / vagy csípesse meg a CSS és a HTML kódot a távoli hibakeresésen keresztül. Billentyűparancs: Mac OS X ( ALT (OPCIÓ) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Webes konzol: Lehetővé teszi a JavaScript-kifejezések végrehajtását az aktív oldalon belül, valamint megtekintheti a naplózott adatok széles körét, beleértve a biztonsági figyelmeztetéseket, a hálózati kéréseket, a CSS-üzeneteket és egyebeket. Billentyűparancs: Mac OS X ( ALT (OPCIÓ) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
   Debugger: A JavaScript-hibakereső lehetővé teszi a hibák meghatározását a töréspontok beállításával, a DOM csomópontok ellenőrzésével, a fekete doboz külső források használatával és még sok mással. Az Inspector esetében ez a funkció támogatja a távoli hibakeresést is. Billentyűparancs: Mac OS X ( ALT (OPCIÓ) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Stílusszerkesztő: Lehetővé teszi új stíluslapok létrehozását és beépítését az aktív weblapra, vagy szerkesztheti a meglévő lapokat, és kipróbálhatja, hogy a módosítások egy kattintással megjelenjenek-e a böngészőben. Billentyűparancs: Mac OS X, Windows ( SHIFT + F7 )
   Teljesítmény: Részletes részletezést nyújt az aktív lap hálózati teljesítményéről, a képkockadatokró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: felsorolja a böngésző által indított összes hálózati kérelmet, valamint a megfelelő módszert, származási tartományt, típusát, méretét és időtartamát. Billentyűparancs: Mac OS X ( ALT (OPCIÓ) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Fejlesztői eszköztár: Megnyitja az interaktív parancssori tolmácsot. Adjon meg segítséget a tolmácsnak az összes rendelkezésre álló parancs és megfelelő szintaxisának listájához. Billentyűparancs: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Lehetővé teszi a webalkalmazások létrehozását és végrehajtását egy olyan operációs rendszeren keresztül, amely Firefox operációs rendszert futtató vagy a Firefox OS-szimulátoron keresztül. Billentyűparancs: Mac OS X, Windows ( SHIFT + F8 )
   Böngésző konzol: Ugyanazt a funkciót biztosítja, mint a Web konzol (lásd fent). Az összes adat azonban az egész Firefox alkalmazáshoz tartozik (beleértve a kiterjesztéseket és a böngészőszintű funkciókat), szemben az aktív weblapra. Billentyűparancs: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   Érzékeny megjelenítés: Lehetővé teszi, hogy azonnal megnézzen egy weboldalt különböző felbontásokban, elrendezésekben és képernyőméretekben, hogy több eszközt, például táblagépeket és okostelefonokat utánozzon. Billentyűparancs: Mac OS X ( ALT (OPCIÓ) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Pipettacsipesz: Megjeleníti a hexagon kódot az egyedileg kiválasztott pixelek számára.
   Scratchpad : Lehetővé teszi a JavaScript kód kópiájának írását, szerkesztését, integrálását és végrehajtását egy kiugró ablakban. Billentyűparancs: Mac OS X, Windows ( SHIFT + F4 )
   Oldalforrás: Az eredeti böngészőalapú fejlesztői eszköz, ez a lehetőség egyszerűen megjeleníti az aktív oldal forráskódját. Billentyűparancs: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   További eszközök beszerzése : Megnyitja a Web Developer Toolbox- gyűjteményét a Mozilla hivatalos kiegészítő weboldalán, amely körülbelül egy tucat népszerű kiterjesztést tartalmaz, mint a Firebug és a Greasemonkey.

Microsoft Edge / Internet Explorer

Az IE12 és a Microsoft Edge eszközökkel az Internet Explorer korábbi verziói óta elindított billentyűparancsnak nevezett F12 Fejlesztői Eszközök , amely az interface-t elindító billentyűparancsot hirdette, a kezdetektől fogva hosszú utat mutatott, mivel nagyon hasznos monitorok, debuggerek, emulátorok és on-the-fly kompilátorok.

1. Kattintson a További műveletek menüre, amelyet három pont jelenít meg és a böngészőablak jobb felső sarkában található. Ha megjelenik a legördülő menü, jelölje ki az F12 Fejlesztői eszközök jelölőnégyzetet. Mint már említettem, az eszközöket az F12 billentyűparancs segítségével is elérheti.
2. Mostantól megjelenik a fejlesztői felület, jellemzően a böngészőablak alján. A következő eszközök állnak rendelkezésre, mindegyik elérhető a megfelelő fülláncra kattintva vagy a hozzá tartozó billentyűparanccsal.
   DOM Explorer: Lehetővé teszi a stíluslapok és a HTML szerkesztését az aktív oldalon, és a módosított eredményeket a szokásos módon jeleníti meg. Az IntelliSense funkciókat használhatja az automatikus kiegészítéshez, ha alkalmazható. Billentyűparancs: (CTRL + 1)
   Konzol: Beállíthatja a hibakeresési információkat, beleértve a számlálókat, az időzítőket, a nyomokat és a testreszabott üzeneteket egy integrált API-n keresztül. Emellett lehetővé teszi a kód beillesztését egy aktív weboldalra, és valós időben módosíthatja az egyes változókhoz rendelt értékeket. Billentyűparancs: (CTRL + 2)
   Debugger: Lehetővé teszi a töréspontok beállítását és hibakeresését a kód végrehajtásakor, szükség esetén soronként. Billentyűparancs: (CTRL + 3)
   Hálózat: felsorolja a böngésző által az oldal betöltése és végrehajtása során kezdeményezett összes hálózati kérelmet, beleértve a protokoll részletei, a tartalom típusa, a sávszélesség használatát és még sok mást. Billentyűparancs: (CTRL + 4)
   Teljesítmény: Részletezheti a keretsebességeket, a CPU kihasználtságát és egyéb teljesítménymutatókat, amelyek segítenek felgyorsítani az oldal betöltési idejét és egyéb tevékenységeket. Billentyűparancs: (CTRL + 5)
   Memória: Segítségével elkülönítheti és kijavíthatja a potenciális memória szivárgásokat az aktuális weboldalon megjelenítve a memóriahasználati idővonalat és a különböző időintervallumú pillanatfelvételeket. Billentyűparancs: (CTRL + 6)
   Emuláció: Megmutatja, hogyan működik az aktív oldal különböző felbontásokban és képernyőméretekben, emulálja az okostelefonokat, táblagépeket és egyéb eszközöket. Ezenkívül lehetővé teszi a felhasználói ügynök és az oldal tájolásának módosítását, valamint a különböző földrajzi helyek szimulációját a szélességi és hosszúsági fok beírásával. Billentyűparancs: (CTRL + 7)
3. A konzol megjelenítéséhez bármelyik másik eszközön belül kattintson a négyzet gombjára egy jobb oldali konzolon belül, amely a fejlesztőeszközök kezelőfelület jobb felső sarkában található.
4. A fejlesztői eszközök felcsatolásához külön felületet kell létrehozni, kattintson a két lépcsős négyszög által ábrázolt gombra, vagy használja a következő billentyűparancsot: CTRL + P. A szerszámokat visszahelyezheti az eredeti helyére a CTRL + P billentyű lenyomásával .

Apple Safari (csak OS X)

A Safari sokféle eszközét tükrözi a nagy fejlesztői közösség, amely a Mac-et használja a tervezési és programozási igényeikhez. Az erőteljes konzolon és a hagyományos naplózási és hibakeresési funkciókon kívül egy egyszerűen használható, érzékeny tervezési mód és egy saját böngészőbővítmény létrehozására szolgáló eszköz is rendelkezésre áll.

1. Kattintson a Safari -ra 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 Beállítások lehetőséget . A következő billentyűparancsot is használhatja a menüpont helyett: COMMAND + COMMA (,)
2. Most meg kell jelennie a Safari beállításai felületén, a böngésző ablakának átfedésénél. Kattintson a Fejléc ikonra, amely a fejléc jobb szélén található.
3. Most meg kell jelennie a speciális beállításoknak. A képernyő alján található egy opció, amely a menüsorban megjelenik a Fejlesztés megjelenítése menüben, egy jelölőnégyzet mellett. Ha nincs jelölőnégyzet a dobozban, kattintson rá egyszer, hogy ott helyezze el.
4. Zárja be a Beállítások felületet a bal felső sarokban található piros "x" gombra kattintva.
5. Most egy új opciót kell észlelnie a Develop nevű, a Könyvjelzők és az ablakok között található böngészőmenüben. Kattintson erre a menüpontra. Most egy legördülő menü jelenik meg, amely a következő opciókat tartalmazza.
   Nyissa meg a következő oldalt: Lehetővé teszi az aktív weblap megnyitását a Mac számítógépen jelenleg telepített többi böngésző egyikében.
   Felhasználói ügynök: Több 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 több verzióját is, valamint meghatározhatja saját egyéni karakterláncát.
   Adja meg az érzéki tervezési módot : Megjeleníti az aktuális oldalt, amint az különböző eszközökön és különböző képernyőfelbontásokon megjelenik.
   Webes felügyelő megjelenítése: A Safari dev eszközeinek fő kezelőfelületét jeleníti meg, általában a böngésző képernyőjének alján, és tartalmazza az alábbi elemeket: Elemek , hálózat , erőforrások , idővonalak , hibakereső , tároló , konzol .
   A hibakezelő megjelenítése: elindítja a dev eszközök felületét is közvetlenül a Konzol lapon, amely hibákat, figyelmeztetéseket és egyéb kereshető naplóadatokat jelenít meg.
   Oldalforrás megjelenítése: Megnyitja az Erőforrások lapot, amely a dokumentum által kategorizált aktív oldal forráskódját jeleníti meg.
   Oldalforrások megjelenítése: Ugyanazt a funkciót hajtja végre, mint a Page Source oldal megjelenítése .
   Show Snippet Editor: Megnyit egy új ablakot, ahol CSS- és HTML-kódot adhat meg, előnézetben a kimenetét.
   Bővítmény-készítő megjelenítése: lehetővé teszi a Safari-bővítmények CSS, HTML és JavaScript használatával történő létrehozását vagy szerkesztését.
   Timeline Felvétel megjelenítése: Megnyitja az Idővonalak fület, és elkezdi megjeleníteni a hálózati kérelmeket, az elrendezést és a megjelenítési információkat, valamint a JavaScript végrehajtását valós időben.
   Üres gyorsítótár: Törli a merevlemezen tárolt teljes gyorsítótárat.
   A gyorsítótár letiltása: leállítja a Safari-t a gyorsítótárazásból, így az összes tartalom lekérése a kiszolgálóról minden oldal betöltése után.
   Képek letiltása: Megakadályozza, hogy a képek megjelenjenek az összes weboldalon.
   Styles tiltása: Az oldal betöltésekor figyelmen kívül hagyja a CSS-tulajdonságokat.
   A JavaScript letiltása: a JavaScript-végrehajtást minden oldalon korlátozza.
   Kiterjesztések letiltása: letiltja a telepített bővítmények futását a böngészőben.
   Webhelyspecifikus hackok letiltása: Ha a Safari módosítva van, hogy kifejezetten kezelje az aktív weboldalhoz tartozó problémákat, akkor ez a lehetőség letiltja ezeket a változtatásokat úgy, hogy az oldal betöltődjön, ahogyan ezeket a módosításokat megelőzné.
   Tiltsa le a helyi fájlkorlátozásokat: Lehetővé teszi a böngésző számára a helyi lemezekhez tartozó fájlok elérését, biztonsági okokból alapértelmezés szerint korlátozott műveletet.
   Letiltja a határokon átnyúló korlátozásokat: Ezek a korlátozások alapértelmezés szerint be vannak állítva, hogy megakadályozzák az XSS-t és más potenciális veszélyeket. Azonban gyakran fejlesztési céllal átmenetileg le kell tiltani őket.
   Engedélyezd a JavaScriptet az intelligens keresési mezőből: Ha engedélyezve van, lehetővé teszi az URL-ek beírását javascriptrel: beillesztve közvetlenül a címsorba.
   Az SHA-1 tanúsítványok kezelése bizonytalan: Az SSL tanúsítványokat az SHA-1 algoritmust használva széles körben elavultnak és sebezhetőnek tekintik.