Meniul
AcasăAvarii

Consola pentru dezvoltatori Google Chrome: zece utilitate neevidente. Instrumente de dezvoltare de stil în Google Chrome

  • Traducere

Astăzi, Google Chrome este cel mai popular browser printre dezvoltatorii web. Cu un ciclu de lansare rapid de șase săptămâni și un set puternic de instrumente pentru dezvoltatori în continuă expansiune, browserul a devenit un instrument obligatoriu. Majoritatea dintre voi sunteți probabil familiarizați cu multe dintre caracteristicile sale, cum ar fi editarea CSS live folosind consola și depanatorul. În acest articol, vom analiza 15 sfaturi și trucuri interesante care vă vor îmbunătăți și mai mult productivitatea.

1. Schimbați rapid fișierele

Dacă ai folosit Sublime Text, atunci probabil că nu ai putea trăi fără „Mergi la nimic” ( Nota traducatorului: Pentru utilizatorii Idea, această caracteristică se numește „Searching Everywhere” și este accesată făcând dublu clic pe tasta Shift). Veți fi bucuroși să aflați că există o funcție similară în instrumentele pentru dezvoltatori. Apăsați Ctrl + P (Cmd + P pentru utilizatorii de Mac) în timp ce Panoul pentru dezvoltatori este deschis pentru a găsi și deschide rapid orice fișier din proiectul dvs.

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

Dar dacă doriți să căutați în codul sursă? Pentru a căuta toate fișierele descărcate pe o pagină, apăsați Ctrl + Shift + F (Cmd + Opt + F). Această metodă de căutare acceptă și căutarea prin expresii regulate.

3. Du-te la linie

Odată ce ați deschis un fișier în fila Surse, instrumentele pentru dezvoltatori vă permit să săriți la orice rând din acel fișier. Pentru a face acest lucru, apăsați Ctrl + G pentru Windows și Linux (sau Cmd + L pentru Mac) și introduceți numărul liniei.

O altă modalitate este să apăsați Ctrl + O, dar în loc de textul de căutare, introduceți „:” și numărul rândului ( Nota traducatorului: sau puteți merge și mai departe și introduceți numele fișierului și numărul rândului folosind „:” ca separator între ele, în timp ce introducerea întregului nume de fișier nu este deloc necesară, aceasta este o căutare).

4. Preluarea elementelor DOM folosind consola

Consola Instrumente pentru dezvoltatori acceptă mai multe funcții magice și variabile utile pentru preluarea DOM:
  • $() - echivalent cu document.querySelector(). Returnează primul element care se potrivește cu selectorul CSS, de exemplu $("DIV") va returna primul element DIV de pe pagină.
  • $$() - echivalent cu document.querySelectorAll(). Returnează o listă de elemente ( Nota traducatorului:și anume NodeList) care se potrivesc cu selectorul CSS dat.
  • $0 - $4 este istoricul ultimelor cinci elemente DOM pe care le-ați selectat în fila Elemente, unde $0 va fi ultimul.

Puteți afla mai multe funcții ale consolei.

5. Folosirea mai multor semne de simbol și selecții

Când editați un fișier, puteți seta mai multe semne de simbol ținând apăsat Ctrl (Cmd pentru Mac) și făcând clic unde doriți, astfel încât să puteți seta semnul de semnătură în mai multe locuri simultan.

6. Păstrați jurnalul

Prin activarea opțiunii Păstrare jurnal din fila Consolă, rezultatele vor fi salvate mai degrabă decât șterse de fiecare dată când pagina este încărcată. Acest lucru este convenabil dacă doriți să vizualizați un istoric al erorilor care apar înainte de a părăsi pagina.

(Nota traducatorului: o proprietate similară este disponibilă în fila Rețea. Când este activată, istoricul interogărilor nu mai este șters la comutarea între pagini. Cu toate acestea, dacă o pagină a fost redirecționată folosind JavaScript și a fost făcută orice altă solicitare, atunci este aproape întotdeauna imposibil să vizualizați rezultatul acelei solicitări. Nu uitați să dezactivați astfel de proprietăți atunci când depanați pentru o lungă perioadă de timp! Instrumentele pentru dezvoltatori consumă aproape întotdeauna mai multe resurse de sistem decât pagina în sine!)

7. Preening surse minificate

Instrumentele pentru dezvoltatori Chrome au încorporat un cod sursă redus într-o formă mai lizibilă de către om. Butonul se află în colțul din stânga jos al fișierului deschis în fila Surse.

(Nota traducatorului: uneori nu este suficient să activați această proprietate automat, așa cum, de exemplu, se face în FireFox)

8. Modul dispozitiv

Instrumentele pentru dezvoltatori includ un mod puternic pentru dezvoltarea paginilor optimizate pentru dispozitive mobile. Acest videoclip de la Google demonstrează majoritatea caracteristicilor sale avansate, cum ar fi schimbarea rezoluției ecranului, emularea atingerilor de pe ecranul tactil și emularea conexiunilor de rețea de calitate scăzută.

9. Emulați senzorii dispozitivului

O altă caracteristică interesantă a modului dispozitiv este capacitatea de a simula senzorii dispozitivelor mobile, cum ar fi ecranele tactile și accelerometrele. Puteți chiar să introduceți coordonatele dvs. geografice. Obiectul este situat în partea de jos a filei Elemente în Emulare -> Senzori.

10. Selectarea culorilor

Când alegeți o culoare în editorul de stil, puteți face clic pe eșantionul de culoare și va apărea o fereastră de selecție a culorilor. În timp ce această fereastră este deschisă, indicatorul mouse-ului se transformă într-o lupă pentru alegerea culorilor de pe pagină, cu precizie în pixeli.

11. Stare forțată a elementului

Instrumentele de dezvoltare vă permit să simulați stări ale elementelor CSS DOM, cum ar fi:hover și:focus, făcând mai ușor să scrieți stiluri pentru ele. Această caracteristică este disponibilă în Editorul de proprietăți CSS.

12. Afișează shadow DOM

