- HTML-elementide kiire redigeerimine
- Laiendage kõiki lapse elemente
- Inspektori ümberpaigutamine
- DOM elementide otsing
- Paletid
- Mitu kursorit
- Kodeeri base64 pilti
- Pseudo-klassi lülitamine
- Veeru valik
- Kopeeri CURL-i taotlus
- Ekraaniklaviatuur
- Kogu lehe pilt
- Puuteseadmete emuleerimine
- Kasulikud funktsioonid
Nagu nimigi ütleb, on Chrome DevTools või veebi inspektor vahend, mis on mõeldud veebiarendajatele ja nendega seotud inimestele. Veebi inspektor võimaldab teil teha järgmist:
- Kontrollige ekraani õigsust.
- Jälgi skriptide täitmist JavaScriptis.
- Vaadake võrgu tegevusi.
Selle artikli kirjutamisel kasutasin Kanaari saared - Chrome'i versioon, kus on testitud uusi funktsioone, mis kuuluvad seejärel Chrome'i stabiilsesse versiooni.
Inspektori käivitamiseks saate paremklõpsata ükskõik millisel leheküljel ja valida "View item code", saate ka lihtsalt vajutada Ctrl + Shift + C.
HTML-elementide kiire redigeerimine
Alustame lihtsaimast: redigeerimiselemendid.
Kuidas kontrollida:
- Valige vahekaart „Elements“.
- Valige paneeli sees ükskõik milline HTML-element.
- Topeltklõpsake sildil ja muutke näiteks sildi nime.
Kui redigeerimine on lõpetatud, värskendatakse automaatselt sildi.
Laiendage kõiki lapse elemente
Kuidas kontrollida:
- Avage paneel Elements.
- Valige element ja hoidke Alt all hoides elementi vasakul pool asuvat noolt.
Inspektori ümberpaigutamine
Inspektori paneeli saab vajutada nii brauseri akna all kui ka paremale küljele. Näiteks on laiekraani monitoridel töötamisel mugav paneeli asukoht paremal. Samuti saab inspektoripaneeli paigutada eraldi aknasse ja näiteks üle teise monitori.
Kuidas kontrollida:
- Ctrl + Shift + D - Lülita asukoht
DOM elementide otsing
Ilmselt mitte paljud, kellele see avastus on, kuid vahekaardil „Elemendid“ saate otsida DOM-i poolt.
Kuidas kontrollida:
- Vajutage Ctrl + F ja sisestage soovitud otsingupäring.
Paletid
Valige värv paletilt Värvi valik Chrome'i viimastes versioonides on muutunud: lisatud on kaks paletti värvi valiku hõlbustamiseks.
Mitu kursorit
Liigutage kursorit ja hoides Ctrl-i hoides kursorit soovitud piirkonnas. Toimingu saab tühistada Ctrl + U abil. Isiklikult pole ma kunagi olnud kasulik.
Kodeeri base64 pilti
Kuidas kontrollida:
- Lülitage võrgupaneelile.
- Valige pilt
- Paremklõpsake pildil ja valige ""
Pseudo-klassi lülitamine
Pseudo-klassid kajastavad elementide olekut ja nende suhtelisi asukohti.
Kuidas kontrollida:
- Paremklõpsake elementi paneelil elementi ja valige pseudo-klass Force Elementi loendis.
- Saate valida ka pseudo-klassi paneelil Elements paremal.
Veeru valik
Kuidas kontrollida:
- Avage paneel "Allikad".
- Valige suvaline fail.
- Valige tekst, hoides all Alt.
Veeru valimine toimib ka siis, kui HTML-i redigeeritakse paneelil Elements.
Kopeeri CURL-i taotlus
Võrgu vahekaardil olevat taotlust saab kopeerida ja seejärel kleepida terminali, et kasutada seda curliga.
Ekraaniklaviatuur
Kui valitud on Nexus 5X profiil, näete, kuidas sait kuvab, kui ekraanil olev klaviatuur on aktiivne.
Chrome DevTools: ekraanil klaviatuur
Kogu lehe pilt
Kogu lehekülje pilt on väga lihtne. Lihtsalt vaja ...
- Avatud inspektor.
- Mine konsooli.
- Vajutage Ctrl + Shift + P
- Sisestage "screenshot"
- Vali "Capture full size screenshot"
Kogu lehe pilt Puuteseadmete emuleerimine
Samuti saate simuleerida mõningaid andureid:
- Puutetundlik ekraan
- Geolokatsiooni koordinaadid
- Kiirendusmõõtur
Kuidas proovida:
- Valige paneel Elements.
- Vajutage "Esc" ja valige "Emulation> Sensors".
Kasulikud funktsioonid
võtmed ja väärtused
Klahvide ja väärtuste funktsioonid võimaldavad teil vastavalt objekti konsoolile välja anda võtmed või väärtused. 
Võtmete ja objektide väärtuste kuvamine eraldi