Share
Este necesar ca dezvoltatorii web să înțeleagă și să știe cum să utilizeze instrumentele pentru dezvoltatorii de browser, iar în acest tutorial vă voi prezenta Instrumentele de dezvoltare Chrome. Veți învăța câteva dintre elementele de bază, începând cu marcarea și modelarea unei pagini web.
O notă rapidă pentru utilizatorii existenți ai instrumentului pentru dezvoltatori: Scopul acestui tutorial este de a oferi o introducere relativ de bază în instrumentele de dezvoltare ale Chrome. Dacă folosiți un instrument de dezvoltare al browserului, cum ar fi Firebug în Firefox sau instrumentele de dezvoltare ale lui IE, atunci puteți afla că deja cunoașteți multe informații acoperite de acest tutorial.
Instrumentele de dezvoltare ale browserului vă permit să accesați o pagină web și să inspectați exact totul din pagină. De exemplu, puteți:
Înainte de a sapa în instrumentele de dezvoltare ale dezvoltatorului Chrome, vreau să vă dau doar o scurtă privire asupra instrumentelor de dezvoltare oferite de browserele majore. Rețineți că acest lucru nu este o privire cuprinzătoare asupra acestor instrumente și a caracteristicilor acestora, dar vă ofer informații de bază pentru fiecare instrument.
Puteți utiliza instrumentele pentru dezvoltatori din Chrome, Chrome Canary și chiar Chromium.
Safari utilizează codul din depozitul Web Inspector; cu toate acestea, puteți afla că nu este actualizat la fel de des ca Chrome.
Firebug
Firefox vine acum cu un set propriu de instrumente de dezvoltare, care are un accent frumos pe partea vizuală a lucrurilor. Pentru cei care sunt obișnuiți cu Firebug, aceasta este încă disponibilă ca add-on.
Notă: acest tutorial utilizează construirea canarului Chrome. Prin urmare, unele caracteristici acoperite în acest articol pot sau nu să fie disponibile în versiunile beta sau stabile.
Înainte de a examina conținutul element panou, să luăm ceva timp pentru a înțelege comenzile mici din partea de sus și de jos. Consultați lista numerotată de sub imaginea următoare care explică diferitele elemente ale UI din fereastra de instrumente.
Este bine să alegeți un aspect cu care vă simțiți confortabil. Faceți clic o dată pe colțul din stânga jos și observați modul în care panoul de instrumente pentru dezvoltatori se detașează de fereastra principală - este perfect pentru setările cu mai multe monitori. Dând clic și ținând apăsată pe pictograma din stânga jos vă permite să andocați în dreapta, după cum urmează:
element panoul afișează marcajul paginii așa cum este redat în browser. Orice modificare făcută DOM prin JavaScript se reflectă în elementele găsite în acest panou.
Să ne familiarizăm cu acest panou. Ca și mai înainte, consultați elementele de listă de sub imaginea de mai jos, care identifică diferitele părți ale element panou.
Puterea dată nouă de către instrumentele dev nu este nimic mai mic decât uimitor.
Accentsconagua
Secțiunea pentru fonturi afișează numai fonturile pe care browserul a trebuit să le descarce.
Modificarea DOM în cadrul element este un proces destul de simplu. Pentru a șterge un nod, pur și simplu faceți clic dreapta pe el și selectați Ștergeți nodul. Așa cum v-ați putea aștepta, ștergerea unui nod părinte îi șterge și copiii. Sfat util: De asemenea, puteți apăsa tasta de ștergere de pe tastatură pentru a șterge nodul selectat.
Schimbarea tipului unui element este posibilă prin dublu clic pe numele elementului însuși. De exemplu: p porțiune pe o etichetă paragraf. În mod firesc, schimbarea unui element de la un tip la altul determină schimbarea etichetelor de deschidere și de închidere.
Vizionarea resurselor paginii este esențială pentru depanare.
Adăugarea de atribute poate fi realizat prin clic dreapta pe element și selectând Adăugați un atribut. Cursorul se poziționează imediat în locul în care vă așteptați și puteți începe să tastați atributele pe care doriți să le adăugați elementului. De exemplu: class = "title". Apăsând tasta Tab de pe tastatură poziționați cursorul pe următoarea poziție de atribut.
Editarea atributelor este similar cu adăugarea acestora. Găsiți atributul pe care doriți să îl editați și faceți dublu clic pe numele atributului sau pe valoarea acestuia. Primul evidențiază numele atributului, iar acesta din urmă evidențiază valoarea.
Editarea HTML rapidă este activat prin clic dreapta pe un element și selectând Editați ca HTML.
Instrumentele pentru dezvoltatori oferă câteva tehnici utile pentru localizarea elementelor în document. Plasarea cursorului peste elementele din element fereastra face ca elementele de randare corespunzătoare să fie evidențiate în pagină. Aceasta este o modalitate excelentă de a afla ce element din seturile de instrumente pentru dezvoltatori corespunde cu elementul din pagină.
Firește, nu vedem elemente evidențiate în afara ferestrei de vizualizare a browserului atunci când se deplasează peste elementele corespunzătoare din element panoul. Din fericire, vedem o sugestie care indică direcția elementului outport. Cireasa de pe tort, cu toate acestea, este Derulați în vedere caracteristică găsită în meniul contextual al unui element. Ea face exact ceea ce spune: scanează elementul în vedere.
Instrumentele pentru dezvoltatori au, de asemenea, o caracteristică de căutare. În timp ce panoul de instrumente dev are focalizare, apăsați Control + f pentru a deschide caseta de căutare. Aceasta este o casetă simplu de căutare text; astfel, tastând "corp" va găsi prima instanță a textului "corp" în document.
Înainte de a ajunge la panourile de stil (partea dreaptă) a element , putem accesa unele informații despre stil direct dintr-un element dacă are toate cele trei margini, paduri și borduri specificate în foaia de stil. Plasarea cursorului peste unul dintre aceste elemente ne oferă o privire asupra modelului său de cutie, după cum urmează:
Când vă întrebați de ce unele elemente plutitoare nu se comportă așa cum era de așteptat, vizualizarea informațiilor privind marginea / umplutura poate ajuta la diagnosticarea problemei. De exemplu, este posibil să constatați că un element este mai amplu decât cel pe care l-ați așteptat din cauza umpluturii suplimentare.
În timp ce pe margini / paddings / frontiere, să trecem la zona de stiluri din element și verificați panoul "Metrics".
Acest lucru vă permite să efectuați o analiză detaliată și să identificați posibilele probleme în ceea ce privește motivul pentru care un element se transformă în felul în care face acest lucru. Este, de asemenea, un instrument de învățare excelent; dacă nu ți-ai făcut capul în jurul Modelului CSS Box, atunci Valori diagrama este un mare ajutor vizual.
Valori Fereastra vă permite să vizualizați dimensiunile elementului, umplutura, margini și margini. Observați cum puteți evidenția fiecare porțiune individuală pentru a obține o reprezentare vizuală a modului în care se redă în browser. Valori diagrama oferă, de asemenea, măsurători bazate pe pixeli pentru fiecare porțiune a elementului, de ex. o regulă de stil padding: 10px 5px (10px în partea de sus și de jos, 5px dreapta și stânga) vor afișa măsurătorile exacte pentru fiecare parte a elementului.
Vizualizarea informațiilor despre stil este distractivă, dar tinkeringul imediat cu stilul oricărei pagini se situează mult mai sus pe "meter-ul distractiv". Fie că este vorba de a ne educa, de a experimenta cu un design, sau chiar de a comunica idei cu colegii noștri, puterea dată nouă de către instrumentele dev nu este nimic mai mic decât uimitor.
Asigurați-vă că stiluri panoul este extins și faceți clic dreapta în partea dreaptă a brațului de deschidere. Veți observa că un cursor se poziționează automat astfel încât să puteți scrie o proprietate de stil. Tastați un nume de proprietate, apăsați fila pentru a muta cursorul pe porțiunea de valoare și tastați valoarea. Voi adăuga următoarea CSS:
margine: verde 1px verde
element panoul afișează marcajul paginii așa cum este redat în browser.
Când începeți să introduceți numele proprietății, Chrome oferă sugestii, oferindu-vă avantajul realizării automate. Minunat! Apăsând pe fila selectează cea mai apropiată potrivire cu cea pe care ați introdus-o și mișcă cursorul în poziția valorii. Cu toate acestea, apăsând butonul tasta săgeată dreapta determină ca cursorul să rămână în porțiunea de proprietate, dar umple cea mai apropiată potrivire cu ceea ce ați introdus.
Completarea automată funcționează și cu valorile proprietății. De exemplu, tastând "pos" * tab * * "fi" * tab * creează o proprietate de stil de pozitie: fixa. Atunci când introduceți valori bazate pe pixeli / procente, cum ar fi 15% sau 10px, putem crește și diminua aceste valori utilizând tastele săgeți sus și jos. Pentru a crește cu 10, utilizați tasta săgeată + tasta săgeată sus.
Modificarea valorilor culorilor este o briză datorită selectorului de culori. După introducerea unei valori de culoare, faceți un singur clic pe pătratul mic, colorat la stânga valorii pentru a afișa instrumentul de selectare a culorii. Puteți, de asemenea, să comutați între formatele de valoare a culorilor prin schimbare + făcând clic pe pătratul colorat mic.
Puteți crea o nouă regulă de stil făcând clic pe pictograma mică + din panoul de stiluri. Marcaj care arată ca:
Salut
Creează automat următoarea regulă de stil:
#ceva
Marcaj care arată ca:
Salut
Creează automat următoarele:
.unele clase
Marcaj care arată ca:
Salut
generează:
.h1
Marcaj care arată ca:
bună
Generă automat:
.class1.class2.class3
Desigur, regulile stilului pot fi modificate în funcție de preferințele dvs..
element panoul vă oferă o mulțime de putere cu structura și stilul paginii, dar instrumentele dev ne dau multe alte instrumente esențiale pentru munca noastră.
Resurse panoul arată ce resurse utilizează o pagină. Să aruncăm o privire la ceea ce oferă.
Valori Fereastra vă permite să vizualizați dimensiunile elementului, umplutura, margini și margini.
localStorage.sessionStorage.Instrumentele pentru dezvoltatori au, de asemenea, o caracteristică de căutare.
localStorage, cookie-urile sau orice alt mecanism de stocare a datelor. În plus, anumite resurse, cum ar fi localStorage pot fi modificate prin intermediul instrumentelor pentru dezvoltatori.În ciuda lipsei de utilizare a cadrelor în site-urile de astăzi, înțelegerea modului de inspectare a unei pagini cu mai multe cadre este o abilitate valoroasă de a avea. În următoarea imagine de ecran, veți observa o pagină în coloană în care fiecare coloană reprezintă un cadru diferit:
Puteți salva o resursă pe computer
Fiecare cadru este plasat în dosarul propriu. Fiecare dosar conține activele fiecărei pagini și puteți să faceți clic pe fiecare pagină pentru a le afișa conținutul. Vizionarea conținutului unei pagini HTML este utilă, dar putem merge mai adânc în fiecare pagină și vizualizăm resursele. JavaScript, CSS, imagini și chiar fonturi pot fi vizualizate! Activele care conțin coduri sunt afișate în vizualizatorul de coduri al uneltelor de dezvoltatori, care include sublinierea sintaxei și numerele de linie.
Este important să rețineți că fonturile de sistem, cum ar fi Arial sau Helvetica, nu sunt listate sub Fonturi; secțiunea de fonturi afișează numai fonturile pe care browserul a trebuit să le descarce.
Fonturile se aliniază astfel încât să se poată potrivi în zona conținutului de resurse; prin urmare, redimensionarea zonei conținutului resurselor redimensionează și activul!
Este clar că au apărut unele idei în interfața de vizualizare a imaginilor.
Instrumentele pentru dezvoltatori afișează imaginea din zona de conținut, iar imaginea se măsoară în funcție de dimensiunea zonei de conținut. Imaginile cu transparență (cum ar fi cea din ecranul de mai sus) sunt afișate cu un șah în fundal, ceea ce face mai ușor vizualizarea imaginii. Alte informații utile, cum ar fi dimensiunile, dimensiunea fișierului și tipul MIME, sunt afișate sub imagine.
JavaScript! Făcând clic pe un fișier script afișează conținutul său, dar nu și altceva.
Dar nu disperați; vizionarea activelor este pur și simplu: vizualizarea activelor. Într-un tutorial viitor, vom examina suportul JavaScript și capabilitățile JavaScript de pe uneltele dev.
Puteți vizualiza diferite foi de stiluri pe care le-a încărcat browserul pentru pagina web.
Ca și în cazul fișierelor JavaScript, nu puteți face prea multe cu activele de stil.
Ocazional, browserul nu va putea să încarce o anumită resursă din cauza problemelor de rețea sau a erorii dezvoltatorului.
Când se întâmplă acest lucru, o mică notificare roșie apare în dreptul materialului. Numărul indică câte erori au avut loc, iar panoul de conținut oferă mai multe detalii despre eroare.
Fiecare resursă are un meniu contextual; simplul clic pe o resursă arată un meniu similar cu acesta:
Puteți salva o resursă pe computer, puteți deschide o resursă într-o filă nouă și puteți efectua multe alte activități. Făcând dublu clic pe resursă, se deschide materialul într-o filă nouă.
Așa cum am menționat anterior, puteți vizualiza informații cookie pentru un anumit site web. De exemplu, navigarea la Twitter în timp ce sunteți conectat poate prezenta informații similare cu cele afișate în această captură de ecran:
Aici vedem:
Când vă întrebați de ce unele elemente plutitoare nu se comportă așa cum era de așteptat, vizualizarea informațiilor despre margine / padding poate ajuta la diagnosticarea problemei.
.twitter.com permite orice subdomeniu pe twitter.com.Puteți șterge un modul cookie făcând clic dreapta pe un modul cookie și selectând Șterge din meniul contextual.
Este interesant să rețineți modul în care browserele utilizează informațiile cookie pentru a determina dacă sunteți un utilizator autentificat. În timp ce v-ați conectat la Twitter, ștergerea cookie-urilor "auth_token" și "_twitter_sess" ne solicită să vă conectați după reîmprospătarea paginii. Twitter stochează probabil starea noastră înregistrată și alte fragmente de informații sensibile în aceste cookie-uri.
Stocarea și vizualizarea perechilor cheie / valoare în localStorage este destul de ușor. În loc să stocăm propriile chei, vom folosi ca exemplu un site existent. Următoarea captura de ecran afișează imaginea locală de stocare a unui exemplu de chiuveta de bucătărie realizat cu cadrul de aplicații web mobil Sencha Touch.
Când vizualizați prima pagină, browserul face o cerere pentru un fișier CSS. Reîmprospătarea paginii se simte mult mai bine, deoarece Sencha a stocat CSS în spațiul de stocare local. Aplicația chiuveta de bucătărie are câteva perechi interesante cheie / valoare. De exemplu, o cheie arată astfel:
3a867610-670a-11e1-a90e-4318029d18bb-http: //dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css
Valoarea pentru acea cheie începe cu aceasta:
/ * 45e6f4ffe818855b26f3dcbfc156025eca58e4f5 * / cod, pre, pre * font-familie: Menlo, Monaco, Courier, monospace
Steve Souders a scris despre stocarea activelor în stocarea locală; este o utilizare interesantă și interesantă a stocării locale, care poate îmbunătăți performanța - în special pe dispozitivele mobile.
Memoria cache a aplicației indică browserului ce resurse ar trebui să stocheze în memoria cache și Cache de aplicații ne permite să vedem ce a fost stocat în memoria cache.
Există trei coloane cu această vizualizare:
Consultați acest tutorial dacă nu sunteți familiarizat cu cache-ul de aplicații HTML5.
Tocmai am început. În partea a doua, vom examina mai multe panouri, cu o ușoară concentrare asupra performanței, astfel încât să putem oferi o experiență mai bună pentru utilizatori.
