Používame Chrome DevTools ako o
- Rýchlo upravovať prvky HTML
- Rozbaliť všetky podradené prvky
- Premiestnenie inšpektora
- Vyhľadávanie elementu DOM
- palety
- Viac kurzorov
- Kódovanie base64 obrazu
- Pseudo-triedne prepínanie
- Výber stĺpca
- Kopírovať žiadosť o cURL
- Klávesnica na obrazovke
- Snímka obrazovky celej stránky
- Emulácia dotykových zariadení
- Užitočné funkcie
Ako už názov napovedá, Chrome DevTools, alebo webový inšpektor, je nástroj určený pre webové vývojárov a ľudí s ním spojených. Webový inšpektor vám umožňuje:
- Skontrolujte správnosť displeja.
- Sledovanie vykonávania skriptov v jazyku JavaScript.
- Zobrazenie sieťových aktivít.
Pri písaní tohto článku som použil kanárik - verzia prehliadača Chrome, kde sú testované nové funkcie, ktoré potom patria do stabilnej verzie prehliadača Chrome.
Ak chcete spustiť inšpektora, môžete kliknúť pravým tlačidlom myši kdekoľvek na stránke a vybrať položku Zobraziť kód položky.
Rýchlo upravovať prvky HTML
Začnime s najjednoduchšími: editačnými prvkami.
Ako skontrolovať:
- Vyberte kartu „Prvky“.
- Vyberte ľubovoľný prvok HTML v paneli.
- Dvakrát kliknite na značku a zmeňte napríklad názov značky.
Po dokončení úprav sa záverečná značka automaticky aktualizuje.
Rozbaliť všetky podradené prvky
Ako skontrolovať:
- Prejdite na panel Prvky.
- Vyberte prvok a podržte Alt, kliknite na šípku vľavo od prvku.
Premiestnenie inšpektora
Panel inšpektorov možno stlačiť v spodnej časti okna prehliadača a na jeho pravej strane. Umiestnenie panela vpravo je vhodné napríklad pri práci na širokouhlých monitoroch. Panel inšpektorov môže byť tiež umiestnený v samostatnom okne a napríklad prenesený na iný monitor.
Ako skontrolovať:
- Ctrl + Shift + D - Toggle Poloha
Vyhľadávanie elementu DOM
Pravdepodobne nie veľa, pre ktorých to bude objav, ale v záložke „Prvky“ môžete vyhľadávať podľa DOM.
Ako skontrolovať:
- Stlačte Ctrl + F a zadajte navrhovaný vyhľadávací dopyt.
palety
Vyberte farbu z paletyVýber farby v najnovších verziách prehliadača Chrome prešiel niekoľkými zmenami: pridali sa dve palety na uľahčenie výberu farieb.
Viac kurzorov
Pohybom kurzora a podržaním klávesu Ctrl kliknite na požadovanú oblasť a pridajte kurzor. Akciu môžete vrátiť späť pomocou Ctrl + U. Osobne som nikdy nebol užitočný.
Kódovanie base64 obrazu
Ako skontrolovať:
- Prepnite na panel Sieť.
- Vyberte obrázok
- Kliknite pravým tlačidlom myši na obrázok a vyberte položku „“
Pseudo-triedne prepínanie
Pseudo-triedy odrážajú stav prvkov a ich vzájomné pozície.
Ako skontrolovať:
- Kliknite pravým tlačidlom myši na prvok v paneli Prvky a vyberte zoznam pseudo-triedy v zozname stavu Force Element State.
- Môžete tiež vybrať pseudotriedu na pravej strane panela Prvky.
Výber stĺpca
Ako skontrolovať:
- Prejdite na panel „Zdroje“.
- Vyberte ľubovoľný súbor.
- Vyberte text podržaním klávesu Alt.
Výber stĺpca funguje aj vtedy, keď je HTML upravované v paneli Prvky.
Kopírovať žiadosť o cURL
Každú požiadavku na karte Sieť možno kopírovať a potom vložiť do terminálu na vykonanie pomocou curl.
Klávesnica na obrazovke
Ak je vybratý profil Nexus 5X, môžete vidieť, ako stránka vyzerá, keď je aktívna klávesnica na obrazovke.
Chrome DevTools: Klávesnica na obrazovke
Snímka obrazovky celej stránky
Urobte si obrázok celej stránky je veľmi jednoduchý. Len potrebujete ...
- Otvorte inšpektora.
- Prejdite na konzolu.
- Stlačte Ctrl + Shift + P
- Zadajte „screenshot“
- Vyberte možnosť Zachytiť snímku v plnej veľkosti
Emulácia dotykových zariadení
Môžete tiež simulovať niektoré senzory:
- Dotyková obrazovka
- Súradnice pre geolokáciu
- akcelerometer
Ako vyskúšať:
- Vyberte panel Prvky.
- Stlačte "Esc" a vyberte "Emulation> Sensors".
Užitočné funkcie
kľúče a hodnoty
Funkcie klávesov a hodnôt vám umožňujú vydávať kľúče alebo hodnoty objektu do konzoly. Zobrazenie kľúčov a hodnôt objektov samostatne