de Ben Edelstein

Este posibil să fiți deja familiarizați cu funcțiile de bază ale instrumentelor pentru dezvoltatori Chrome: inspectorul DOM, panoul de stiluri și consola JavaScript. Dar există o serie de caracteristici mai puțin cunoscute care pot îmbunătăți dramatic fluxurile de lucru de depanare sau de creare a aplicațiilor.

Tema întunecată

Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Chrome vine cu o temă întunecată încorporată pentru instrumentele de dezvoltare. Îl puteți activa făcând clic pe pictograma cu trei puncte din partea dreaptă sus a panoului de instrumente pentru dezvoltatori, făcând clic pe „setări”, apoi comutând tema.

Uneori mi se pare mai ușor acest lucru și, evident, arată mult mai răcoros 🙂

Mod de selecție

1611297845 971 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Instrumentele pentru dezvoltatori Chrome (DevTools) oferă o serie de moduri de selectare a elementelor – dintre care cel mai convenabil este modul de selecție.

ad-banner

Acest instrument, activat prin apăsarea pictogramei mouse-ului în colțul din stânga sus al panoului de instrumente pentru dezvoltatori (sau cu cmd + shift + c), vă permite să selectați elemente din pagină pur și simplu făcând clic pe ele.

Odată activat, puteți muta mouse-ul în jurul paginii și selectați previzualizarea, apoi faceți clic pentru a selecta un element de inspectat.

Acest instrument este excelent pentru selectarea rapidă a unui element de pe pagină, deoarece apăsând cmd + shift + c se vor deschide instrumentele dev și vor intra direct în modul de selecție.

Stocați ca variabilă globală

1611297846 605 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Inspectarea obiectelor complicate care sunt conectate la consolă poate fi uneori dificilă dacă au mai multe taste sau conțin valori greu de analizat manual. Din fericire, Chrome facilitează inspectarea acestor obiecte cu JavaScript.

Pentru a face acest lucru, faceți clic dreapta pe un obiect din consolă și apăsați „stocați ca variabilă globală”. Aceasta stochează obiectul ca o variabilă globală accesibilă în consola numită temp1 cu care puteți lucra apoi folosind JavaScript.

Instrumente de animație

1611297846 537 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Recent, echipa Chrome a adăugat o serie de funcții noi pentru depanare și pentru crearea animațiilor.

Dacă faceți clic pe meniul drop-down din colțul din stânga sus al consolei, apare un panou „Animații” care vă permite să limitați viteza pentru toate animațiile de pe un site.

De asemenea, puteți întrerupe toate animațiile. Acest lucru este deosebit de util pentru un site care conține conținut animat.

1611297847 223 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de
Vizualizatorul de animații vă permite să controlați individual curba pentru fiecare proprietate
1611297847 523 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de
Controler de animație CSS

Dând clic pe pictograma curbă purpurie din element transition proprietatea vă permite să vizualizați curba de mișcare pentru o animație și să reglați fin proprietățile acesteia. În plus, puteți utiliza pictogramele săgeată pentru a derula o listă de animații presetate pentru a le aplica elementului.

Simulează starea pseudo-element

1611297847 40 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Un alt instrument util pentru stilizarea elementelor este simulatorul de stare a elementelor, la care se accesează făcând clic pe :hov pictogramă din colțul din dreapta sus al panoului Stiluri.

Acest instrument vă permite să simulați elementele pseudo-stări de hover, active, focalizate și vizitate și să vizualizați stilurile asociate cu acele selectoare.

1611297848 588 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Pentru a adăuga stiluri pentru acele pseudo-stări, adăugați un nou selector (cu + pictogramă) și adăugați :<state> până la sfârșitul șirului de selecție.

De exemplu, pentru a adăuga o regulă de deplasare la un li cu clasa logo, faceți un nou selector, li.logo:hoverși adăugați stiluri acolo.

Puteți apoi să vă testați stilurile bifând :hover starea elementului pentru a simula planul pe element.

Precizați CSS și JavaScript

1611297848 851 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Depanarea sau vizualizarea JavaScript și CSS minimizate este foarte dificilă. Dar, din fericire, DevTools oferă un instrument care face acest lucru puțin mai ușor.

După deschiderea unui fișier minimizat în fila „Surse”, puteți face clic pe sigla parantezelor din colțul din stânga jos al fișierului, iar DevTools va „preta” codul.