Browserele creează elemente precum câmpuri de introducere și butoane din alte elemente de bază care sunt de obicei ascunse. Cu toate acestea, puteți merge la Setări -> General și puteți activa Afișare user agent shadow DOM pentru a afișa aceste elemente de bază în fila Elemente. Acest lucru vă va oferi posibilitatea de a le proiecta separat.

13. Selectați următoarea apariție

Dacă apăsați Ctrl + D (Cmd + D) în timp ce editați fișiere în fila Surse, următoarea apariție a cuvântului curent va fi evidențiată suplimentar, permițându-vă să le editați simultan.

14. Schimbarea formatului de culoare

Prin Shift + Click pe eșantionul de culoare, în panoul de editare CSS, formatul de culoare va fi schimbat în RGBA, HSL hexazecimal ( Nota traducatorului:în același timp, atât forma prescurtată hexazecimală, cât și cea completă, și chiar în majuscule. Dacă acest lucru nu vă convine, browserul va încerca să găsească această culoare în lista constantelor de culoare standard. Singurul dezavantaj al acestei caracteristici este că, pentru a selecta formatul dorit, de multe ori trebuie să „dați clic” prin toate celelalte opțiuni posibile).

15. Editarea fișierelor locale în spațiul de lucru

Spațiile de lucru sunt un instrument puternic în Tabloul de bord pentru dezvoltatori, care transformă instrumentele pentru dezvoltatori într-un IDE. Spațiul de lucru conține o structură de fișiere în fila Surse care se potrivește cu structura proiectului local, astfel încât acum puteți edita și salva direct fără a fi nevoie să copiați și să lipiți modificările într-un editor de text extern.

Pentru a configura spațiile de lucru, accesați fila Surse ( Nota traducatorului: activați panoul de navigare dacă este ascuns, pentru a face acest lucru, faceți clic pe butonul Afișare navigator din colțul din stânga sus al filei) și faceți clic dreapta oriunde în panoul de navigare sau pur și simplu trageți întreaga filă a proiectului în panoul dezvoltatorului. Acum, folderul selectat, subdirectoarele sale și toate fișierele din ele vor fi disponibile pentru editare indiferent de pagina pe care vă aflați. Pentru un confort și mai mare, puteți utiliza fișierele care sunt utilizate pe această pagină, ceea ce vă va permite să le editați și să le salvați.

UPD. Nota traducatorului:

Dosarul adăugat va fi disponibil din toate filele. Prin urmare, dacă proiectul dvs. are mai mult de un fișier HTML, atunci va fi suficient să îl deschideți în următoarea filă a browserului.

Puteți afla mai multe despre spațiile de lucru

Aflați ce pot face Chrome DevTools pentru dvs. și aflați cum să le folosiți la întregul lor potențial.

Dintre toate disciplinele de programare pe computer, dezvoltarea web are cu siguranță cea mai mică barieră la intrare. Aproape tot ceea ce aveți nevoie pentru a crea o pagină web simplă este Notepad și un browser.

Cu toate acestea, pe măsură ce aspectul devine mai complex, ținerea evidenței modificărilor codului paginii într-un Notepad obișnuit devine din ce în ce mai dificilă. Știu de la mine că un dezvoltator web începător poate petrece mai mult de o oră doar încercând să găsească o regulă în foaia de stil pentru a schimba aspectul unui element sau altul...

Puteți, desigur, să căutați la întâmplare, dar experții deja predați de experiență amară nu se bazează pe vigilența lor. Ei folosesc doar unele speciale instrumente de dezvoltare, care sunt încorporate în majoritatea browserelor și vă permit să inspectați rapid codul și să testați anumite opțiuni pentru funcționarea acestuia.

Un tip similar de instrument a apărut în Internet Explorer. Vechea Opera folosea panoul Dragonfly în aceste scopuri și chiar avea propriul analog încorporat de Notepad cu evidențiere a codului, care vă permitea să tastați direct în mediul browser:

Astăzi, s-au îndepărtat de această practică și au oferit browserelor web inspectori speciali de cod. Browserele bazate pe motorul Chromium, și mai precis Google Chrome, se pot lăuda cu cele mai funcționale instrumente de dezvoltare. Să privim totul folosind exemplul lui.

Apelarea instrumentelor pentru dezvoltatori și a vizualizărilor de pagină

Puteți apela instrumentele pentru dezvoltatori în Chrome în mai multe moduri:

  1. Din meniul principal. Faceți clic pe butonul de meniu (trei puncte în colțul din dreapta sus al ferestrei browserului), plasați cursorul peste lista derulantă "Mai multe unelte"și faceți clic pe element "Instrumente de dezvoltare".
  2. Taste rapide. Puteți apăsa butonul pentru a apela F12 sau combinație CTRL+SHIFT+I.
  3. Din meniul contextual(cel mai convenabil pentru inspectarea anumitor elemente ale paginii). Faceți clic dreapta pe obiectul dorit de pe pagina web și selectați „Vedeți codul”(sau „Inspectați elementul” în unele versiuni anterioare de Chrome).

Bara de instrumente pentru dezvoltatori este un set de file pe care se află anumite module funcționale, precum și butoane de control și configurare. Primul lucru la care ar trebui să acordați atenție sunt butoanele comune. În partea stângă puteți găsi un buton de selecție a elementului de pagină și un buton de selectare a vizualizării paginii:

Vom studia în continuare comportamentul primului, dar în ceea ce privește al doilea, vă permite să emulați afișarea unei pagini web pe ecranul unuia dintre dispozitivele mobile disponibile (de exemplu, un iPhone) sau pe un afișaj al unui rezoluție dată în pixeli. Tot ce trebuie să faceți este să îl apăsați și să selectați dispozitivul dorit:

Există, de asemenea, mai multe butoane și indicatoare pe partea dreaptă. Indicatorii afișează numărul de erori (cu roșu) și avertismente (cu galben) în funcționarea scripturilor. Butonul principal de aici poate fi apelat meniul de setări. Vă permite să schimbați legarea panoului în sine în raport cu cadrul cu pagină, precum și să activați și să dezactivați filele suplimentare cu instrumente (secțiunea „Mai multe instrumente”). În mod implicit, este situat în partea de jos, sub pagina inspectată, dar poate fi, de asemenea, plasat în lateral sau chiar andocat într-o fereastră separată:

