13 Tehnici și trucuri pentru lucrul cu crom devtools

Până în prezent, Google Chrome este browserul cel mai popular printre dezvoltatori. Datorită unui ciclu de dezvoltare de șase săptămâni și a unei game impresionante de caracteristici, acest set de instrumente a devenit aproape indispensabil. Caracteristici pe care le-ați auzit despre: editarea CSS în timp real, folosind consola și depanatorul. În acest articol vom împărtăși cu dvs. și alte caracteristici ale acestui instrument.

1. Comutarea rapidă între fișiere

Dacă utilizați Text Sublime, atunci cu siguranță nu puteți trăi fără funcția de mutare în orice fișier. Această abordare este disponibilă și în instrumentele pentru dezvoltatorul Google. Deschideți DevTools, apăsați Ctrl + P pentru a găsi rapid fișierul dorit.

2. Căutați în codul sursă

Pentru a găsi o linie specifică în toate fișierele descărcate, țineți apăsat Ctrl + Shift + F. Această abordare oferă, de asemenea, utilizarea expresiilor regulate.

3. Mergeți la linie

După deschiderea fișierului sursă, puteți să mergeți imediat la linia dorită, utilizând comanda rapidă de la tastatură Ctrl + G, apoi introduceți numărul liniei dorite.

4. Selectarea unui element din consola

În consolă DevTools, puteți utiliza variabile și funcții speciale pentru a prelua elemente DOM:

$ () Este scurt pentru document.querySelector (). Returnează primul element prin selectorul CSS dorit (astfel $ ('div') returnează primul div care va fi întâlnit pe pagină).
$$ () este scurt pentru document.querySelectorAll (). Returnează o serie de elemente utilizând selectorul CSS.
$ 0 - $ 4 - cele cinci elemente DOM selectate, $ 0 ultima.

5. Utilizarea cărucioarelor multiple

Un alt cip ucigaș pe care l-ați putea găsi în Sublime Text. Când editați un fișier, puteți crea mai multe blocuri pentru editarea paralelă a mai multor linii, ținând apăsat Ctrl și făcând clic în locurile potrivite.

6. Anulați ștergerea mesajelor din jurnal

Prin bifarea opțiunii Jurnal rezervare, toate jurnalele vor fi scrise în consola fără purjare în timp ce se încarcă alte pagini. Acest lucru poate fi util atunci când codul de depanare.

7. Formatarea codului <>

Adesea întâlnim fișierele minime, unde tot codul este scris în una sau mai multe rânduri. Pentru a face acest cod mai ușor de citit, putem face clic pe pictograma corespunzătoare.

8. Emulator de utilizare a dispozitivului tactil

O altă caracteristică de detectare a ochilor este capacitatea de a simula o atingere tactilă sau un accelerometru. De asemenea, puteți specifica locația dvs. geografică.

9. Alegerea culorii din eșantion

Când lucrăm cu stiluri, putem alege o anumită culoare nu numai din paleta prezentată, ci și din pagina în sine.

10. Modificarea stării butonului

11. Afișare DOM Shadow

Acum, în browserele web folosesc adesea astfel de cipuri ca câmpuri de text, butoane și alte elemente care sunt ascunse în mod implicit. Cu toate acestea, puteți remedia acest lucru accesând secțiunea Setări -> General și activând opțiunea Afișare umbrelă DOM pentru agent utilizator.

12. Selectarea următoarei evenimente

13. Comutați între formatele de culoare

Folosind Shift + Click, puteți comuta între diferite formate de culoare.

13 Tehnici și trucuri pentru lucrul cu crom devtools

Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!

Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!

Articole similare

Pagina anterioară

Pagina următoare