1. A HTML elemek gyors szerkesztése
2. Bontsa ki az összes gyermekelemet
3. Az ellenőr áthelyezése
4. DOM elem keresés
5. paletták
6. Több kurzor
7. Bázis64 kép kódolása
8. Pszeudo-osztályú kapcsolás
9. Oszlopválasztás
10. Kérés másolása a CURL-re
11. A képernyőn megjelenő billentyűzet
12. Az egész oldal képe
13. Érintő eszközök emulációja
14. 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ól

A 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 ...

1. Nyissa meg az ellenőrzést.
2. Menjen a konzolra.
3. Nyomja meg a Ctrl + Shift + P gombot
4. Írja be a "screenshot" -t
5. Válassza a "Capture full size screenshot" lehetőséget.

Az egész oldal képe

É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