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



Szerző:

A legtöbb böngészőgyártó mellett, akik a mindennapi internetezésre törekszenek, a webfejlesztőknek, a tervezőknek és a minőségbiztosítási szakembereknek is gondoskodnak, akik nagyszerű eszközöket közvetlenül a böngészőkbe integrálva segítenek felépíteni az alkalmazásokat és webhelyeket, amelyekhez a felhasználók hozzáférnek. maguk.

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 mást. A mai böngészők lehetővé teszik egy sokkal mélyebb merülést azáltal, hogy olyan dolgokat hajtanak végre, mint a JavaScript-kivonatok végrehajtása és hibakeresése, a DOM-elemek ellenőrzése és szerkesztése, az alkalmazás vagy az oldal betöltésekor valós idejű hálózati forgalom figyelemmel kísérése a szűk keresztmetszetek azonosítására, a CSS-teljesítmény elemzése, a kód megfelelő nem használ túl sok memóriát vagy túl sok CPU-ciklust, és még sok minden mást.

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

Az alábbi oktatóanyagok bemutatják, 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 a teljesítményproblémák feltárása érdekében, különböző eszközképernyők szimulálását, beleértve az Android vagy iOS rendszert futtató képernyőket is, és számos más hasznos funkciót is elvégezhet.

  1. Válassza a Chrome-ot főmenü, három vízszintes vonallal jelölt és a böngésző jobb felső sarkában található.

  2. Amikor megjelenik a legördülő menü, vigye az egérmutatót a Több eszköz opciót.

  3. Ekkor megjelenik egy almenü. Válassza ki a feliratú 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 (OPCIÓ) + COMMAND + I)

  4. Mostantól meg kell jeleníteni a Chrome Developer Tools felületet, amint az a képernyőképen látható. A Chrome verziójától függően a kezdeti elrendezés kissé eltérhet az itt bemutatott elrendezéstő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ő füleket tartalmazza.

  5. Ezen szakaszok mellett a következő eszközöket is elérheti a >> ikonra, amely a teljesítmény Tab.

    • Memory design: Figyelje és rögzítse a memória használatát egy weboldalon. Láthatja, hogy mennyire nehéz a JavaScript a webhelyén.
    • Biztonság: Kiemeli a tanúsítványproblémákat és más, az aktív oldal vagy alkalmazás biztonságával kapcsolatos problémákat.
    • Alkalmazás: Ellenőrizze a webalkalmazás által használt erőforrásokat. Nézze meg teljes körűen a használt információkat.
    • Audit: Lehetőségeket kínál az oldal vagy az alkalmazás 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 egy tucat eszköz egyikén megjelenik, köztük számos jól ismert Android és iOS modellen, például iPaden, iPhone-on és Samsung Galaxy-on. Azt is megadhatja, hogy egyedi képernyőfelbontásokat utánozzon, hogy megfeleljen az Ön fejlesztési vagy tesztelési igényeinek.

    Váltás Eszköz mód be és ki, válassza a ikont mobiltelefon ikonra közvetlenül a Elemek Tab.

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

    Ebben a legördülő menüben áthelyezheti a dokkolót, megmutathatja vagy elrejtheti a különböző eszközöket, valamint elindíthat fejlettebb elemeket, például egy eszközellenőrt. Meg fogja találni, hogy maga a dev eszközök felülete nagyon testreszabható az ebben a szakaszban található beállításokkal.


Mozilla Firefox