Meniul are și o secțiune „Setări”, care oferă acces la numeroase setări ale instrumentului pentru dezvoltatori. Dar, pentru început, este puțin probabil să ai nevoie de ele, așa că este suficient să știi despre ele. Și ne vom uita la principalele file cu funcții utile.

Fila Elemente

În mod implicit, Chrome DevTools se deschide într-o filă "Elemente". Aceasta este una dintre cele mai utile file, deoarece vă permite să vizualizați și să schimbați rapid codul HTML și CSS al diferitelor elemente ale unei pagini web. Pentru a selecta un element, trebuie doar să activați primul buton din partea stângă a panoului („Selectați un element din pagină pentru a-l inspecta”) și să îndreptați cursorul mouse-ului spre fragmentul dorit al paginii. Pe pagina însăși, selecția și dimensiunea blocului în pixeli vor fi afișate în jurul elementului selectat, iar în fila „Elemente” codul HTML se va extinde la o linie care descrie fragmentul selectat:

După ce am selectat un element, îl putem edita și stilurile asociate cu acesta după cum avem nevoie. De exemplu, dorim să schimbăm textul și aspectul blocului „nor” cu frazele Fridei pe site-ul nostru. Pentru a face acest lucru, selectați blocul în sine și uitați-vă la conținutul său:

După cum puteți vedea, în interiorul acestuia există trei blocuri cu replici diferite și un script care comută aceste replici după anumite perioade de timp. Pentru a scrie ceva propriu, putem opri scriptul și scrie textul nostru într-unul dintre blocuri (editarea HTML este disponibilă după dublu clic pe element). Deși, de ce să pierzi timpul cu fleacuri? Putem elimina toate blocurile inutile, lăsând doar unul (și în același timp putem demola scriptul :)):

Deci, am schimbat textul din bloc, dar pare puțin mic... Avem nevoie de amploarea „crimei” noastre să fie vizibilă la prima vedere :) Și aici funcția de editare a stilului, care este disponibilă în partea suplimentară din fila „Elemente”, ne va ajuta . Selectați blocul dorit din cod și făcând dublu clic în panoul lateral puteți fie să editați stilurile care există deja, fie să adăugați altele noi. Astfel poți obține rezultate foarte vizibile :)

Vă rugăm să rețineți că toate elementele pe care le adăugăm în panoul de stiluri sunt înregistrate automat ca stiluri inline (parametrii atributului „stil”) ale blocului de cod HTML selectat. Mai mult, fiecare dintre ele poate fi dezactivat rapid prin debifarea casetei de selectare din stânga (în cod, parametrul dezactivat este eliminat automat ca comentariu).

Și, poate, cel mai util lucru este că pentru fiecare selector cu o descriere a stilurilor există o legătură exactă către linia în care este de fapt scris în fișierul CSS. Acest lucru vă permite să deschideți fișierul și să faceți modificările necesare într-o locație cunoscută în loc să căutați manual! Adică, puteți utiliza instrumentele pentru dezvoltatori din fila „Elemente” pentru a introduce și evalua preliminar editări temporare cod ( toate editările dispar după reîncărcarea paginii) urmată de introducerea celor mai de succes modificări ale codului în mod continuu.

