Share
În acest tutorial mă uit la instrumentele dezvoltatorului Chrome, în special cum pot ajuta la accelerarea fluxului de lucru HTML / CSS. Voi arăta, de asemenea, pe scurt, câteva alte instrumente dev care sunt disponibile.
Chrome a devenit rapid o alegere populară între designerii web și utilizatori pentru viteza, ușurința de utilizare și suport pentru adoptarea unor caracteristici experimentale timpurii, cum ar fi proprietățile moderne CSS3. La conferința Google I / O din 2012 a fost anunțat că Chrome are acum peste 310 de milioane de utilizatori activi - aproape dublul celor 160 de milioane de utilizatori pe care le-a lăsat anul trecut.
Google Chrome a fost lansat pentru prima data pe 2 septembrie 2008. A fost introdus ca un BETA pentru Microsoft Windows XP si versiuni ulterioare, pana in 2009 Google a lansat versiuni Beta atat pentru OS X, cat si pentru Linux. Google Chrome 5.0 a fost anunțat pe 25 mai 2010. Acest lucru a marcat primul stabil lansat pentru a sprijini toate cele trei platforme.
Unul dintre motivele pentru popularitatea sa în rândul designerilor web și al dezvoltatorilor este instrumentele de dezvoltare care se îmbină cu browserul. Aceste instrumente de dezvoltatori ne permit să testați și să depanem codul ușor și eficient. Fără aceste instrumente, fluxul dvs. de lucru ar putea fi mult mai dificil.
Google descrie instrumentele dezvoltatorului Chrome ca
Instrumentele pentru dezvoltatori, incluse și disponibile în Chrome, permit dezvoltatorilor web și programatorilor accesul profund în interiorul browserului și al aplicației web. Instrumentele pentru dezvoltatori se bazează în mare măsură pe WebKit Web Inspector, o parte a proiectului open source WebKit.
Sub capota, Chrome Developer Tools este o aplicație web care este scrisă în HTML, JavaScript și CSS. Aplicația este declanșată la timpul de execuție Javascript. Odată declanșat, ne permite să interacționăm cu paginile web și să jucăm cu ei.
În acest articol, mă voi uita în mod specific la modul în care aceste instrumente vă pot ajuta să accelerați fluxul de lucru HTML și CSS. Mă voi îndrepta către designeri care nu au experimentat în mod necesar instrumentele de lucru ale Chrome, dar sunt sigur că, chiar dacă le cunoașteți, veți învăța ceva și pe parcurs.
În primul rând, va trebui să deschideți Chrome și să navigați la o pagină aleasă de dvs. Instrumentele dev pot fi accesate în una din cele trei moduri. Puteți să dați clic dreapta pe o pagină web și să selectați "Inspectați elementul", puteți selecta cheia cu cheia de chei în colțul din dreapta sus al Chrome și selectați "Instrumente> Instrumente pentru dezvoltatori". Cea de-a treia și ultima modalitate este de a folosi o serie de comenzi rapide pe care Chrome le-a pus la dispoziție:
În Windows și Linux, apăsați
Pe Mac, apăsați
Dacă sunteți un designer de web, veți găsi destul de mult timp în secțiunea "Elemente" a aplicației. Această aplicație vă permite să vedeți totul în modelul de obiect document (DOM pe scurt).
Afișează DOM-ul ca un copac, astfel încât să puteți găsi cu ușurință drumul în jurul documentului html. Lucrul minunat al instrumentului de inspector este că, pe măsură ce treceți peste un element DOM din arbore, acesta va evidenția eticheta relevantă din pagina web pe care o vizualizați. Prin selectarea micului lupă din colțul din stânga jos al inspectorului, puteți selecta cu ușurință un nod de domiciliu direct pe pagina web pe care o vizualizați și va fi evidențiată. Acest lucru poate fi un economizor de timp excelent pentru dacă doriți să verificați rapid numele sau tipul atributului pe care îl are un element pe pagina dvs..
Puteți edita codul HTML al nodurilor dom, făcând dublu clic pe ele. Din aceasta puteți modifica atribute, cum ar fi valori, ID-uri și clase sau chiar tipul de etichete HTML.
Când faceți clic dreapta pe un nod, acesta va afișa un meniu contextual, care vă permite să copiați html pentru el sau să îl ștergeți complet. De asemenea, puteți copia XPath-ul nodului. XPath este un limbaj de interogare pentru selectarea nodurilor dintr-un document. Acest lucru poate fi util când utilizați lucruri precum Yahoo Query Language (YQL).
Un lucru pe care îl puteți face este să trageți elemente HTML în jurul paginii. Pentru aceasta, selectați un nod și trageți-l altundeva în arbore. Acest lucru va fi apoi reflectat pe pagina web pe care o inspectați.
În partea de jos a elementelor inspectorul trăiește un bar care vă permite să navigați de-a lungul elementelor părinților. Acest lucru lasă urme ale strămoșilor elementelor selectate, permițându-vă să vizualizați și să găsiți rapid și ușor elemente părinte.
O altă caracteristică utilă a panoului de elemente este atunci când lucrați cu imagini. Pur și simplu plasați cursorul peste eticheta imaginii și veți fi întâmpinat de un mic popup afișând imaginea, dimensiunile imaginii redate și dimensiunea originală a imaginii. Dimensiunea redată poate fi, uneori, mai mare decât dimensiunea originală a imaginii care poate fi cauzată atunci când se adaugă elemente cum ar fi marginile sau umplutura.
Este important să rețineți că dimensiunea rendered se referă la dimensiunea elementului redat și nu neapărat dimensiunea imaginii reale.
Instrumentele de dezvoltare ale dezvoltatorilor Chrome sunt extrem de utile atunci când vine vorba de depanarea CSS-ului. Uneori, stilurile CSS se pot prăbuși și pot apărea efecte vizuale nedorite. Prin posibilitatea de a inspecta ce reguli de stil sunt aplicate elementului de către browser, suntem capabili să găsim rădăcina problemei și să remediem eroarea.
Secțiunea "Stil computerizat" vă permite să vedeți ce stiluri aplică motorul de redare a browserului elementului. Acesta este setul final de stiluri care se aplică paginii web. Făcând clic pe săgeata mică din stânga unui anumit stil computerizat, puteți vedea de unde decolează acest stil. Deci, dacă nu înțelegeți motivul pentru care div este persistent stil cu un fundal negru, sau de ce acest text doar nu va merge îndrăzneț. Aruncați o privire în secțiunea de stil computerizată și vă va permite să vedeți ce vede browserul.
Secțiunea "Stiluri" și "Regulile CSS potrivite" funcționează într-un mod similar unul altuia. Ambele vă permit să adăugați, să eliminați și să modificați regulile CSS la un element. Panoul "element.style" vă permite să adăugați proprietăți elementului respectiv indiferent de codul sau clasa pe care acesta îl are - gândiți-vă la acestea ca la stiluri inline. Acest lucru diferă de secțiunea "Reguli CSS potrivite", deoarece regulile pe care le modificați în această secțiune se vor reflecta asupra oricărui alt element cu acel ID sau clasă particular.
Este posibil să observați uneori că o regulă are un stil desființat. Aceasta este, de obicei, deoarece este suprascris de o altă regulă dintr-o altă proprietate. Pentru a ajunge la partea de jos a motivului pentru care este suprascris, puteți utiliza secțiunea "Stil computerizat", așa cum sa menționat mai sus.
Mai mulți designeri cu care am vorbit recent se îndepărtează de abordarea proiectării unui anumit site într-un pachet de editare, cum ar fi Photoshop și Fireworks, și se îndreaptă spre o abordare "design în browser". Această nouă abordare vă permite să vedeți munca dvs. pe măsură ce browserul o vede.
Instrumentele de editare, cum ar fi Photoshop, au motoare diferite de redare la cele ale browserelor, ceea ce înseamnă că fonturile și culorile apar diferite. De asemenea, pune designul in situ și vă permite să vedeți cum apare în browser. Să nu mai vorbim de avantajele pe care le are atunci când vine vorba de proiectarea în mod sensibil și pentru vasta gamă de tipuri de dispozitive pe care trebuie să le rezolvăm acum. Desigur, software-ul ca Photoshop joacă încă un rol important în fluxul meu de lucru, deși găsesc că îl folosesc pentru a crea seturi de stil în zilele noastre, spre deosebire de layout-urile reale.
O caracteristică utilă pentru această nouă abordare este modul în care puteți selecta culorile. Dând clic pe pictograma roată din colțul din dreapta sus al panoului "Styles", puteți să comutați între diferite moduri de culoare. Sunt:
Dacă, de exemplu, utilizați negru și apoi vizualizați pagina web live și observați că este puțin prea întunecată pentru estetica pe care o vizați, atunci puteți să faceți clic pur și simplu pe caseta de culoare de lângă valoarea proprietății și aceasta va aduce up un picker de culoare, care apoi vă permite să bate în jos luminozitatea negru un pic. Acest lucru vine într-adevăr util pentru proiectarea pe zbor.
Prin reglarea marjelor, a padurilor și a poziționării, putem vedea în timp real câtă lățime trebuie să dăm acelei div pentru a o face corect. Acest lucru salvează cu siguranță o mulțime de timp peste care trebuie să meargă între browser și editorul de cod, atunci trebuie să salvați documentul și să reîmprospătați.
În colțul din dreapta sus al "stilurilor" de lângă pictograma unelte se află o mică pictogramă de marcă. Făcând clic pe acest lucru suntem capabili să comutați între diferitele stări ale unui element. Aceste stări diferite sunt
Prin activarea unuia dintre acestea, starea aleasă va rămâne și veți putea să-i editați proprietățile.
Una dintre caracteristicile mele favorite ale inspectorului stilurilor de instrumente dev este abilitatea de a fi capabil să găsească rapid locația în stilul tău proprietatea pe care o editezi. Dacă priviți în partea dreaptă a proprietății pe care o editați, veți vedea numele foii de stil și numărul liniei cu privire la locul în care se află. Făcând clic pe linkul pe care îl conduci la "vizualizarea surselor". Acest lucru afișează, în principiu, foaia dvs. de stil în întregime. De aici puteți lucra la fel ca și în editorul de cod. Singura diferență este că vă vedeți rezultatele în timp real.
De asemenea, puteți să salvați foaia de stil prin alunecarea panoului lateral. Dacă dați clic dreapta pe numele acestuia, se deschide un nou meniu contextual unde puteți alege să deschideți foaia de stil în browser și să o salvați. Lucrul cel mai bun în acest sens este faptul că făcând clic pe "Modificări locale" puteți vedea un istoric complet al revizuirilor tuturor modificărilor pe care le-ați făcut. Deci, dacă ați greșit și doriți să reveniți la unele modificări pe care le-ați făcut acum zece minute, atunci Chrome vă oferă spatele.
Înapoi în bara laterală Elements avem panoul de valori. Cu acest panou puteți vizualiza și modifica parametrii modelului de cutie al elementului curent. Aceasta oferă o reprezentare vizuală a acestor parametri care include:
Instrumentele Chrome pentru dezvoltatori se numără printre cele mai utile instrumente pentru accelerarea fluxului de lucru HTML / CSS.
Desigur, există multe alte utilizări pentru ele, cum ar fi analizarea timpilor de încărcare a paginilor și a performanțelor scripturilor. Există, de asemenea, alte instrumente care fac același tip de locuri de muncă, cum ar fi Firebug pentru Firefox. Cea mai recentă versiune de Firefox vine de asemenea cu câteva instrumente utile care nu au fost încă implementate în echivalentul Chrome, deși sperăm că vor fi într-o zi în curând. Acestea includ lucruri precum "3D". Vizualizarea 3D vă permite să vedeți o reprezentare 3D a unui site web pe care îl puteți roti și orienta. Acest lucru facilitează vizualizarea cuiburilor conținutului dvs. Ei au introdus, de asemenea, "mod receptiv" care pune site-ul web intr-un cadru pe care il puteti redimensiona pentru a vedea cum va aparea la dimensiuni diferite.
Nu spun neapărat că instrumentele de dezvoltare ale Chrome sunt cele mai bune acolo. Pentru mine, singurul pe care l-am folosit vreodată și știu cât timp mi-a salvat și fluxul de lucru. De aceea am vrut să vă împărtășesc câteva sfaturi pe care le-am descoperit și sper să vă salveze puțin timp!
Accentsconagua