A Firefox webfejlesztői része olyan eszközöket tartalmaz a tervezőknek, a fejlesztőknek és a tesztelőknek, mint például a stílusszerkesztő és a pixel célzó szemcsepp. 

  1. Válassza a Firefox elemet főmenü, képviseli három vízszintes vonal és a böngészőablak jobb felső sarkában található.

  2. Amikor megjelenik a legördülő menü, válassza a lehetőséget Web Developer.

  3. A Webfejlesztő menü most a következő opciókat tartalmaznia kell. Észre fogja 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 felületét, általában a böngészőablak alján helyezkedik el. Billentyűparancs: Mac OS X (ALT (OPCIÓ) + COMMAND + I), Ablakok (CTRL + SHIFT + I)
    • Ellenőr: Lehetővé teszi a CSS és a HTML kód ellenőrzését és / vagy módosítását az aktív oldalon, valamint egy hordozható eszközön távoli hibakeresés révén. Billentyűparancs: Mac OS X (ALT (OPCIÓ) + COMMAND + C), Ablakok (CTRL + SHIFT + C)
    • Web Console: Lehetővé teszi a JavaScript-kifejezések végrehajtását az aktív oldalon, valamint a naplózott adatok sokféleségének áttekintését, beleértve a biztonsági figyelmeztetéseket, a hálózati kérelmeket, a CSS-üzeneteket és egyebeket. Billentyűparancs: Mac OS X (ALT (OPCIÓ) + COMMAND + K), Ablakok (CTRL + SHIFT + K)
    • Debugger: A JavaScript hibakereső segítségével pontosan meghatározhatja és kijavíthatja a hibákat töréspontok beállításával, a DOM-csomópontok, a fekete boksz külső forrásainak ellenőrzésével és még sok mással. Az Inspectorhoz hasonlóan ez a funkció támogatja a távoli hibakeresést is. Billentyűparancs: Mac OS X (ALT (OPCIÓ) + COMMAND + S), Ablakok (CTRL + SHIFT + S)
    • Stílusszerkesztő: Lehetővé teszi új stíluslapok létrehozását és beépítését az aktív weboldalba, vagy a meglévő munkalapok szerkesztését, és csak egy kattintással tesztelheti a változtatások megjelenítését egy böngészőben. Billentyűparancs: Mac OS X, Windows (SHIFT + F7)
    • teljesítmény: Részletesen bemutatja az aktív oldal hálózati teljesítményét, a képkockasebesség-adatokat, a JavaScript végrehajtási idejét és állapotát, a festékvillanást és még sok minden mást. Billentyűparancs: Mac OS X, Windows (SHIFT + F5)
    • hálózat: Felsorolja a böngésző által kezdeményezett minden hálózati kérelmet a megfelelő módszerrel, eredettartománysal, típussal, méretgel és az eltelt idővel együtt. Billentyűparancs: Mac OS X (ALT (OPCIÓ) + COMMAND + Q), Ablakok (CTRL + SHIFT + Q)
    • Tárolási ellenőr: Vessen egy pillantást a weboldal által tárolt gyorsítótárra és sütikre. Billentyűparancs: (SHIFT + F9)
    • Fejlesztői eszköztár: Megnyit egy interaktív parancssori tolmácsot. Belép segít a tolmácsba az összes rendelkezésre álló parancs és megfelelő szintaxisuk felsorolásához. Billentyűparancs: Mac OS X, Windows (SHIFT + F2)
    • WebIDE: Lehetőséget nyújt webalkalmazások létrehozására és futtatására a Firefox OS-t futtató tényleges eszközön vagy a Firefox OS Simulator segítségével. Billentyűparancs: Mac OS X, Windows (SHIFT + F8)
    • Böngésző konzol: Ugyanazt a funkciót biztosítja, mint a webkonzol (lásd fent). Mindazonáltal minden visszaküldött adat a teljes Firefox alkalmazásra vonatkozik (beleértve a kiterjesztéseket és a böngésző szintű funkciókat is), nem csak az aktív weboldal. Billentyűparancs: Mac OS X (SHIFT + COMMAND + J), Ablakok (CTRL + SHIFT + J)
    • Reszponzív tervezési nézet: Lehetővé teszi, hogy azonnal megnézzen egy weboldalt különböző felbontásban, elrendezésben és képernyőméretben, hogy utánozza több eszközt, köztük táblagépeket és okostelefonokat. Billentyűparancs: Mac OS X (ALT (OPCIÓ) + COMMAND + M), Ablakok (CTRL + SHIFT + M)
    • eyedropper: Megjeleníti az egyenként kiválasztott pixelek hexadecimális színkódját.
    • Jegyzetfüzet: A Scratchpad segítségével egy előugró Firefox ablakból írhat, szerkeszthet, integrálhat és futtathat JavaScript kódrészleteket. Nyisson meg egy interaktív JavaScript-dokumentumot, amely lehetővé teszi a kódba történő beírást, és tesztelheti azt egy webhelyen. Billentyűparancs: (SHIFT + F4)
    • Szolgáltatási dolgozók: Hibakeresési szolgáltatás a webes alkalmazásban dolgozók számára. Részletes információkat kaphat teljesítményükről és hibáikról.
    • Oldal forrása: 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), Ablakok (CTRL + U)
    • További eszközök beszerzése: Megnyitja a Webfejlesztő Eszköztár gyűjtemény a Mozilla hivatalos kiegészítő webhelyén, amely körülbelül egy tucat népszerű kiterjesztést tartalmaz, mint például a Firebug és a Greasemonkey.


