Share
În această serie de tutoriale din două părți, vom examina scrierea și depanarea codului JavaScript utilizând instrumente de lucru moderne, cum ar fi Chrome DevTools.
În partea 1, veți primi o privire introductivă asupra diferitelor panouri din DevTools și a fluxurilor de lucru pentru care sunt potrivite. De asemenea, se va pune accent pe scrierea și executarea codului JavaScript prin browser, și nu pe un editor de cod.
Instrumentele pentru dezvoltatori sunt funcții oferite de browsere care conțin un set de utilitare pentru inspectarea, interacțiunea cu paginile web și depanarea acestora. Browser DevTools sunt în mod obișnuit incluse în toate browserele moderne, inclusiv Chrome, Firefox, Safari, Opera și Internet Explorer. Acest tutorial se va axa în special pe partea DevTools din Chrome Canary, dar toate caracteristicile enumerate aici vor face probabil parte din Chrome Stable în curând.
Platforma web deschisă vă permite Faceți clic dreapta> Inspectați elementul pe orice pagină web și descoperă interioarele acesteia, însă JavaScript a fost întotdeauna un pic mai puțin accesibil decât CSS (Cascading Style Sheets). Deși DevTools este dotat cu funcții legate de stilul paginii, există și o mulțime de funcționalități mai puțin cunoscute, care vă permit să vizualizați, să scrieți și să depanați JavaScript într-o varietate de moduri, fie pe propria pagină, fie pe o a treia site-ul părții.
Dacă sunteți un dezvoltator web front-end, vă recomandăm să fiți conștienți de utilitățile JavaScript pe care le oferă DevTools. Printre caracteristicile de nivel înalt se numără:
Această secțiune va acoperi elementele UI ale dispozitivelor DevTools, în special Panoul surselor și Panoul consolei, deoarece acestea sunt cele două panouri care vor fi utilizate pentru restul acestui tutorial.
Luați în considerare câteva caracteristici ale aspectului:
Panoul Surse oferă un editor de cod și acceptă evidențierea sintaxelor pentru multe formate de fișier comune, cum ar fi HTML, CSS, JavaScript, CoffeeScript, LESS și Sass. Editorul de cod este prezent în panoul principal. Direct deasupra panoului principal puteți vedea filele corespunzătoare fișierelor deschise.
În panoul Surse din bara laterală din partea stângă, există un arbore de fișiere care prezintă în mod obișnuit materialele pe care pagina încărcat în prezent a inspectat-o. Activele sunt grupate pe domenii, iar folderele pot fi într-o stare extinsă sau colapsată. Dacă dați un singur clic pe un material, acesta se va deschide în editorul de coduri.
Bara laterală dreaptă conține comenzi pentru depanarea JavaScript și fiecare panou poate fi în stare extinsă sau restrânsă. Diferite niveluri de ieșire sunt afișate aici când JavaScript este întrerupt la un punct de întrerupere.
Panoul consolei vă permite să vizualizați ieșirea produsă prin înregistrarea diagnosticului (cum ar fi console.log ), dar și să scrieți și să evaluați JavaScript în contextul paginii inspectate în prezent. Panoul consolei acceptă atât API-ul consolei, cât și API-ul pentru linia de comandă. Iată câteva funcții expuse de fiecare API, împreună cu o descriere a rezultatelor acestora.
Accentsconagua
// O simplă instrucțiune de jurnal, logarea unui șir, a unui tablou și a unui console.log ("Hi", [1,2,3], acest lucru);
// Same as console.log, dar formatat în roșu pentru a indica o eroare console.error ('A apărut o eroare');
chei (fereastră); // Obțineți proprietățile unui obiect
$ 0; // Returnați elementul selectat curent în panoul Elemente
Partea superioară a panoului Console conține câteva controale, după cum se arată mai jos.
clar(), care face parte din API-ul de linie de comandă.Panoul Consola este unul dintre puținele panouri pe care le puteți suprapune peste alte panouri din DevTools (Elemente, Rețea, Surse) pentru a oferi un flux de lucru îmbunătățit. Dacă vă regăsiți în mod regulat revenirea la panoul Console, deschideți sertarul pentru consolă apăsând butonul Evadare cheie.
Această secțiune se va concentra pe utilizarea instrumentelor DevTools pentru a vedea resursele JavaScript pe care le utilizează un site. Înainte de a continua, se recomandă să dezactivați memoria cache a browserului prin DevTools. Pentru a face acest lucru, navigați la Setări> Generalități și activați caseta de selectare intitulată Dezactivați memoria cache (în timp ce DevTools este deschis). Acest lucru vă asigură că obțineți întotdeauna o versiune nouă a unui activ.
Navigați la HTML5Please.com, un site care explică disponibilitatea funcțiilor Platformei Web. Deschideți DevTools folosind Command-Shift-I sau prin selectarea Inspectează elementul din meniul contextual al paginii. Treci peste la Panoul sursei și luați notă de structura arborelui de fișiere afișată în bara laterală din stânga. Nu este nemaipomenit ca site-urile să stocheze JavaScript-ul în foldere precum "js" sau "scripts", astfel încât să știți deja unde să căutați. Deschideți script.js fișier în js pliant. Observați câteva caracteristici ale editorului de cod care se pot dovedi utile atunci când vizualizați sau editați codul JavaScript:
Utilizați funcția Definiție "go-to" pentru a găsi sau descoperi rapid metode sau funcții JavaScript. Puteți deschide fereastra modalității de definire go-through prin intermediul comenzii rapide Command-Shift-P. Dacă cunoașteți numele metodei sau funcției pe care o căutați, tastați-o în caseta de căutare "Definiție"; pe măsură ce tastați, rezultatele se vor actualiza în timp real. Fiecare rezultat conține numele metodei de potrivire (dacă există unul) și numărul liniei în care este definită. Utilizare introduce pentru a selecta un rezultat al căutării și apoi aterizați pe linia de cod în care este definită funcția.
Acum deschis modernizr-2.0.min.js în js / libs pliant. Faptul că acest fișier este minimizat face mai greu de văzut. Selectați Destul de imprimat pentru a avea DevTools să aplice o formatare mai intuitivă în fișier, folosind pauze de linie și indentare. Caracteristica Pretty Print funcționează atât pentru CSS, cât și pentru JavaScript.
Fiecare fișier JavaScript din arborele de fișiere are un meniu contextual, așa că deschideți-l utilizând Click dreapta. Observați câteva opțiuni utile pentru a lua fișierul offline pentru utilizare ulterioară.
Panoul de rețea, pe lângă afișarea pur și simplu a resurselor pe care o pagină le-a încărcat, va afișa și alte informații și date.
Folosind HTML5Please.com ca exemplu de site web, urmați pașii de mai jos:
Primul scenariu, modernizr-2.0.min.js, are valoarea lui html5please.com/:17 pentru inițiator. Acest lucru sugerează că a fost o resursă HTML care a inițiat descărcarea scriptului (mai degrabă decât un încărcător de script, de exemplu). Faceți clic pe inițiator și veți ajunge la linia de cod din panoul Sursă care face trimitere la fișier:
În cazul în care un script este inserat dinamic (cu un încărcător de script, de exemplu), coloana inițiator din panoul de rețea poate furniza o stivă de apeluri JavaScript referitoare la apelurile care au avut loc până la punctul în care scriptul a fost inserat dinamic în DOM.
Puteți să faceți clic pe fiecare apel într-un teanc de apeluri pentru a naviga la partea relevantă a codului din panoul Surse.
În secțiunea "Vizualizarea JavaScript utilizând DevTools", am explicat cum să vizualizați informațiile, metadatele și codul sursă pe activele JavaScript. Această secțiune va examina modurile în care puteți scrie JavaScript utilizând DevTools.
Utilizați Panoul consolei pentru a scrie linkuri rapide JavaScript cu rezultate imediate. JavaScript este executat în contextul paginii inspectate în prezent. Executați JavaScript în panoul Consola apăsând introduce după ce ați introdus un cod.
Consultați API Consola și API pentru linia de comandă pentru o listă de metode și funcții disponibile.
În timp ce panoul Consola este relativ simplu, există câteva sfaturi mici pentru a vă îmbunătăți fluxul de lucru:
chei (fereastră) pentru a detecta variabilele globale pe pagina curentă.$ _ helper pentru a recupera ultimul rezultat al unei comenzi anterioare.Puteți găsi panoul Consola pentru a fi un bun candidat pentru experimentarea rapidă a JavaScript pentru a descoperi ce înseamnă ieșirea anumitor expresii. Cu toate acestea, atunci când începeți să scrieți JavaScript mai complex, puteți întâmpina cu ușurință limitări:
Panoul Consola nu intenționează să fie un înlocuitor de cod sau chiar o alternativă. Iată o listă a câtorva cazuri în care panoul Consola poate fi util:
apel() și aplica() metode prin executarea lor in linie si observarea rezultatelorPanoul principal al panoului Sources conține un editor de coduri cu capabilități de editare de bază.
Editorul în sine este alimentat de CodeMirror, un editor de text puternic implementat folosind JavaScript. DevTools importează editorul CodeMirror în baza sa de coduri proprii și permite în mod selectiv diferite funcții care, la rândul său, sunt puse la dispoziția oricărui utilizator Chrome.
Când se editează JavaScript (printre alte limbi acceptate), editorul Panel sursă conține un număr de utilitare cum ar fi:
document nu este sugerat după introducerea textului docu dacă nu există deja cel puțin o apariție a cuvântului document în același fișier.Această caracteristică, mai bine cunoscută sub numele de Live Edit, vă oferă posibilitatea de a edita codul JavaScript al unei pagini prin DevTools și modificările să se aplice imediat paginii fără o reîmprospătare a paginii. Nu există niciun UI special pentru a utiliza acest lucru; pur și simplu rescrieți o parte din codul JavaScript și apăsați Command-S pentru al salva.
Cum funcționează acest lucru în spatele scenei este explicat mai jos, dar mai întâi, luați în considerare următoarele condiții preliminare (acestea sunt independente de Live Edit):
script.js încărcări în Chrome prin intermediul unei pagini Web.script.js este analizat, evaluat și compilat în codul mașinii prin motorul JavaScript V8.Iată ce se întâmplă în spatele scenei a funcției Live Edit, luând în considerare punctele anterioare:
script.js în editorul de cod DevTools. Să presupunem că există un buton pe pagina web curentă. Pe butonul de pe buton, un ascultător al unui eveniment de clic execută o funcție anonimă.console.log și salvați fișierul.script.js sunt injectate înapoi în motorul V8 pentru procesare.script.js și cel vechi. Ștergerile, adăugările și modificările sunt stocate.script.js cu modificările compilate.Live Edit funcționează cel mai bine cu modificări minore, în loc să creați fișiere JavaScript întregi pentru aplicația dvs. Scenariile de depanare funcționează bine cu Live Edit.
Spațiile de lucru nu reprezintă o componentă critică a depanării JavaScript prin intermediul dispozitivelor DevTools. Cu toate acestea, în funcție de cerințele dvs., poate accelera fluxul de depanare. Spațiile de lucru reprezintă o caracteristică a dispozitivului DevTools, care vă permite să modificați conținutul unui dosar în sistemul de fișiere, făcând modificări de cod în DevTools.
Dacă navigați într-un proiect care este difuzat local pe un server web, cum ar fi http: // localhost: 3000 / și proiectul există pe sistemul dvs. de fișiere la ~ / Dezvoltare / proiect, de exemplu, puteți să-i învățați pe DevTools despre cartografiere între cele două și să utilizați funcțiile Live Edit cu capacități de salvare pe disc. Spațiile de lucru permit următorul flux de lucru:
În pasul 3, salvarea suprascrie fișierul sursă original.
Sursa Hărți rezolvă o problemă comună atunci când se ocupă de codul sursă procesat sau compilat în altceva. Exemplele includ:
Problema este următoarea: atunci când depanem o versiune prelucrată a codului, poate fi greu de înțeles modul în care codul dvs. sursă original se potrivește cu ceea ce vedeți în timpul depanării. Dacă întâmpinați o eroare în consolă DevTools pentru un site de producție, de obicei va trebui să depanați o versiune miniaturizată și concatenată a codului JavaScript, care nu seamănă prea mult cu fișierele sursă pe care le-ați autorizat.
O hartă sursă este un fișier generat ca parte a unui proces de compilare care este disponibil pentru cazurile de utilizare listate mai devreme. DevTools poate citi un fișier Map sursă pentru a înțelege modul în care un fișier compilat are loc pe fișierul original.
Cele două fragmente de cod (Source File-app.js și Transpiled file-compiled.js) demonstrează codul de depanare Source Map.
Exemplul 1. Fișierul sursă-app.js
pentru (elementul var al lui [1, 2, 3]) console.log (element);
Rețineți că app.js fișierul sursă utilizează o caracteristică compatibilă cu Ecmascript 6, cunoscută sub numele de iteratorul Array.
Exemplul 2. Fișierul transpilat-compiled.js
"folosiți stricte"; pentru var $ __ 0 = [1, 2, 3] [simbol.iterator] (), $ __ 1;! ($ __ 1 = $ __ 0.next ());) var element = $ __ 1.value; console.log (element); // // sourceMappingURL = app.js.map
Rețineți că compiled.js este menționată de o etichetă de script pe o pagină HTML, împreună cu timpul de executare Traceur și, în final, este deschis într-un browser.
Chiar JavaScript compilat are console.log declarația de pe linia 6. DevTools este capabil să arate exact undeconsole.log instrucțiunea există în fișierul sursă original (depanare Map sursă), care este pe linia 2. Punctele de blocare funcționează conform așteptărilor. În spatele scenelor, JavaScript-ul compilat este evaluat și executat, dar DevTools prezintă un material diferit în locul versiunii evaluate de browser.
Funcția Fragmente a DevTools oferă o modalitate rapidă de a scrie codul JavaScript diferit și de ao executa. Toate JavaScript executate prin Snippets se execută în contextul paginii curente. Executarea unui snippet DevTools este similară cu executarea unui Booklet pe o pagină. S-ar putea să fiți de preferat să scrieți anumite JavaScript în Fragmente, spre deosebire de panoul Consola din motive legate de un mediu de editare mai bun. Fragmentele dvs. sunt salvate în spațiul de stocare local al dispozitivelor DevTools.
Pentru a utiliza fragmente:
console.log ( 'Hello'); în editorul de coduri.Puteți găsi un număr de fragmente deja scrise în acest depozit de fragmente DevTools.
Asta e pentru partea 1 a unei experiențe moderne de depanare. În Partea 2, vom examina câteva funcții de depanare și câteva extensii care pot ajuta în acest sens.
