Naudojame „Chrome DevTools“ kaip apie
- Greitai redaguokite HTML elementus
- Išplėsti visus vaiko elementus
- Inspektoriaus perkėlimas
- DOM elementų paieška
- Paletės
- Keli žymekliai
- Koduoti base64 vaizdą
- Pseudo klasės perjungimas
- Stulpelių pasirinkimas
- Kopijuoti užklausą dėl CURL
- Ekraninė klaviatūra
- Visas puslapio ekranas
- Jutiklinių prietaisų emuliacija
- Naudingos funkcijos
Kaip rodo pavadinimas, „Chrome DevTools“ arba žiniatinklio inspektorius yra įrankis, skirtas žiniatinklio kūrėjams ir su jais susijusiems žmonėms. Interneto inspektorius leidžia jums atlikti šiuos veiksmus:
- Patikrinkite ekrano teisingumą.
- Stebėkite scenarijų vykdymą „JavaScript“.
- Peržiūrėti tinklo veiklą.
Rašydamas šį straipsnį aš naudoju Kanarų salos - „Chrome“ versija, kurioje išbandomos naujos funkcijos, kurios tada patenka į stabilią „Chrome“ versiją.
Norėdami pradėti inspektorių, galite dešiniuoju pelės klavišu spustelėti bet kurioje puslapio vietoje ir pasirinkti „Peržiūrėti elemento kodą“, taip pat galite tiesiog paspausti Ctrl + Shift + C.
Greitai redaguokite HTML elementus
Pradėkime nuo paprasčiausių: redagavimo elementų.
Kaip patikrinti:
- Pasirinkite skirtuką Elements.
- Pasirinkite bet kurį HTML elementą skydelyje.
- Dukart spustelėkite žymę ir pakeiskite, pvz., Žymos pavadinimą.
Baigus redagavimą, uždarymo žyma automatiškai atnaujinama.
Išplėsti visus vaiko elementus
Kaip patikrinti:
- Eikite į elementų skydelį.
- Pasirinkite elementą ir, laikydami Alt, spustelėkite rodyklę kairėje elemento pusėje.
Inspektoriaus perkėlimas
Inspektorių skydelį galima paspausti tiek į naršyklės lango apačią, tiek į dešinę. Pavyzdžiui, skydelio vieta dešinėje yra patogi dirbant su plačiaekraniais monitoriais. Be to, inspektorių skydelis gali būti dedamas į atskirą langą ir, pavyzdžiui, perkeliamas į kitą monitorių.
Kaip patikrinti:
- „Ctrl“ + „Shift“ + „D“ - perjungti vietą
DOM elementų paieška
Tikriausiai ne daugelis, kuriam tai bus atradimas, bet „Elementų“ skirtuke galite ieškoti DOM.
Kaip patikrinti:
- Paspauskite Ctrl + F ir įveskite siūlomą paieškos užklausą.
Paletės
Pasirinkite spalvą iš paletėsSpalvų pasirinkimas naujausiose „Chrome“ versijose pasikeitė: pridėta dviejų paletių, kad būtų lengviau pasirinkti spalvą.
Keli žymekliai
Perkelkite žymeklį ir, laikydami klavišą Ctrl, spustelėkite norimą sritį, kad pridėtumėte žymeklį. Galite atšaukti veiksmą naudodami „Ctrl + U“. Asmeniškai aš niekada nebuvo naudinga.
Koduoti base64 vaizdą
Kaip patikrinti:
- Perjunkite į tinklo skydelį.
- Pasirinkite vaizdą
- Dešiniuoju pelės mygtuku spustelėkite vaizdą ir pasirinkite „“
Pseudo klasės perjungimas
Pseudo klasės atspindi elementų būklę ir jų santykines pozicijas.
Kaip patikrinti:
- Dešiniuoju pelės mygtuku spustelėkite elementą skydelyje Elementai ir pasirinkite Pseudo klasę Force Element State sąraše.
- Taip pat galite pasirinkti pseudo klasę dešinėje Elementų skydo pusėje.
Stulpelių pasirinkimas
Kaip patikrinti:
- Eikite į skiltį „Šaltiniai“.
- Pasirinkite bet kurį failą.
- Pasirinkite tekstą laikydami Alt.
Pasirinkus stulpelį, elementai skydelyje Elementai redaguojami.
Kopijuoti užklausą dėl CURL
Bet kurį užklausą, esantį skirtuke Tinklas, galima nukopijuoti ir įterpti į terminalą, kad galėtumėte juos naudoti.
Ekraninė klaviatūra
Jei pasirinktas „Nexus 5X“ profilis, galite pamatyti, kaip svetainė atrodo, kai ekrano klaviatūra yra aktyvi.
„Chrome DevTools“: ekrano klaviatūra
Visas puslapio ekranas
Paimkite viso puslapio vaizdą labai paprasta. Tiesiog reikia ...
- Atidaryti inspektorių.
- Eikite į konsolę.
- Paspauskite Ctrl + Shift + P
- Įveskite „screenshot“
- Pasirinkite „Capture full size screenshot“
Jutiklinių prietaisų emuliacija
Taip pat galite imituoti kai kuriuos jutiklius:
- Jutiklinis ekranas
- Geolokacijos koordinatės
- Greičio matuoklis
Kaip išbandyti:
- Pasirinkite elementą Elementai.
- Paspauskite „Esc“ ir pasirinkite „Emulation> Sensors“.
Naudingos funkcijos
raktus ir vertybes
Klavišų ir reikšmių funkcijos leidžia atitinkamai išvesti objekto raktus arba vertes į konsolę. Raktų ir objektų verčių rodymas atskirai