De asemenea, merită remarcat, în sfârșit, că panoul pentru editarea stilurilor are o serie de file proprii, dintre care „Stiluri” este doar prima. Iată secțiunile suplimentare de acolo:

  • Calculat- afișează modelul blocului selectat și stilurile calculate automat pentru acesta, care nu sunt specificate în mod explicit sau au fost moștenite din blocurile părinte;
  • Ascultători de evenimente- afișează o listă de funcții care „ascultă” anumite evenimente pentru întreaga pagină sau un bloc selectat în mod specific (trebuie să debifați caseta;
  • Puncte de întrerupere DOM- conține așa-numitele „puncte de întrerupere” DOM (abreviat în engleză „Document Object Model”), care poate fi creat din meniul contextual al codului HTML (grupul „Break on”) la modificarea lui pentru anularea rapidă/aplicarea modificărilor efectuate ;
  • Proprietăți- vă permite să vizualizați lista completă a proprietăților JavaScript pentru blocul selectat din pagină;
  • Accesibilitate- arată nivelul ierarhic de imbricare pentru blocul selectat fără a lua în considerare tipurile de bloc, clasele, identificatorii sau alte caracteristici ale acestora.

Prezența tuturor acestor instrumente suplimentare nu vă obligă să le utilizați. De obicei, abilitatea de a edita codul HTML și CSS este suficientă. Cu toate acestea, dacă trebuie să lucrați cu JavaScript, atunci lista de ascultare, punctele de întrerupere DOM și proprietățile blocurilor vă pot fi foarte utile!

Consolă

Deoarece vorbim despre JavaScript, nu putem să nu menționăm un instrument încorporat în Chrome DevTools numit consolă. Îl puteți găsi separat Fila „Consolă”., și este, de asemenea, afișat implicit ca un panou de jos suplimentar în toate celelalte file (puteți dezactiva afișarea din setări selectând „Ascunde sertarul consolei” sau apăsând butonul ESC):

Consola poate îndeplini două funcții simultan: monitorizarea evenimentelor pe pagină afișând avertismente și erori, precum și executarea comenzilor JavaScript introdus de utilizator. Prima funcție este clar executată. În ieșirea consolei, toate evenimentele sunt grupate în trei categorii cu culori de fundal diferite:

  1. alb- „knockouts” despre evenimentele finalizate cu succes.
  2. Galben- avertismente despre posibile erori și defecțiuni non-critice.
  3. roșu- erori în executarea scriptului sau în accesarea anumitor resurse solicitate.

Erorile și avertismentele conțin o scurtă descriere a problemei și un link către fișierul și linia din acesta care cauzează problema. Cunoscând locația exactă a problemei (presupunând că aceasta apare într-un fișier de pe serverul dvs.), puteți localiza și remedia rapid eroarea.

În ceea ce privește executarea codului personalizat, această caracteristică este folosită foarte des pentru a depana rapid codul și a efectua diverse experimente cu JavaScript. De exemplu, atunci când învățați această limbă, nu aveți întotdeauna nevoie de un Notepad separat sau chiar de un mediu de dezvoltare cu drepturi depline. Puteți executa scripturi simple direct în consolă (mai ales că acceptă finalizarea comenzilor).

Pentru programarea consolei, cel mai bine este să deschideți o pagină internă inexistentă în Chrome (de exemplu, chrome://blank/) sau o nouă filă goală (chrome://newtab/). Acest lucru va evita suprapunerile în execuția scripturilor care rulează deja pe pagină. De fapt, asta este tot - putem scrie cod în consolă și îl putem executa apăsând Enter. Singurul lucru pe care trebuie să-l rețineți este că pentru ieșire, în loc de tradiționalul „document.write("");", este folosită construcția "console.log("");". Iată cel mai primitiv exemplu de afișare a unui șir de text:

console.log(„Prima mea ieșire de text în consola Chrome:)”);

Consola acceptă o serie de specificatori care vă permit să definiți în mod explicit tipul de ieșire (șir/număr/element DOM/obiect JavaScript), să efectuați înlocuirea datelor tipului desemnat sau să aplicați formatarea:

Iată câteva exemple de utilizare a specificatorilor:

*** Exemplul 1 ***

console.log(„Număr până la cinci: %d, %d, %d, %d, %d \n%s”, 1, 2, 3, 4, 5, „O să mă uit! ");

*** Exemplul 2 ***

console.log("%cAcest lucru va fi scris cu litere mari roșii pe un fundal albastru", "culoare: #f00; dimensiunea fontului: 30px; fundal: #00f; padding:10px; font-weight:bold");

*** Exemplul 3 ***

var curDate = data noua();
var zi = curDate.getDate();
var luna = curDate.getMonth();
var arr = [
"Ianuarie",
"Februarie",
"Martie",
"Aprilie",
"Mai",
"Iunie",
"Iulie",
"August",
"Septembrie",
"Noiembrie",
"Decembrie",
];
console.log ("%cAstăzi: %s - %d număr", "culoare: portocaliu; dimensiunea fontului: 30px; fundal: albastru; umplutură: 20px", arr, zi);

După cum puteți vedea, consola poate fi folosită cu succes nu numai pentru inspectarea codului existent, ci și ca mediu de învățare a JavaScript. Acceptă atât expresii cu o singură linie, cât și construcții mai complexe cu mai multe linii cu variabile, matrice și bucle. Pentru a alimenta o linie în consolă, în loc de Enter, trebuie să apăsați SHIFT+ENTER, iar pentru a alimenta linii în rezultatele de ieșire, utilizați caracterul de avans de linie - „\n”.

Tab. Surse

La prima vedere, scopul celei de-a treia file de instrumente pentru dezvoltatori "Surse" nu tocmai clar. În mod implicit, în centrul spațiului de lucru, aici este deschis și codul sursă al paginii, care, din anumite motive, nu poate fi editat. Există două panouri pe laterale: „Pagină” (stânga) și „Fire” (dreapta). Și tocmai panoul din stânga este principala „bogăție” a filei „Surse”!

Acest panou vă permite să vizualizați toate resursele care sunt încărcate împreună cu pagina. Imagini, scripturi, foi de stil - toate acestea pot fi selectate și vizualizate în zona de lucru (și scripturile pot fi, de asemenea, editate):

Pe lângă vizualizarea resurselor și editarea JavaScript (apropo, puteți folosi instrumentele din panoul din dreapta), fila „Surse” vă permite să descărcați orice fișiere pe computer. Această funcție poate fi folosită pentru a descărca, de exemplu, fotografii de pe Instagram și alte resurse web în care salvarea directă a imaginilor nu este disponibilă! Doar deschideți instrumentele pentru dezvoltatori, căutați imaginile necesare în lista de resurse și apoi salvați-le:

În mod similar, puteți descărca, de exemplu, fonturile preferate, grafica SVG și resurse similare, a căror salvare directă ar putea să nu fie disponibilă.

Instrumente de testare și audit

Cele trei file discutate mai sus sunt, s-ar putea spune, principalele din instrumentele de dezvoltare. Compoziția și numărul altora se pot schimba de la o versiune la alta a Google Chrome (cum se întâmplă, de exemplu, cu fila „Memorie”, care apare și dispare). În plus, numărul de file poate fi crescut datorită extensiilor instalate care adaugă propriile bare de instrumente.

În acest moment, versiunea actuală a Google Chrome este cea de-a 69-a ramură recent actualizată. Prin urmare, vom lua în considerare file suplimentare folosind exemplul acestuia.

fila Rețea

Fila „Rețea” vă permite să vizualizați statisticile de încărcare pentru toate elementele paginii web inspectate, precum și să monitorizați solicitările trimise de aceasta în timpul funcționării. Pentru a începe urmărirea, trebuie să faceți clic pe butonul de înregistrare din partea stângă a filei și să reîncărcați pagina (F5). Puteți opri înregistrarea în orice moment, totuși, este recomandabil să faceți acest lucru după ce pagina a încărcat complet toate resursele necesare:

Rezultatele obținute pot fi studiate folosind filtrarea evenimentelor pe tipuri de date transmise, după dimensiunea acestora, timpul de încărcare etc. În plus, puteți emula încărcarea unei pagini cu o limită de viteză artificială corespunzătoare anumitor rețele mobile (lista derulantă „Online”). Toate acestea pot fi folosite pentru a identifica cele mai „grele” fișiere și pentru a optimiza încărcarea lor (sau pentru a le elimina cu totul) pentru a economisi trafic și a accelera site-ul dvs.

Fila Performanță

Dacă fila anterioară ne-a permis să urmărim activitatea pur de rețea a paginii, atunci „Performanța”, lucrând pe principii similare (acțiuni de înregistrare), ne permite să evaluăm ce fel de încărcare creează o resursă web pe computerul utilizatorului. Pentru a obține o cantitate suficientă de date pentru analiză, este suficient să înregistrăm funcționarea paginii timp de un minut, după care ne oprim și ne uităm la rezultate:

Graficele au etichete multicolore care vă permit să vedeți care procese ocupă cel mai mult timp și resurse de computer pe parcursul întregii scanări. Și puteți rezuma datele obținute uitându-vă la graficul circular de mai jos, care afișează timpul total de testare, precum și procentul cheltuit pentru rularea scripturilor, randarea elementelor paginii, desenarea imaginilor, încărcarea altor elemente (de exemplu, scripturi terță parte). ) și timpul de nefuncționare. Toate aceste date pot fi folosite și pentru optimizarea paginilor web.

Fila de memorie

Una dintre cele mai inconsistente file din Google DevTools, care dispare și dispare. Poate funcționa în două moduri. În mod implicit, afișează un rezumat al consumului curent de memorie al paginii deschise. Dacă aveți nevoie de un raport detaliat, puteți începe procesul de înregistrare similar cu cel din filele anterioare. Ca urmare, veți primi date despre toate procesele care consumă memoria RAM a computerului:

În mod interesant, consumul de memorie este afișat nu numai de pagina în sine, de scripturile și resursele încărcate, ci și de extensiile Chrome care sunt active în prezent! Acest lucru poate fi util în cazurile în care browserul a devenit foarte lent din cauza „creșterii excesive” cu pluginuri inutile. Cunoscând principalii „mâncători” de resurse, le puteți elimina, redându-vă Chrome la luminozitatea anterioară.

Fila Aplicație

Dacă trebuie să aflați ce stochează o pagină web în sesiuni, cookie-uri sau alte stocări locale, accesați fila „Aplicație”. Aici totul este cât se poate de simplu - în panoul din stânga selectăm stocarea de date care ne interesează, iar în zona principală ne uităm la conținutul acesteia. Și, ceea ce este tipic, aici putem edita imediat acest conținut și chiar îl putem șterge complet (butoanele „Ștergeți tot” și „Ștergeți selectat”):

Fila Securitate

Acum a devenit aproape necesară utilizarea protocolului HTTPS securizat pe site-uri web. Pentru a evalua performanța și potențialele lacune în securitatea paginilor web, puteți utiliza fila „Securitate”. Aici, după reîncărcarea paginii, vom vedea un raport privind resursele sigure și periculoase și, în consecință, vom putea lua măsuri suplimentare pentru a elimina deficiențele identificate:

Fila „Audit”.

În cele din urmă, pentru a culmina, Google Chrome ne poate oferi sfaturi practice pentru a îmbunătăți performanța site-ului. Pentru a face acest lucru, accesați fila „Audituri”, începeți testarea și așteptați să se finalizeze. Pe baza rezultatelor auditului, vor fi generate diagrame și recomandări specifice pentru optimizarea ulterioară a paginii:

concluzii

Google Chrome oferă utilizatorului un set destul de bun de instrumente pentru dezvoltatori. Are aproape tot ce aveți nevoie pentru a inspecta și optimiza paginile web. La dispoziția dumneavoastră sunt instrumente pentru editarea codului HTML, gestionarea stilurilor și chiar controlul complet asupra scripturilor. În plus, în Chrome DevTools veți găsi instrumente pentru testarea performanței site-ului, care vă vor permite să identificați modalități de optimizare ulterioară.

Și toate acestea nu necesită instalarea unor programe sau extensii suplimentare. Deși, unele extensii își pot adăuga propriile instrumente la arsenalul deja bogat al Chrome. Dacă stăpânești cel puțin jumătate din ceea ce oferă DevTools, îți poți crește semnificativ productivitatea și îmbunătăți calitatea paginilor web pe care le creezi!

P.S. Se acordă permisiunea de a copia și cita în mod liber acest articol, cu condiția ca un link activ deschis către sursă să fie indicat și paternitatea lui Ruslan Tertyshny să fie păstrată.

6 mai 2015 / Frontend

Instrumente de dezvoltare de stil în Google Chrome

Recent am aflat că Chrome acceptă teme pentru instrumentele de dezvoltare. Am vrut imediat să încerc asta. Vă spun imediat că nu am fost pe deplin mulțumit de rezultat :-)