Microsoft Edge / Internet Explorer

Általánosan a F12 Fejlesztői eszközök, tisztelgés annak a billentyűparancsnak, amely az Internet Explorer korábbi verziói, az IE11 és a Microsoft Edge fejlesztői eszközkészlete óta elindította a kezelőfelületet, megalakulása óta hosszú utat tett meg azzal, hogy nagyon hasznos monitorok, hibakeresők, emulátorok csoportját kínálta -a légy fordítók.

  1. választ További műveletek, képviseli három pont és a böngészőablak jobb felső sarkában található.

  2. Amikor megjelenik a legördülő menü, válassza a feliratú opciót Fejlesztői eszközök.

  3. A fejlesztői felületet most meg kell jeleníteni, általában a böngészőablak alján. A következő eszközök állnak rendelkezésre, amelyek mindegyike a megfelelő fül fejlécére kattintva vagy a hozzá tartozó billentyűparancs segítségével érhető el.

    • DOM Explorer: Lehetővé teszi a stíluslapok és a HTML szerkesztését az aktív oldalon, így a módosított eredményeket menet közben jelenítheti meg. Adott esetben az IntelliSense funkciót használja a kód automatikus kitöltésére. Billentyűparancs: (CTRL + 1)
    • Konzol: Lehetőséget nyújt hibakeresési információk, köztük számlálók, időzítők, nyomkövetések és testreszabott üzenetek beküldésére integrált API-n keresztül. Ezenkívül lehetővé teszi, hogy kódot injektáljon egy aktív weboldalra, é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 végrehajtása közbeni hibakeresését, szükség szerint 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 hálózati kérelmeket, beleértve a protokoll részleteit, a tartalom típusát, a sávszélesség-felhasználást és még sok minden mást. Billentyűparancs: (CTRL + 4)
    • teljesítmény: Részletek a képkockasebességekről, a CPU-kihasználtságról és a teljesítményhez kapcsolódó egyéb mutatókról, amelyek segítenek az oldal betöltési idejének és egyéb tevékenységeinek felgyorsításában. Billentyűparancs: (CTRL + 5)
    • Memory design: Segít az aktuális weboldal lehetséges memóriaszivárgásainak elkülönítésében és kijavításában azáltal, hogy megjeleníti a memóriahasználati idővonalat és a különböző időintervallumokban található pillanatképeket. Billentyűparancs: (CTRL + 6)
    • Emuláció: Megmutatja, hogyan jelenne meg az aktív oldal különféle felbontásokban és képernyőméretekben, emulálva az okostelefonokat, táblagépeket és más eszközöket. 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álását szélesség és hosszúság megadásával. Billentyűparancs: (CTRL + 7)

  4. A Konzol miközben bármely más eszközön belül nyomja meg a gombot négyzet gomb benne egy jobb oldali konzollal, amely a fejlesztői eszközök felületének jobb felső sarkában található.

  5. A fejlesztői eszközök kezelőfelületének kikapcsolásához, hogy külön ablak legyen belőle, válassza a ikont két lépcsőzetes téglalap vagy használja a következő billentyűparancsot: CTRL + P. Az eszközöket visszahelyezheti eredeti helyére a CTRL + P második megnyomásával.


Apple Safari (csak OS X)

