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

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 választási lehetőség.
3. Most egy almenü jelenik meg. Válassza ki a felcímkézett opciót Fejlesztői eszközök . A menüpont helyett a következő billentyűparancsot is használhatja: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + 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 a valós idejű változások hatásainak figyelembevételével.Konzol: A Chrome JavaScript konzolja lehetővé teszi a közvetlen parancsbejegyzést, valamint a diagnosztikai hibakeresést.Forrás: Lehetővé teszi a JavaScript kód hibakeresését egy hatékony grafikus felületen keresztül.Hálózat: Elemezi és megjeleníti az aktív alkalmazás vagy oldal egyes kapcsolódó műveleteire vonatkozó részletes információkat, 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, hogy alaposan elemezze minden olyan tevékenységet, amely a böngészőben történik, amint egy oldal vagy alkalmazás terhelési kérelmet indít.
5. Ezen szakaszokon kívül az alábbi eszközök is elérhetők a >> ikon, a jobb oldalon található Idővonal fület.Profil: Megszakadt CPU profiler és Heap profiler szakaszok az átfogó memóriahasználatot és az aktív alkalmazás vagy oldal teljes végrehajtási idejét biztosítják.Biztonság: Kiemeli a tanúsítványokkal kapcsolatos problémákat és az aktív oldalakkal vagy alkalmazásokkal kapcsolatos egyéb biztonsági kérdéseket.Erő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.ellenőrzések: Olyan módszereket kínál, amelyek optimalizálhatják az oldal vagy az alkalmazás betöltési idejét és általános teljesítményét.
6. Eszköz üzemmód lehetővé teszi az aktív oldal szimulátorban való megtekintését, ami szinte pontosan úgy jelenik meg, mint egy több tucat eszköz közül, köztük számos jól 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. Átkapcsolás Eszköz üzemmód be és ki, válassza ki a mobiltelefon ikonját, amely közvetlenül a képernyő bal oldalán található Elements fület.
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.

Lifewire Ajánlott olvasmány:A Top 25 Greasemonkey és a Tampermonkey User Scripts

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. Amikor megjelenik a legördülő menü, jelölje ki a megjelölt ikont Fejlesztő . A Webfejlesztő mostantól megjelenik a menü, amely a következő opciókat tartalmazza.Észre fogod venni, hogy a legtöbb menüelemhez billentyűparancsok vannak társítva.Toggle eszközök: Megjeleníti vagy elrejti a fejlesztői eszközök felületeit, általában a böngészőablak alján. Billentyűparancs: Mac OS X ( ALT (OPTION) + Command + I ), Ablakok ( CTRL + SHIFT + I )Ellenőr: 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 (OPTION) + Command + C ), Ablakok ( CTRL + SHIFT + C )Web 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ámos változatá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 (OPTION) + Command + K ), Ablakok ( CTRL + SHIFT + K )hibajavító: 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ásokkal és még sok mással. Amint az a Ellenőr , ez a funkció támogatja a távoli hibakeresést is. Billentyűparancs: Mac OS X ( ALT (OPTION) + Command + S ), Ablakok ( CTRL + SHIFT + S) Stílus szerkesztő: 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észletesen bontja az aktív oldal hálózati teljesítményét, képfrissítési adatait, a JavaScript végrehajtási idejét és állapotát, a festék villogását és még sok mást. Billentyűparancs: Mac OS X, Windows ( SHIFT + F5 )Hálózat: A böngésző által indított összes hálózati kérelmet felsorolja a megfelelő módszerrel, származási tartománygal, típusával, méretével és idővel. Billentyűparancs: Mac OS X ( ALT (OPTION) + Command + Q ), Ablakok ( CTRL + SHIFT + Q )Fejlesztői eszköztár: Megnyitja az interaktív parancssori tolmácsot. Belép Segítség a tolmácshoz az összes rendelkezésre álló parancs és megfelelő szintaxisának listáját. Billentyűparancs: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Lehetővé teszi a webes alkalmazá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 ), Ablakok ( CTRL + SHIFT + J )Érzékeny megjelenítés: Lehetővé teszi, hogy azonnal megjelenítsen egy weboldalt különböző felbontásokban, elrendezésekben és képernyőméretekben, hogy több készüléket, például táblagépeket és okostelefonokat utánozzon. Billentyűparancs: Mac OS X ( ALT (OPTION) + Command + M ), Ablakok ( CTRL + SHIFT + M )Szemcseppentő: Megjeleníti a hexagon kódot az egyénileg kijelölt pixelek számára.Scratchpad: Lehetővé teszi a JavaScript-kódrészletek í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 )Oldal Forrás: Az eredeti böngészőalapú fejlesztői eszköz, ez az opció egyszerűen megjeleníti az aktív oldal forráskódját. Billentyűparancs: Mac OS X ( Command + U ), Ablakok ( CTRL + U )További eszközök beszerzése: Megnyitja a Webfejlesztő eszközkészlete gyűjtemény 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

