- A HTML elemek gyors szerkesztése
- Bontsa ki az összes gyermekelemet
- Az ellenőr áthelyezése
- DOM elem keresés
- paletták
- Több kurzor
- Bázis64 kép kódolása
- Pszeudo-osztályú kapcsolás
- Oszlopválasztás
- Kérés másolása a CURL-re
- A képernyőn megjelenő billentyűzet
- Az egész oldal képe
- Érintő eszközök emulációja
- Hasznos funkciók
Amint azt a neve is jelzi, a Chrome DevTools vagy a webes ellenőr egy olyan eszköz, amely a webes fejlesztőknek és a hozzá kapcsolódó személyeknek készült. A webes ellenőr lehetővé teszi, hogy tegye a következőket:
- Ellenőrizze a kijelző helyességét.
- Nyomon követheti a JavaScript parancsfájlok végrehajtását.
- Hálózati tevékenységek megtekintése.
A cikk írása során használtam kanári - a Chrome verziója, ahol új funkciókat tesztelnek, amely a Chrome stabil verziójába esik.
Az ellenőr elindításához a jobb oldali egérgombbal kattintson az oldal bármely pontjára, és válassza ki a "Termékkód megtekintése" lehetőséget, és a Ctrl + Shift + C billentyűkombinációt is megnyomhatja.
A HTML elemek gyors szerkesztése
Kezdjük a legegyszerűbb: szerkesztő elemekkel.
Hogyan ellenőrizhető:
- Válassza ki az „Elemek” fület.
- Válasszon ki egy HTML elemet a panelen belül.
- Kattintson duplán a címkére, és módosítsa például a címke nevét.
A szerkesztés befejezése után a zárócímke automatikusan frissül.
Bontsa ki az összes gyermekelemet
Hogyan ellenőrizhető:
- Lépjen az Elemek panelre.
- Válasszon ki egy elemet, és az Alt tartása közben kattintson az elem bal oldalán lévő nyílra.
Az ellenőr áthelyezése
Az ellenőrzőpanel mind a böngészőablak aljára, mind a jobb oldalára nyomható. Például a jobb oldali panel elhelyezkedése kényelmes, ha szélesvásznú monitorokon dolgozik. Az ellenőrzőpanel külön ablakban is elhelyezhető, például egy másik monitorra.
Hogyan ellenőrizhető:
- Ctrl + Shift + D - Váltás helye
DOM elem keresés
Valószínűleg nem sok, akinek ez egy felfedezés, de az „Elemek” lapon DOM kereshet.
Hogyan ellenőrizhető:
- Nyomja meg a Ctrl + F billentyűt, és írja be a javasolt keresési lekérdezést.
paletták
Válassza ki a színt a palettárólA Chrome legutóbbi változataiban a színválasztás néhány változtatáson ment keresztül: két palettát adtak hozzá a színválasztás megkönnyítéséhez.
Több kurzor
Mozgassa a kurzort, és a Ctrl tartása közben kattintson a kívánt területre kurzor hozzáadásához. A Ctrl + U használatával visszavonhatja a műveletet. Személy szerint én soha nem voltam hasznos.
Bázis64 kép kódolása
Hogyan ellenőrizhető:
- Váltás a hálózati panelre.
- Válassza ki a képet
- Kattintson a jobb gombbal a képre, és válassza ki a ""
Pszeudo-osztályú kapcsolás
A pszeudo-osztályok tükrözik az elemek állapotát és azok relatív pozícióit.
Hogyan ellenőrizhető:
- Kattintson az egér jobb oldali gombjával egy elemre az Elemek panelen, és válasszon egy pszeudo-osztályt az Erőelemállapot listában.
- Az Elemek panel jobb oldalán található pszeudo-osztályt is kiválaszthatja.
Oszlopválasztás
Hogyan ellenőrizhető:
- Lépjen a "Források" panelre.
- Válasszon ki egy fájlt.
- Jelölje ki a szöveget az Alt megtartásával.
Az oszlop kiválasztása akkor is működik, ha a HTML elemet az Elemek panelen szerkesztik.
Kérés másolása a CURL-re
A Hálózat lapon lévő bármely kérés átmásolható és beilleszthető a terminálba a curl használatával.
A képernyőn megjelenő billentyűzet
Ha a Nexus 5X profil van kiválasztva, akkor láthatja, hogy a webhely hogyan néz ki, amikor a képernyőn megjelenő billentyűzet aktív.
Chrome DevTools: képernyőn megjelenő billentyűzet
Az egész oldal képe
Vegyünk egy képet az egész oldalról nagyon egyszerű. Csak ...
- Nyissa meg az ellenőrzést.
- Menjen a konzolra.
- Nyomja meg a Ctrl + Shift + P gombot
- Írja be a "screenshot" -t
- Válassza a "Capture full size screenshot" lehetőséget.
Érintő eszközök emulációja
Néhány érzékelőt is szimulálhat:
- Érintőképernyő
- A földrajzi elhelyezkedés koordinátái
- gyorsulásmérő
Hogyan próbálja meg:
- Válassza az Elemek panelt.
- Nyomja meg az "Esc" gombot, és válassza az "Emuláció> Érzékelők" lehetőséget.
Hasznos funkciók
gombok és értékek
A gombok és értékek funkciók lehetővé teszik az objektum gombjainak vagy értékeinek kimenetet a konzolra. A kulcsok és az objektumértékek megjelenítése külön-külön