A Safari változatos fejlesztői eszközkészlete tükrözi azt a nagy fejlesztői közösséget, amely Mac-et használ tervezési és programozási igényeikhez. Az erőteljes konzol, valamint a hagyományos naplózási és hibakeresési funkciók mellett egy könnyen használható adaptív tervezési mód és egy eszköz a saját böngészőbővítmények létrehozásához is rendelkezésre áll.

  1. választ szafari 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 lehetőséget preferenciák. A menüpont helyett a következő billentyűparancsot is használhatja: COMMAND + COMMA(,)

  2. Szafari preferenciák kezelőfelületet kell megjeleníteni, átfedve a böngésző ablakát Válaszd ki a Haladó ikonra, a fejléc jobb szélén található.

  3. A Részletes a beállításoknak most láthatónak kell lenniük. A képernyő alján egy opció van felcímkézve A Fejlesztés menü megjelenítése a menüsorban, egy jelölőnégyzet kíséretében. Ha nincs jelölőnégyzet a mezőben, kattintson rá egyszer, hogy elhelyezzen egyet.

  4. Csukja be a preferenciák felület.

  5. Most észre kell vennie egy új lehetőséget a böngésző menüben Fejleszteniközött található Könyvjelzők és ablak. Kattintson erre a menüpontra. Most egy legördülő menüt kell megjeleníteni, amely a következő lehetőségeket tartalmazza.

    • Nyissa meg az oldalt 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 többi böngésző egyikében.
    • Böngésző: Lehetővé teszi, hogy több mint egy tucat előre meghatározott felhasználói ügynök-érték közül válasszon, beleértve a Chrome, a Firefox és az Internet Explorer több verzióját, valamint meghatározhatja saját egyéni karakterláncát.
    • Lépjen be az adaptív tervezési módba: Az aktuális oldalt úgy jeleníti meg, ahogyan az különböző eszközökön és különböző képernyőfelbontásokkal jelenik meg.
    • Webellenőr megjelenítése: Elindítja a Safari fejlesztői eszközeinek fő felületét, amelyet általában a böngésző képernyőjének alján helyeznek el, és amely a következő szakaszokat tartalmazza: Elemek, Hálózat, Erőforrások, Idővonalak, Hibakereső, Tárolás, Konzol.
    • Hiba konzol megjelenítése: Elindítja a dev eszközök felületét is, közvetlenül a Konzol fül amely hibákat, figyelmeztetéseket és egyéb kereshető naplóadatokat jelenít meg.
    • Oldalforrás megjelenítése: Megnyitja a Források fülre, amely megjeleníti a dokumentum által kategorizált aktív oldal forráskódját.
    • Oldalforrások megjelenítése: Ugyanazt a funkciót látja el, mint az Oldalforrás megjelenítése lehetőség.
    • Snippet Editor megjelenítése: Megnyit egy új ablakot, ahol megadhatja a CSS és a HTML kódot, és közben megtekintheti annak kimenetét.
    • Show Extension Builder: Lehetőséget nyújt Safari kiterjesztések létrehozására vagy szerkesztésére CSS, HTML és JavaScript használatával.
    • Idővonal-felvétel megjelenítése: Megnyitja az Idővonalak lapot, és elkezd valós időben megjeleníteni a hálózati kéréseket, az elrendezési és megjelenítési információkat, valamint a JavaScript végrehajtását.
    • Üres gyorsítótárak: Törli a merevlemezen jelenleg tárolt teljes gyorsítótárat.
    • Tiltsa le a gyorsítótárakat: Megállítja a Safari gyorsítótár általi tárolását, így minden tartalom lekérhető a szerverről minden oldal betöltésekor.
    • Képek letiltása: Megakadályozza a képek megjelenítését az összes weboldalon.
    • Stílusok letiltása: Az oldal betöltésekor figyelmen kívül hagyja a CSS tulajdonságokat.
    • Letiltja a JavaScriptet: Korlátozza a JavaScript futtatását az összes oldalon.
    • Letiltja a kiterjesztéseket: Megtiltja az összes telepített kiterjesztés futtatását a böngészőben.
    • Tiltsa le a webhelyspecifikus hackeléseket: Ha a Safari úgy lett módosítva, hogy kifejezetten kezelje az aktív weboldal problémáit, ez a lehetőség blokkolja ezeket a változásokat, így az oldal úgy töltődik be, mint a módosítások bevezetése előtt.
    • Tiltsa le a helyi fájlkorlátozásokat: Lehetővé teszi a böngésző számára a helyi lemezeken lévő fájlokhoz való hozzáférést, ez a művelet biztonsági okokból alapértelmezés szerint korlátozott.
    • Tiltsa le az eredetre vonatkozó korlátozásokat: Ezeket a korlátozásokat alapértelmezés szerint az XSS és más potenciális veszélyek megelőzése érdekében alkalmazzák. Fejlesztési célokból azonban gyakran átmenetileg le kell tiltani őket.
    • Engedélyezze a JavaScript használatát az intelligens keresési mezőből: Ha engedélyezve van, akkor lehetővé teszi az URL-ek javascript: beillesztésével történő beírását közvetlenül a címsorba.
    • Az SHA-1 tanúsítványokat bizonytalanként kezelje: Az SHA-1 algoritmust használó SSL-tanúsítványokat széles körben elavultnak és sebezhetőnek tartják.