Acest lucru funcționează destul de bine cu fișierele CSS și face o treabă decentă cu JavaScript, deși unele informații (cum ar fi numele variabilelor) se pierd în procesul de minimizare.

Alt + Sus / Alt + Jos

1611297848 185 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Când depanați CSS, puteți selecta o proprietate și puteți utiliza tastele sus / jos pentru a modifica valoarea acesteia. În mod implicit, tastele săgeată ajustează valorile cu +/- 1. Cu toate acestea, prin menținerea alt , puteți utiliza tastele săgeată pentru a regla valorile fin în pași de 0.1, care este deosebit de util atunci când se lucrează cu valori fracționare.

În schimb, puteți ține shift pentru a regla valorile în pași de 10.

Păstrați jurnalul

1611297849 126 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Conservare jurnal este o casetă de selectare care vă permite să persistați jurnalele între reîmprospătarea paginii. Acest lucru este util la depanarea problemelor site-ului care necesită reîmprospătarea paginii, întrucât toate ieșirile consolei sunt șterse altfel.

Când această opțiune este activată, un nou tip de jurnal „Navigare” apare în consolă pentru a afișa reîmprospătarea paginilor sau evenimentele de navigare pe diferite pagini.

Rețea + Filtre jurnal

1611297849 854 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Când depanați o aplicație care are o mulțime de solicitări de rețea sau jurnale de consolă, poate fi util să filtrați pentru anumite tipuri de evenimente.

Chrome are un limbaj de filtrare care acceptă multe proprietăți diferite, precum și operatorilor * pentru a face meciuri cu metacaracter.

Dacă introduceți „-”, Chrome va expune un cap de tip care arată diferitele proprietăți pentru care puteți filtra. De asemenea, puteți comuta în modul „regex” pentru a face o potrivire regex pe datele afișate în fiecare rând.

Acoperirea codului

1611297850 666 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

Acoperirea codului vă permite să rulați aplicația dvs. web, apoi pentru fiecare fișier JavaScript și CSS, vedeți ce linii de cod au rulat și care nu. Acest lucru este util, deoarece atunci când lucrați la un proiect complex sau pe termen lung, este ușor să acumulați codul mort.

Pentru a-l utiliza, asigurați-vă că aveți Chrome 59 sau o versiune ulterioară și accesați fila „Acoperire”. Apăsați „Înregistrați” și apoi începeți să utilizați aplicația. Când ați terminat, Chrome vă va afișa codul exact care a rulat în timpul sesiunii.

Probleme de depanare în producție

DevTools funcționează numai dacă rulați aplicația pe propriul computer. Dacă sunteți interesat să înțelegeți erorile și problemele de performanță pe care utilizatorii le văd în producție, încercați LogRocket.

1611297850 806 Stapanirea instrumentelor pentru dezvoltatori Chrome tehnici de dezvoltare front end de

LogRocket este un instrument de înregistrare front-end care vă permite să redați problemele ca și cum s-ar fi întâmplat în propriul browser. În loc să ghiciți de ce se întâmplă erori sau să solicitați utilizatorilor capturi de ecran și jurnalele, LogRocket vă permite să redați sesiunea pentru a înțelege rapid ce nu a funcționat corect. Funcționează perfect cu orice aplicație, indiferent de cadru, și are pluginuri pentru a înregistra un context suplimentar din React, Angular și Vue.js.

LogRocket vă instrumentează aplicația pentru a înregistra jurnalele consolelor, solicitările / răspunsurile la rețea cu anteturi + corpuri, metadatele browserului, acțiunile / starea Redux și temporizările de performanță. De asemenea, înregistrează HTML și CSS pe pagină, recreând videoclipuri perfecte pentru pixeli chiar și din cele mai complexe aplicații cu o singură pagină.

Poti verificați aici LogRocket.

LogRocket | Înregistrare sesiune și reluare sesiune pentru aplicații JavaScript
LogRocket vă ajută să înțelegeți problemele care vă afectează utilizatorii, astfel încât să puteți reveni la construirea unui software excelent.logrocket.com

Mulțumesc pentru lectură. Sper că aceste tehnici avansate DevTools vă vor ajuta să creați aplicații mai bune cu mai puțin stres.