Pregătirea

Pentru a instala tema pentru instrumentele de dezvoltare, trebuie să activați funcțiile experimentale. Pentru a face acest lucru, introduceți chrome://flags/#enable-devtools-experiments în bara de adrese Google Chrome. Aproape de punct Activați experimentele Instrumente pentru dezvoltatori clic Permite. Acum reporniți browserul (ar trebui să existe un buton în partea de jos).

Deschideți instrumentele pentru dezvoltatori (cmd + shif + i / F12), accesați setări (pictograma roată), accesați fila Experimenteși bifați caseta de lângă „Permiteți teme personalizate de UI”.
Acum puteți instala în siguranță teme din magazin.

Găsirea și instalarea temelor

Puteți găsi teme în magazinul Google Chrome. Căutați teme de dezvoltare. Dar acest lucru nu este foarte convenabil; aproape toate temele sunt colectate pe site-ul web devthemez.com. Și există și subiecte pentru instrumentele de dezvoltare.

Acum mergeți la magazin, selectați tema de care avem nevoie și instalați-o. Acum, când deschideți Instrumente pentru dezvoltatori, veți vedea tema.

Acum puțin despre neplăcut. Temele arată adesea sărace. Există și o problemă cu a te obișnui. De exemplu, m-am obișnuit cu faptul că, dacă numărul din consolă este albastru, este Number, iar dacă este roșu, este String. Dar fiecare subiect are propriile sale culori și devine mai dificil să le navighezi.

În ultimii ani, browserul Google Chrome a devenit cel mai popular atât în ​​rândul utilizatorilor de internet obișnuiți, cât și în rândul utilizatorilor implicați în dezvoltarea web.

În șase săptămâni, Chrome a suferit mai multe lansări cheie, iar sistemul în sine este actualizat constant cu noi instrumente pentru dezvoltatori, datorită cărora browser-ul a dobândit un sistem de setări foarte flexibil. Mulți oameni s-au familiarizat de mult cu toate funcțiile browserului, de exemplu, cu funcția de editare CSS live, folosind consola, precum și depanatorul. Acest articol are scopul de a demonstra cele unsprezece trucuri principale și sfaturi utile care pot îmbunătăți nivelul de performanță al întregului sistem și pot face lucrul cu browserul cât mai confortabil posibil.

