1. Hitro uredite elemente HTML
2. Razširi vse podrejene elemente
3. Premestitev inšpektorja
4. Iskanje elementov DOM
5. Palete
6. Več kazalcev
7. Kodiraj base64 sliko
8. Preklapljanje psevdo razreda
9. Izbira stolpca
10. Kopiraj zahtevo za cURL
11. Zaslonska tipkovnica
12. Posnetek zaslona celotne strani
13. Emulacija naprav na dotik
14. Uporabne funkcije

Kot pove že samo ime, je Chrome DevTools ali spletni inšpektor orodje, oblikovano za spletne razvijalce in osebe, ki so z njim povezane. Spletni inšpektor vam omogoča, da naredite naslednje:

• Preverite pravilnost zaslona.
• Spremljajte izvajanje skriptov v JavaScriptu.
• Ogled omrežnih dejavnosti.

Pri pisanju tega članka sem uporabil Canary - različico Chroma, kjer se preizkušajo nove funkcije, ki nato spadajo v stabilno različico Chroma.

Če želite zagnati inšpektorja, lahko z desno miškino tipko kliknete kjerkoli na strani in izberete »Prikaži kodo postavke«, lahko pa samo pritisnete Ctrl + Shift + C.

Hitro uredite elemente HTML

Začnimo z najpreprostejšimi: elementi za urejanje.

Kako preveriti:

• Izberite zavihek »Elementi«.
• Izberite kateri koli element HTML znotraj plošče.
• Dvakrat kliknite na oznako in spremenite, na primer, ime oznake.

Ko je urejanje končano, se bo zaprta oznaka samodejno posodobila.

Razširi vse podrejene elemente

Kako preveriti:

• Pojdite na ploščo Elements.
• Izberite element in, medtem ko držite Alt, kliknite puščico na levi strani elementa.

Premestitev inšpektorja

Inšpekcijski panel lahko pritisnete na dno okna brskalnika in na njegovo desno stran. Na primer, lokacija plošče na desni je primerna, če delate na širokozaslonskih monitorjih. Inšpekcijski panel se lahko namesti tudi v ločeno okno in se na primer prenese na drug monitor.

Kako preveriti:

• Ctrl + Shift + D - Preklopi lokacijo

Iskanje elementov DOM

Verjetno ne veliko, za katere bo to odkritje, toda na zavihku »Elementi« lahko iščete po DOM-u.

Kako preveriti:

• Pritisnite Ctrl + F in vnesite predlagano poizvedbo.

Palete

Izberite barvo iz palete

Izbira barve v zadnjih različicah Chroma je doživela nekaj sprememb: dodali sta dve paleti, da bi olajšali izbiro barve.

Več kazalcev

Premaknite kazalec in med držanjem tipke Ctrl kliknite na želeno območje, da dodate kazalec. Dejanje lahko razveljavite s Ctrl + U. Osebno še nikoli nisem bil uporaben.

Kodiraj base64 sliko

Kako preveriti:

• Preklopite na omrežno ploščo.
• Izberite sliko
• Z desno miškino tipko kliknite sliko in izberite »«

Preklapljanje psevdo razreda

Psevdo-razredi odražajo stanje elementov in njihove relativne položaje.

Kako preveriti:

• Z desno miškino tipko kliknite element v plošči Elements in na seznamu Force Element State izberite psevdo-razred.
• Izberete lahko tudi psevdo-razred na desni strani plošče Elements.

Izbira stolpca

Kako preveriti:

• Pojdite na ploščo »Viri«.
• Izberite katero koli datoteko.
• Označite besedilo tako, da držite Alt.

Izbira stolpca deluje tudi, ko je HTML urejen na plošči Elements.

Kopiraj zahtevo za cURL

Vsako zahtevo v zavihku Omrežje je mogoče kopirati in nato prilepiti v terminal za izvedbo z uporabo curla.

Zaslonska tipkovnica

Če je izbran profil Nexus 5X, lahko vidite, kako izgleda spletno mesto, ko je zaslonska tipkovnica aktivna.

Chrome DevTools: zaslonska tipkovnica

Posnetek zaslona celotne strani

Fotografirajte celotno stran je zelo preprosto. Potrebujem samo ...

1. Odpri inšpektorja.
2. Pojdi na konzolo.
3. Pritisnite Ctrl + Shift + P
4. Vnesite »posnetek zaslona«
5. Izberite »Posnetek zaslona v polni velikosti«

Posnetek zaslona celotne strani

Emulacija naprav na dotik

Lahko tudi simulirate nekaj senzorjev:

• Zaslon na dotik
• Koordinate za geolokacijo
• Merilnik pospeška

Kako poskusiti:

• Izberite ploščo Elements.
• Pritisnite "Esc" in izberite "Emulation> Sensors".

Uporabne funkcije

ključev in vrednosti

Funkcije tipk in vrednosti omogočajo, da na konzolo oddajajo ključe oziroma vrednosti objekta. Prikaz ločeno vrednosti ključev in predmetov