Mēs izmantojam Chrome DevTools kā tādu
- Ātri rediģējiet HTML elementus
- Izvērst visus bērnu elementus
- Inspektora pārvietošana
- DOM elementu meklēšana
- Paletes
- Vairāki kursori
- Kodēt bāzes64 attēlu
- Pseido klases maiņa
- Kolonnas izvēle
- Kopēt pieprasījumu par CURL
- Ekrāna tastatūra
- Visas lapas ekrānuzņēmums
- Skārienjutīgo ierīču emulācija
- Noderīgas funkcijas
Kā norāda nosaukums, Chrome DevTools vai tīmekļa inspektors ir rīks, kas paredzēts tīmekļa izstrādātājiem un ar to saistītajiem cilvēkiem. Tīmekļa inspektors ļauj jums veikt šādas darbības:
- Pārbaudiet displeja pareizību.
- Sekojiet skriptu izpildei JavaScript.
- Skatīt tīkla darbības.
Rakstot šo rakstu es izmantoju Kanāriju sala - Chrome versija, kurā tiek pārbaudītas jaunas funkcijas, kas pēc tam ietilpst stabilā Chrome versijā.
Lai sāktu inspektoru, varat ar peles labo pogu noklikšķināt jebkurā vietā uz lapas un atlasīt "Skatīt vienuma kodu", jūs varat arī vienkārši nospiest Ctrl + Shift + C.
Ātri rediģējiet HTML elementus
Sāksim ar vienkāršākajiem: rediģēšanas elementiem.
Kā pārbaudīt:
- Atlasiet cilni Elements.
- Atlasiet jebkuru paneļa iekšpusē esošo HTML elementu.
- Veiciet dubultklikšķi uz taga un mainiet, piemēram, atzīmes nosaukumu.
Kad rediģēšana ir pabeigta, aizvēršanas atzīme tiks automātiski atjaunināta.
Izvērst visus bērnu elementus
Kā pārbaudīt:
- Dodieties uz paneļa Elements.
- Atlasiet elementu un, turot Alt, noklikšķiniet uz bultiņas, kas atrodas kreisajā pusē no elementa.
Inspektora pārvietošana
Inspektora paneli var nospiest gan pārlūkprogrammas loga apakšā, gan uz labo pusi. Piemēram, paneļa atrašanās vieta labajā pusē ir ērta, strādājot ar platekrāna monitoriem. Arī inspektoru paneli var ievietot atsevišķā logā un, piemēram, pārsūtīt uz citu monitoru.
Kā pārbaudīt:
- Ctrl + Shift + D - Pārslēgt atrašanās vietu
DOM elementu meklēšana
Iespējams, ne daudzi, kam tas būs atklājums, bet cilnē Elements jūs varat meklēt pēc DOM.
Kā pārbaudīt:
- Nospiediet Ctrl + F un ievadiet piedāvāto meklēšanas vaicājumu.
Paletes
Izvēlieties krāsu no paletesKrāsu izvēle jaunākajās Chrome versijās ir mainījusies: pievienotas divas paletes, lai atvieglotu krāsu izvēli.
Vairāki kursori
Pārvietojiet kursoru un, turot Ctrl, nospiediet vēlamajā apgabalā, lai pievienotu kursoru. Darbību var atsaukt, izmantojot Ctrl + U. Personīgi es nekad neesmu bijis noderīgs.
Kodēt bāzes64 attēlu
Kā pārbaudīt:
- Pārslēgties uz tīkla paneli.
- Atlasiet attēlu
- Ar peles labo pogu noklikšķiniet uz attēla un atlasiet ""
Pseido klases maiņa
Pseido klases atspoguļo elementu stāvokli un to relatīvās pozīcijas.
Kā pārbaudīt:
- Ar peles labo pogu noklikšķiniet uz elementa paneļa elementi un atlasiet pseidogrupu Force Element valsts sarakstā.
- Varat arī izvēlēties pseido klasi paneļa Elements labajā pusē.
Kolonnas izvēle
Kā pārbaudīt:
- Dodieties uz paneli "Avoti".
- Atlasiet jebkuru failu.
- Iezīmējiet tekstu, turot Alt.
Izvēloties kolonnu, darbojas arī HTML rediģēšana elementu panelī.
Kopēt pieprasījumu par CURL
Jebkuru pieprasījumu cilnē Tīkls var kopēt un pēc tam ielīmēt terminālī, lai to izpildītu, izmantojot čokurošanās.
Ekrāna tastatūra
Ja ir izvēlēts Nexus 5X profils, varat redzēt, kā vietne izskatās, kad ekrāna tastatūra ir aktīva.
Chrome DevTools: ekrāna tastatūra
Visas lapas ekrānuzņēmums
Fotografējiet visu lapu ir ļoti vienkārša. Tikai nepieciešams ...
- Atvērt inspektors.
- Dodieties uz konsoli.
- Nospiediet Ctrl + Shift + P
- Ierakstiet "screenshot"
- Atlasiet "Capture full size screenshot"
Skārienjutīgo ierīču emulācija
Varat arī simulēt dažus sensorus:
- Skārienekrāns
- Ģeogrāfiskās atrašanās vietas koordinātas
- Akselerometrs
Kā izmēģināt:
- Atlasiet paneli Elements.
- Nospiediet "Esc" un izvēlieties "Emulation> Sensors".
Noderīgas funkcijas
taustiņus un vērtības
Taustiņu un vērtību funkcijas ļauj izvadīt objektu atslēgas vai vērtības konsolei. Atslēgu un objektu vērtību rādīšana atsevišķi