Koristimo Chrome DevTools kao o tome
- Brzo uređivanje HTML elemenata
- Proširite sve podređene elemente
- Premještanje inspektora
- Pretraživanje DOM elementa
- palete
- Više pokazivača
- Kodiraj base64 sliku
- Pseudo-klasa prebacivanje
- Odabir stupca
- Kopirajte zahtjev za cURL
- Zaslonska tipkovnica
- Snimak zaslona cijele stranice
- Emulacija dodirnih uređaja
- Korisne značajke
Kao što naziv implicira, Chrome DevTools ili web-inspektor alat je dizajniran za web-programere i osobe povezane s njim. Web inspektor vam omogućuje sljedeće:
- Provjerite ispravnost zaslona.
- Pratite izvršavanje skripti u JavaScriptu.
- Prikaz mrežnih aktivnosti.
Prilikom pisanja ovog članka koristio sam Kanari - verzija Chromea, gdje se testiraju nove značajke, koje zatim spadaju u stabilnu verziju preglednika Chrome.
Da biste pokrenuli inspektora, možete kliknuti bilo gdje na stranici desnom tipkom miša i odabrati "Prikaži kôd stavke", možete pritisnuti i Ctrl + Shift + C.
Brzo uređivanje HTML elemenata
Počnimo s najjednostavnijim: uređivačkim elementima.
Kako provjeriti:
- Odaberite karticu "Elementi".
- Odaberite bilo koji HTML element unutar ploče.
- Dvaput kliknite na oznaku i promijenite, primjerice, naziv oznake.
Kada se uređivanje završi, završna se oznaka automatski ažurira.
Proširite sve podređene elemente
Kako provjeriti:
- Idite na ploču Elements.
- Odaberite element i držeći Alt, kliknite strelicu s lijeve strane elementa.
Premještanje inspektora
Panel inspektora može se pritisnuti i na dno prozora preglednika i na njegovu desnu stranu. Na primjer, položaj ploče s desne strane prikladan je za rad na monitorima sa širokim zaslonom. Također, panel inspektora može se smjestiti u poseban prozor i, na primjer, prenijeti na drugi monitor.
Kako provjeriti:
- Ctrl + Shift + D - Prebaci lokaciju
Pretraživanje DOM elementa
Vjerojatno ne mnogi za koje će ovo biti otkriće, ali u kartici "Elementi" možete pretraživati po DOM-u.
Kako provjeriti:
- Pritisnite Ctrl + F i unesite predloženi upit za pretraživanje.
palete
Odaberite boju iz paleteIzbor boje u novijim verzijama Chromea doživio je neke promjene: dodane su dvije palete kako bi se olakšao izbor boje.
Više pokazivača
Pomaknite pokazivač i, držeći Ctrl, kliknite na željeno područje da biste dodali pokazivač. Akciju možete poništiti pomoću Ctrl + U. Osobno nikada nisam bio koristan.
Kodiraj base64 sliku
Kako provjeriti:
- Prebacite se na ploču Mreža.
- Odaberite sliku
- Desnom tipkom miša kliknite sliku i odaberite ""
Pseudo-klasa prebacivanje
Pseudo-klasa odražava stanje elemenata i njihove relativne položaje.
Kako provjeriti:
- Desnom tipkom miša kliknite element na ploči Elementi i odaberite pseudo-klasu na popisu Force Element State.
- Također možete odabrati pseudo-klasu na desnoj strani panela Elements.
Odabir stupca
Kako provjeriti:
- Idite na ploču "Izvori".
- Odaberite bilo koju datoteku.
- Označite tekst držeći Alt.
Odabir stupca radi i kada se HTML uređuje na ploči Elementi.
Kopirajte zahtjev za cURL
Svaki zahtjev na kartici Mreža može se kopirati i zatim zalijepiti u terminal za izvršavanje pomoću uvijanja.
Zaslonska tipkovnica
Ako je odabran profil Nexus 5X, možete vidjeti kako izgleda web-lokacija kada je zaslonska tipkovnica aktivna.
Chrome DevTools: zaslonska tipkovnica
Snimak zaslona cijele stranice
Snimite cijelu stranicu vrlo jednostavno. Samo trebate ...
- Otvori inspektora.
- Idite na konzolu.
- Pritisnite Ctrl + Shift + P
- Upišite "snimku zaslona"
- Odaberite "Snimanje snimke zaslona pune veličine"
Emulacija dodirnih uređaja
Također možete simulirati neke senzore:
- Zaslon osjetljiv na dodir
- Koordinate za geolokaciju
- brzinomjer
Kako isprobati:
- Odaberite panel Elementi.
- Pritisnite "Esc" i odaberite "Emulation> Sensors".
Korisne značajke
ključevi i vrijednosti
Funkcije tipki i vrijednosti omogućuju vam da na konzolu izvezete ključeve ili vrijednosti objekta. Prikaz pojedinačnih vrijednosti tipki i vrijednosti objekta