Általában a F12 fejlesztői eszközök , az Internet Explorer korábbi verziói óta elindított billentyűparancs elhíresítése, az IE11 és a Microsoft Edge eszközének eszköze az út elejétől fogva hosszú utat nyitott, mivel nagyon hasznos monitorok, hibakeresők, emulátorok és -the-fly-fordítók.

1. Kattintson a Több akció menü, 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 a jelölőnégyzetet F12 fejlesztői eszközök . Ahogy már említettem, az eszközökkel is elérheted a F12 billentyűparancs.
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 is elvégezheti. Az IntelliSense funkciókat használhatja az automatikus kiegészítéshez, ha alkalmazható. Billentyűparancs: (CTRL + 1) Konzol: Biztosítja 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) hibajavító: Lehetővé teszi a töréspontok beállítását és hibakeresését a kód végrehajtása közben, szükség esetén soronként. Billentyűparancs: (CTRL + 3) Hálózat: Az oldal betöltése és végrehajtása során a böngésző által indított összes hálózati kérelmet felsorolja, 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 képfrissítési arányokat, a CPU kihasználtságát és más teljesítményhez kapcsolódó mutató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 javíthatja a potenciális memória szivárgását az aktuális weboldalon, ha megjeleníti a memóriahasználati idővonalat és a különböző időintervallumú pillanatfelvételeket. Billentyűparancs: (CTRL + 6) emuláció: Megmutatja, hogyan jelenik meg 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 míg 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 az eredeti helyére visszahelyezheti a gomb megnyomásával CTRL + P egy második alkalommal.

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 Szafari a böngésző menüjében, amely a képernyő tetején található. Ha megjelenik a legördülő menü, válassza a lehetőséget preferenciák . Az alábbi billentyűparancsot is használhatja a menüpont helyett: Command + vessző (,)
2. Safari preferenciák mostantól megjelenik a felület, amely felülbírálja a böngészőablakát. Kattintson a Fejlett ikon, amely a fejléc jobb szélén található.
3. A Fejlett mostantól láthatóvá válnak a preferenciák. A képernyő alján egy opció van jelölve Mutassa a Fejlesztés menüt a menüsorban , egy jelölőnégyzet kíséri. Ha nincs jelölőnégyzet a dobozban, kattintson rá egyszer, hogy ott helyezze el.
4. Zárd be a preferenciák kattintson a piros "x" gombra a bal felső sarokban.
5. Most egy új opciót kell észlelnie a böngésző menüjében fejleszt , között található Könyvjelzők és Ablak . 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: Megadja 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 ellenőrző megjelenítése: Elindítja a fő felületet a Safari dev eszközeihez, általában a böngésző képernyőjének aljára, és a következő szakaszokat tartalmazza: Elements , Hálózat , Erőforrások , Idővonalak , Debugger , Tárolás , Konzol .A Hiba-konzol megjelenítése: Elindítja a dev eszközök felületét, közvetlenül a Konzol amely hibákat, figyelmeztetéseket és egyéb kereshető naplófájlokat jelenít meg.Oldalforrás megjelenítése: Megnyitja a Erőforrások fül, 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 Oldalforrás megjelenítése választási lehetőség.Snippet-szerkesztő megjelenítése: Megnyit egy új ablakot, ahol CSS- és HTML-kódot adhat meg, előnézetesen a kimenetén.A bővítményké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.Az idővonal rögzítése: Megnyitja a Idővonalak fülön é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ását valós időben.Üres Caches: Törli a merevlemezen tárolt teljes gyorsítótárat.A gyorsítótár letiltása: Megállítja a Safari-t a gyorsítótárbó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.Stílusok letiltása: Az oldal betöltésekor figyelmen kívül hagyja a CSS tulajdonságokat.A JavaScript letiltása: Korlátozza a JavaScript végrehajtását minden oldalon.Kiterjesztések letiltása: Megtiltja az összes telepített bővítmény futását a böngészőben.A webhely-specifikus hackok letiltása: Ha a Safari módosításra került, 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é.A helyi fájlkorlátozások letiltása: Lehetővé teszi, hogy a böngésző hozzáférjen a helyi lemezek fájljaihoz, olyan művelet, amely biztonsági okokból alapértelmezés szerint korlátozott.A határokon átnyúló korlátozások letiltása: Ezek a korlátozások alapértelmezés szerint be vannak állítva, hogy megakadályozzák az XSS és egyéb potenciális veszélyeket. Azonban gyakran fejlesztési céllal átmenetileg le kell tiltani őket.Engedélyezze a JavaScriptet az intelligens keresési mezőből: Ha engedélyezve van, lehetővé teszi az URL-ek beírását javascript: közvetlenül a címsávba.Kezelje az SHA-1 tanúsítványokat bizonytalannak: Az SHA-1 algoritmust használó SSL tanúsítványok széles körben elavultnak és sérülékenynek tekinthetők.