Dacă ați folosit vreodată funcția Sublime Text, atunci probabil că aveți întotdeauna nevoie de opțiunea Mergeți la orice. Dezvoltatorii remarcă faptul că o funcție similară pentru cei care folosesc în mod activ Idea poate avea un nume diferit - „Căutați peste tot”, și o puteți apela prin simpla apăsare a tastei „Shift” de două ori.

Vestea bună este că o funcție de acest fel se află în setul de instrumente pentru dezvoltatori. Pentru a-l activa, trebuie să țineți apăsată combinația a două taste Ctrl și P (dacă utilizați un Apple Mac, va trebui să țineți apăsate Cmd și P) în timp ce PR este prezentat atenției dvs. pentru a căuta și deschide rapid orice fișier din proiectul pe care îl utilizați.

Efectuarea unei căutări în codul de tip sursă

Totuși, ce se întâmplă dacă căutarea trebuie făcută în codul de tip sursă? Pentru a căuta în fiecare fișier care a fost descărcat chiar pe pagina browserului, va trebui să țineți apăsate trei taste: Ctrl, Shift și F - pentru sistemul de operare Windows; Cmd, Opt și F. Această tehnică de căutare este capabilă să accepte căutări cu expresii regulate.

După deschiderea fișierului de care aveți nevoie într-o filă specială „Surse”, setul complet de instrumente pentru dezvoltatori va permite utilizatorului să navigheze la o linie de absolut orice tip pentru un anumit fișier. Pentru ca această procedură să fie implementată, va trebui să țineți apăsate tastele Ctrl și G – pentru software Windows; Cmd și L dacă utilizați un Apple Mac. După aceea, introduceți numărul pe care îl are linia.

De asemenea, puteți utiliza o metodă suplimentară apăsând combinația a două taste Ctrl și O, cu toate acestea, nu va trebui să introduceți text pentru a căuta, ci să introduceți două puncte și apoi numărul pe care îl are linia. De asemenea, utilizatorul poate duce procedura mult mai departe. Trebuie să introduceți numele fișierului, precum și numărul, folosind două puncte ca semn de împărțire între valori individuale. În acest caz, numele fișierului poate fi introdus cu o abreviere.

Preluarea elementelor DOM atunci când utilizați consola

Consola, care este responsabilă pentru instrumentele de dezvoltare, poate suporta cu ușurință unele funcții utile, precum și variabile pentru a prelua DOM-ul:

  • este echivalent cu document.querySelector(). Poate returna primul element care se potrivește exact cu datele selectorului CSS. Să presupunem că $(DIV) - poate implementa returnarea primului element DIV direct în zona paginii principale.
  • $$() este valoarea echivalentă cu document.querySelectorAll(). Opțiunea este capabilă să returneze întreaga listă cu elemente (aceasta listă se numește NodeList). Aproape fiecare element este în deplină conformitate cu selectorul CSS.
  • $0-$4 - Aceste valori salvează istoricul acelor elemente DOM care au aparținut ultimelor cinci. Le-ați selectat în fila specială „Elemente”, iar aici valoarea $0 apare ca cea mai recentă.

Cum să utilizați mai multe marcaje și selecții

În timp ce editați fișierul, aveți posibilitatea de a instala cărucioare. Acest lucru se poate face ținând apăsată tasta Ctrl și apoi făcând clic pe zona de care aveți nevoie. Cărucioarele pot fi instalate simultan în mai multe locuri.

Când acest parametru este activat în fila consolă, fiecare rezultat individual va fi salvat. Datele nu vor fi șterse data viitoare când pagina este lansată în browser. Un astfel de sistem aduce multă comoditate în lucrul cu sistemul, mai ales atunci când trebuie să verificați istoricul complet al erorilor care au apărut înainte de a părăsi pagina.

Îmbunătățirea surselor care au fost minimizate

Chrome Developer Tools are un „prettener” integrat pentru acele coduri sursă care au fost minimizate pentru a le face mai ușor de citit. Butonul în sine este situat în partea stângă jos a fișierului care este deschis în prezent (fila specială „Surse”).

Cum se utilizează modul dispozitiv

Setul de instrumente pentru dezvoltatori are capacitatea de a utiliza un mod puternic, care este conceput pentru a lucra la crearea de pagini care sunt optimizate pentru smartphone-uri și tablete. Dacă introduceți informații cu privire la această problemă într-un motor de căutare Google, puteți găsi cu ușurință un videoclip în care dezvoltatorii demonstrează cea mai mare parte a funcționalității auxiliare, de exemplu, mărirea formatului ecranului, implementarea emulării tactile a ecranului tactil și capacitatea de a emula un nivel scăzut. -conexiune la internet de calitate.

Cum sunt emulați senzorii dispozitivului?

Sistemul se mândrește cu o caracteristică atât de importantă a modului instrument ca imitarea senzorilor speciali ai dispozitivelor portabile (accelerometrele și ecranele tactile sunt exemple). De asemenea, puteți specifica coordonatele geografice. De obicei, obiectul în sine este situat în fila „Elemente” în partea de jos, unde se află fila „Emulare”, apoi „Senzori”.

Atunci când alegeți o culoare în timp ce lucrați cu editorul de stil, aveți posibilitatea să faceți clic pe eșantionul de culoare, iar după aceea va apărea o fereastră în care utilizatorul poate selecta nuanța de culoare de care are nevoie. În timp ce fereastra rămâne în modul activ, indicatorul mouse-ului devine o lupă pentru a facilita selectarea unei culori. Întreaga procedură este efectuată clar și rapid.

Modul de stare a elementului de forță

Setul de instrumente de dezvoltare oferă capacitatea de a induce stări CSS ale elementului DOM. De exemplu, ar putea fi folosite :hover și :focus. În același timp, scrierea stilurilor lor este simplificată. Acest tip de caracteristică poate fi disponibil în modul accesibil unde se află editorul CSS.

Google Chrome include un set imens de funcționalități pentru testarea site-urilor web de către un dezvoltator web. Panoul pentru dezvoltatori se deschide apăsând F12:

Elemente

