1. Ātri rediģējiet HTML elementus
2. Izvērst visus bērnu elementus
3. Inspektora pārvietošana
4. DOM elementu meklēšana
5. Paletes
6. Vairāki kursori
7. Kodēt bāzes64 attēlu
8. Pseido klases maiņa
9. Kolonnas izvēle
10. Kopēt pieprasījumu par CURL
11. Ekrāna tastatūra
12. Visas lapas ekrānuzņēmums
13. Skārienjutīgo ierīču emulācija
14. 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 paletes

Krā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 ...

1. Atvērt inspektors.
2. Dodieties uz konsoli.
3. Nospiediet Ctrl + Shift + P
4. Ierakstiet "screenshot"
5. Atlasiet "Capture full size screenshot"

Visas lapas ekrānuzņēmums

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