În fața noastră este arborele nostru HTML al site-ului, împărțit în secțiuni. Aspectul conținutului intern poate diferi, în acest caz l-am împărțit în 2 coloane, unde în stânga este arborele HTML, iar în dreapta sunt proprietățile CSS ale elementului selectat (etichetă sau etichetă, se aplică ambele opțiuni). Schimbarea arborelui HTML este destul de simplă, selectați eticheta de care aveți nevoie și apăsați F2, apoi schimbați codul HTML al blocului, unde puteți nu numai să-i modificați conținutul, ci și să adăugați alte atribute acestei etichete, precum și să adăugați o altă etichetă. înainte sau după această etichetă. Când treceți mouse-ul peste această etichetă, zona acestei etichete va fi evidențiată pe ecran, unde umplutura și marginea sunt marcate cu portocaliu și verde. De asemenea, vreau să remarc o caracteristică importantă: dacă dezvoltatorul face o greșeală și nu aplică clear:both after float:left, ceea ce perturbă aspectul, atunci zona etichetei specificate nu va fi vizibilă sau va fi afișată cu o eroare. Apropo, cea mai frecventă greșeală!

Găsirea etichetei potrivite în copac nu este dificilă, există 2 moduri. Metoda unu - în fața Elements în meniu există 2 pictograme, a doua dintre care este să transferați site-ul în versiunea mobilă (nici măcar nu trebuie să cumpărați un telefon, totul este deja vizibil pentru proiectantul de layout), iar primul este să selectezi un element de pe pagină. Este suficient să faceți clic pe primul buton, să selectați blocul dorit și să faceți clic stânga pe el, astfel vom deschide această etichetă specială pentru ajustare. A doua metodă, care este mai rapidă, este să faceți imediat clic dreapta pe secțiunea dorită a site-ului și să selectați „Vizualizare cod”.

După ce am selectat eticheta dorită, o putem ajusta cu ușurință la forma de care avem nevoie. Aș dori să remarc că așa ajustez întotdeauna aspectul, pur și simplu iau etichetele necesare și le schimb proprietățile în browser, iar când mă stabilesc pe ultima opțiune care îmi place, copiez rezultatul în html și css. Acum să vorbim despre coloana din dreapta - stiluri și calculate. calculat - versiunea finală a tuturor stilurilor aplicate etichetei. Amintiți-vă, am spus că browserul are în mod implicit o listă de proprietăți pentru etichetă și le schimbăm doar cu cele de care avem nevoie, așa că iată chiar această listă a versiunii finale, adică împreună cu proprietățile pe care le-am schimbat. Dacă te uiți cu atenție, poți înlocui caracteristica interesantă că aproape toate etichetele au aceleași proprietăți cu valori diferite, iar acest lucru sugerează că aproape întregul site poate fi aranjat folosind doar 1 sau 2 etichete, ceea ce pare absurd, dar posibil :) În prima coloană, Stiluri, sunt indicate stilurile pe care le-am schimbat (foile noastre de stil). În această filă, putem modifica influența stilurilor atât pe această etichetă lucrând în blocul element.style, cât și a schimba id-ul și clasa pentru toate elementele de pe site.

Deci, o sarcină practică, creați 3 coloane folosind float:left cu conținutul unei imagini + text cu o clasă. În continuare, prin panoul de dezvoltator, adăugați cadre, reglați distanța dintre blocuri și text folosind margini interne și externe (schimbând proprietățile clasei), schimbați culoarea textului din fiecare bloc la propria culoare (aici element.style). Acest lucru va fi suficient, deși puteți experimenta singuri schimbând codul altor site-uri în acest fel. Dar amintiți-vă cel mai important lucru, nu schimbați fișierele html și css reale, ci doar cele temporare pentru această pagină anume și, de îndată ce reîmprospătați pagina, toate setările dvs. se vor pierde!

Consolă

Fără el, viața nu este dulce pentru niciun programator :) Absolut toate AVERTISMENTUL și EROAREA sunt înregistrate în acest bloc. Asigurați-vă că toate erorile sunt afișate verificând după cum urmează: faceți clic pe pictograma de filtru din această secțiune și selectați fila „toate”, adică afișați toate erorile. Valoarea implicită este întotdeauna „toate”, dar cunoscându-vă pe voi, elevii mei... :)
Jurnalele sunt salvate în această pagină din momentul deschiderii consolei și nu de la încărcarea paginii. Prin urmare, dacă încărcați pagina și apoi deschideți consola, nu veți vedea erori, deși există erori pe pagină! Prin urmare, deschidem mai întâi consola și apoi reîncărcăm această pagină! Acum, în dreapta erorii, va fi indicat fișierul pe care a apărut eroarea și chiar linia în sine. Aș dori să remarc faptul că consola primește și erori de la diverse plugin-uri și extensii instalate pentru Google Chrome, inclusiv viruși (sunt înregistrate și ca plugin sau extensie), precum și atunci când rulează Ajax și alte scripturi externe, linia 1 sau 0 poate fi indicat în fișierul executabil, și nu linia de unde a fost executat acest AJAX. Acest lucru merită luat în considerare!

Când lucrăm cu JavaScript, putem întâlni faptul că atunci când facem clic, apare o redirecționare către o altă pagină în formatul: click - eroare - redirecționare, iar eroarea a apărut înainte de linia care trebuia să blocheze redirecționarea și prin urmare consola este goală. . Soluția este extrem de simplă, bifați caseta Păstrare jurnal, iar apoi jurnalele nu vor fi șterse după reîncărcarea sau redirecționarea paginii. Dacă uiți de această funcție, vei petrece jumătate de an căutând o greșeală :)

Nu voi scrie despre faptul că notele noastre intră în consolă din console.log, știți deja asta din cursul general :)

Surse și rețea

O modalitate excelentă de a monitoriza toate solicitările primite și ieșite și rezultatele executării acestora. În fila Surse putem vedea toate fișierele suplimentare încărcate, și anume imagini și scripturi. Cel mai simplu mod este să obțineți imaginea de care aveți nevoie, să vă uitați la dimensiunea acesteia și să o salvați pe computer. De asemenea, puteți deschide fișiere JavaScript acolo. Făcând clic dreapta pe fișierul dorit, puteți selecta „Open link in new tab” și puteți salva fișierul din noua pagină apăsând combinația ctrl+s. De acord, e convenabil :)

Rețeaua are o funcționalitate mai complexă, există o listă cu toate solicitările și răspunsurile acestora cu serverul. Vă rugăm să rețineți că există și Filtru - Toate, precum și Păstrare jurnal, acest lucru este foarte important!

Aspectul dvs. al acestei secțiuni poate fi ușor diferit; prezentarea generală (pictograma corespunzătoare cu grafice) poate fi activată, pe care de obicei o dezactivez. În coloana din stânga avem cereri, în dreapta avem răspunsuri. În același timp, răspunsurile sunt împărțite și în subsecțiuni. Prima solicitare merge întotdeauna la fișierul de execuție (url-ul este indicat), dacă închideți coloana din dreapta, puteți vedea detaliile solicitării, și anume: metoda de solicitare, cât timp a durat să se execute (care va indica cât de bine) rețeaua și site-ul funcționează, dimensiunea fișierului.Prin închiderea din dreapta Coloana poate fi redeschisă făcând clic din nou pe fișierul care ne interesează pentru analiză.

În fila antet avem tipul cererii noastre (fișier, metodă, ip și starea răspunsului), antetul răspunsului și antetul cererii. Antetul de solicitare este ceea ce browserul dvs. trimite serverului, nu numai că solicită o pagină, ci trimite și cookie-uri existente, limba preferată a paginii, dacă compresia gzip permite fișiere, numele complet și versiunea browserului și pagina din unde trimite cererea . Aș dori să remarc că atunci când studiați CURL în PHP în viitor, puteți trimite și toate aceste date! Secțiunea Răspuns conține antetele răspunsului. Amintiți-vă de teoria modului în care funcționează PHP, datele trimise sunt împărțite în 2 blocuri, mai întâi sunt trimise anteturile, apoi conținutul, când conținutul este trimis, apoi anteturile nu pot fi trimise. În anteturi, serverul trimite cookie-uri, dacă acestea trebuie modificate, codificarea paginii, versiunea serverului (care este o vulnerabilitate și trebuie ascunsă, așa cum se face pe site-ul, ya.ru, google.ru etc. .), data fișierului (în scopul de a nu-l descărca din nou dacă nu au avut loc modificări de la ultima utilizare a browserului).

Vreau să mă opresc mai detaliat asupra datei de actualizare a fișierului; se întâmplă că, deși fișierul a fost modificat, browserul încă nu își verifică versiunea, pur și simplu încarcă versiunea veche salvată în cache. Pentru a șterge memoria cache a browserului clientului, trebuie doar să schimbați numele fișierului din scripts.js?v=1 în scripts.js?v=2. După cum puteți vedea, am schimbat doar datele trimise de GET și aproape toată lumea va avea un nou script încărcat (nu 100%, dar destul de acceptabil pentru majoritatea site-urilor). Dar după editarea unei virgule în script în timpul dezvoltării, nu este atât de convenabil să rulați și să schimbați html-ul cu conexiunea aceluiași fișier js, aici o altă casetă de selectare importantă „Dezactivați cache” vine în ajutorul dezvoltatorului; dacă este activat, atunci toate fișierele nu vor fi stocate în cache și altele noi vor fi încărcate de fiecare dată! Dezvoltăm un site cu această casetă de selectare, iar când descarcăm o nouă versiune a scripturilor pentru toți utilizatorii, schimbăm doar versiunea?v=3.

Previzualizare și răspuns

După solicitare, serverul ne returnează ceva, o vizualizare prietenoasă pentru oameni va merge la Previzualizare, iar sursa neformatată va merge la Răspuns. Folosind exemplul unei solicitări de imagine, fotografia în sine va apărea în fila Previzualizare, iar codul sursă al imaginii va fi ascuns din motive morale, dar dacă ați solicitat fișiere HTML, JS, PHP, atunci ar trebui să vă uitați cu siguranță la Fila Răspuns pentru a ne asigura că există conținutul pe care l-am solicitat și pe care ne așteptăm să-l vedem a revenit! Când lucrăm cu Ajax în Preview, vom primi o vizualizare convenabilă a răspunsului JSON similar cu arborele HTML din secțiunea Elemente, ceea ce va simplifica și dezvoltarea site-ului nostru.

Ajax și panoul pentru dezvoltatori

Când dezvoltăm codul cu Ajax, facem următoarele:
1) Scriem codul, atașăm un eveniment butonului.
2) Deschideți panoul pentru dezvoltatori și reîmprospătați pagina.
3) Verificăm că nu există erori, setăm Preserve log, deoarece în cazul redirecționării trebuie să interceptăm eroarea.
4) Faceți clic pe butonul care apelează cererea Ajax. Acum, dacă nu a existat nicio redirecționare, mai întâi priviți cu atenție fila Consolă și asigurați-vă că a apărut o eroare. Eroarea poate fi de orice fel, nu doar un răspuns incorect din partea serverului, ci și o greșeală de tipar în codul în sine. Dacă nu există nicio eroare în consolă sau nu este clară, cum ar fi, de exemplu, linia 0 sau 1, atunci continuăm să analizăm fila Rețea.
5) În fila Rețea, ne asigurăm că solicitarea a fost trimisă la adresa URL corectă, starea răspunsului este 200, nu 404, analizăm solicitarea în sine, adică deschidem fila Răspuns și privim cu atenție pentru a vedea dacă fișierul ne-a trimis este răspunsul corect, exact cel pe care îl așteptăm, sau răspunsul conține gunoi sub formă de cod inutil, erori etc. Dacă înțelegeți ce răspuns așteptați de la server, atunci puteți compara cu ușurință ceea ce vă așteptați cu realitatea, vedeți eroarea și corectați-o!

P.S. Le doresc tuturor oaspeților mei o programare de succes și cer studenților mei o înțelegere perfectă a ceea ce am scris aici. Și dacă te-am întrebat vreodată dacă a fost trimisă o solicitare AJAX către server și ce răspuns a primit, atunci trebuie să-mi dai răspunsul corect și să nu clipești ca o „blondă”. :)
Acest articol va fi dezvoltat în continuare în viitor, poate!