Share
Urăsc depanarea și nu am întâlnit niciun dezvoltator care a argumentat altfel. Este o dragoste pentru a trebui să treci prin codul tău și să dai seama de ce este rupt. Și cel mai important, este o admitere că codul meu este rupt și că nu sunt infailibil! Erezie, spun eu!
Serios, totuși, bug-urile sunt pur și simplu o parte naturală a procesului de dezvoltare web și, în timp ce le putem urăsc, cu siguranță trebuie să ne ocupăm de ele. Dezvoltatorii din Front-End nu au întotdeauna instrumente bogate de depanare, cum ar fi alte platforme și limbi. În zilele bune, alerta() a fost prietenul tău și o metodă importantă (scuză cuvântul) pentru codul de depanare. Depanarea codului clientului are propriul său set unic de provocări din cauza varietății de tehnologii care se află în joc. Dacă vă gândiți la asta, depanarea paginilor, în special a celor dinamice, implică atât de multe părți în mișcare care ar putea afecta randarea. Aveți modelul Object Document (DOM), JavaScript, CSS, traficul de rețea, anteturile HTTP și multe alte tehnologii care toate funcționează pentru a produce o pagină și care, în multe cazuri, interacționează și se afectează reciproc.
Din fericire, ori s-au schimbat și toate browserele majore au instrumente integrate care mărește considerabil caracteristicile de depanare pentru dezvoltatori. Îi dau multă încredere lui Joe Hewitt pentru că împinge pe uneltele pe față. El a creat Firebug în 2006. În opinia mea, a rupt terenul pe care ar trebui să fie instrumentele reale de browser.
De atunci, am văzut Firebug evoluează extraordinar și servind ca o bază pentru alții de a lucra și acum avem instrumente puternice în Chrome, Internet Explorer, Safari și Opera precum și.
Pentru acest articol, mă voi concentra pe Instrumentele de dezvoltare ale Internet Explorer și pe funcționalitatea pe care o oferă. Funcționalitatea pe care o voi discuta va fi foarte familiară cu oricine a folosit un program de depanare bazat pe browser, dar vreau să pun accentul pe instrumentele Internet Explorer pentru a vă asigura că există o bună înțelegere a ceea ce este de fapt disponibil.
Permiteți-mi să încep prin a admite că știu că IE este browser-ul pe care-i place să îl urăști. Înțeleg. Faptul este că este un browser important care este important pentru mulți vizitatori ai site-ului, ceea ce înseamnă că îl veți viza și, de asemenea, va trebui să depanați codul mai devreme sau mai târziu. Ceea ce este surprinzător este cât de mulți dezvoltatori nu știu că IE livrează cu instrumente pentru dezvoltatori sau chiar mai rău că cred că încă mai trebuie să descarce Internet Explorer Developer Toolbar.
Instrumentele pentru dezvoltatori sunt denumite în mod obișnuit "Instrumentele de dezvoltare F12", deoarece apăsând tasta "F12" de pe tastatură se vor deschide în timp ce sunteți în Internet Explorer (interesant este faptul că apăsând F12 lansează Firebug și Tools Developer Tools).
Instrumentele pentru dezvoltatori sunt, de asemenea, accesibile prin meniul "Instrumente" sub eticheta "Instrumente pentru dezvoltatori F12".
Cel mai important lucru pe care ar trebui să-l subliniez este că acestea sunt incluse în Internet Explorer (și au fost de la IE8), astfel încât nu este nevoie să instalați un plugin pentru a obține instrumente dev. De asemenea, în timp ce se numesc "F12 Developer Tools", în scopul acestui articol, voi renunța la "F12" și mi-ar salva unele apăsări de taste.
Instrumentele pentru dezvoltatori furnizează dezvoltatorilor și designerilor un set bogat de instrumente care pot aborda multe dintre cazurile comune de depanare și de inspecție în care se vor confrunta în timpul muncii lor. Capabilități cum ar fi:
Acestea sunt caracteristici care sunt par pentru cursul de astăzi și esențiale pentru a determina ce ails paginile tale. În plus, instrumentele pentru dezvoltatori oferă posibilitatea de a testa site-ul dvs. în diferite versiuni ale Internet Explorer, prin modificarea modului browser:
Testarea pentru mai multe versiuni de IE a fost în mod tradițional o durere regală în tuck; această caracteristică are scopul de a reduce fricțiunea de a vă asigura că site-urile dvs. lucrează în diferitele versiuni ale IE.
Printre capabilitățile suplimentare se numără:
Mă concentrez foarte mult pe ajutarea dezvoltatorilor să utilizeze tehnici de dezvoltare bazate pe standarde pentru a asigura că site-urile lor funcționează excelent pe IE. După cum vă puteți imagina, am petrecut mult timp un cod de analiză a timpului, mai ales JavaScript. Deci, pentru a identifica un bug ciudat, am nevoie de un program de depanare JS care să mă lase să analizez codul în diverse moduri.
Una dintre cele mai importante caracteristici pentru mine este abilitatea de a prefac JavaScript. Nu știu niciun dezvoltator care să nu-și minifice codul de producție în zilele noastre. Și asta este absolut ceea ce trebuie făcut, dar atunci când trebuie să depan în ceva pe un site de producție - mai ales acolo unde nu am acces la codul sursă - este capabil să prefac codul este de neprețuit. Da, există instrumente online cum ar fi JS Beautify, care pot face acest lucru, dar mi-ar forța să copiați și să inserați codul în el pentru a dezabona codul. Având această capacitate construită chiar în mine mă salvează o tona de timp. De exemplu, spun că mă uit la o versiune miniaturală a jQuery:
Prin intermediul pictogramei de instrument, pot accesa opțiunea "Formatare JavaScript" care va debufoca codul sursă jQuery miniatural și îmi va oferi un cod mult mai ușor de citit:
După cum puteți vedea în imaginea de mai sus, codul este cu siguranță mai ușor de utilizat. Celălalt lucru interesant despre această caracteristică este că, odată ce l-ați activat, va continua să vă deobfuscate fișierele JS în timpul sesiunii.
O pretenție este că procesul de debușare nu va reveni la jQuery la sursa originală. Niciun serviciu despre care știu nu poate face acest lucru, dar hărțile sursă vor rezolva această problemă în viitor. Asigurați-vă că ați citit articolul pe hărțile sursă de Sayanee Basu pe care tocmai l-am asociat pentru un intro grozav cu privire la acest subiect.
Odată ce codul este citit, acesta facilitează determinarea fluxului sursei. În acest moment, pot stabili puncte de blocare în locurile logice ale codului pentru a izola problemele în timp ce treceți prin el. Și, desigur, puteți seta mai multe puncte de întrerupere în mai multe fișiere sursă.
De asemenea, puteți specifica puncte de întrerupere condiționate, permițându-vă să întrerupeți fluxul de cod bazat pe o valoare specifică.
Așa cum era de așteptat, puteți intra în, din sau peste orice metodă pe care o oferiți controlul granular necesar pentru a verifica codul și, de asemenea, să nu pierdeți timp prețios. Ce este important de reținut este faptul că, pe măsură ce traversați codul, este disponibil un stiva de apel care vă permite să vedeți cum ajungeți la o anumită metodă sau fișier JavaScript și reveniți la acea metodă sau fișier pentru a inspecta codul:
În plus, ajută la izolarea căilor de cod neașteptate care ar putea fi punctul de dificultate.
Informațiile sunt cheia pentru a înțelege ce se întâmplă și instrumentele pentru dezvoltatori funcționează pentru a vă oferi opțiunile de a defini ceea ce doriți să vedeți. Așadar, împreună cu stiva de apeluri, puteți obține informații despre variabilele din domeniul de aplicare curent prin fila "Locale":
Sau puteți să vă definiți propria listă de vizionare (prin fila Watch) pentru a urmări modul în care valorile variabilelor se modifică dinamic pe baza execuției codului. Lucrul cel mai bun este că instrumentele vă oferă flexibilitatea de a schimba valorile din oricare listă, astfel încât să puteți vedea cum afectează aplicația dvs..
Și să nu uităm Consola. Niciun program de depanare nu ar fi util fără o consola de a afișa erori și vă va permite să debugați interactiv:
Consola va afișa erori comune asociate paginii dvs., inclusiv probleme legate de JavaScript și de marcare. Puteți, de asemenea, să introduceți comenzi pentru a interacționa cu pagina, precum și să utilizați obiectul consola din codul dvs. JavaScript pentru a afișa mesaje în consola.
Toate cele de mai sus sunt minunate și cu siguranță valoroase. Un aspect adesea neglijat de depanare este performanța codului. Rareori vorbesc cu dezvoltatorii care menționează modul în care și-au evaluat codul pentru a determina blocajele în metodele cu lentă durată, în special din cadre terțe.
Instrumentele pentru dezvoltatori vă oferă un profil JavaScript care vă va analiza codul în timp ce acesta este rulat, oferind o multitudine de informații pe care să le puteți utiliza pentru a vă optimiza codul.
Biți cheie includ:
Înarmați cu aceste informații, puteți determina dacă metoda dvs. trebuie să fie refactată, dacă o bibliotecă terță parte provoacă probleme sau dacă o metodă specifică browserului este un obstacol. Pentru mine, combinația de timp incluziv și exclusiv va fi o măsură importantă de evaluat, pentru că mi-ar spune cât timp a durat o anumită metodă pentru a alerga, inclusiv timpul necesar pentru a finaliza copii sau metode externe. De acolo, pot începe să forțez mai departe pentru a ceda codul problemei.
Nu voi uita niciodată când am codificat prima mea cerere Ajax. A fost un pic de cod, dar a simtit cu sinceritate magica (da, eu sunt ciudat in felul acesta). Efectuarea de actualizări DOM dinamice pe baza tragerii datelor dintr-o solicitare HTTP de fundal a fost incredibil de se răcească și o capacitate puternică. De asemenea, nu voi uita niciodată prima dată când am încercat să trimit un rezultat înapoi, care a generat o eroare și mi-a lăsat uluit. Din fericire, Firebug a avut un inspector de rețea de rețea care mi-a permis să verific ce se întoarce la codul de pe server și să-l depaneze.
Fila "Rețea" din instrumentele de dezvoltator oferă această foarte mare funcționalitate. Afișează traficul legat de pagina încărcată și expune detalii pe care le puteți utiliza pentru a depana problemele legate de rețea.
Privind la traficul capturat, puteți vedea tipul de solicitare efectuată (de ex .: un mesaj GET sau POST), dacă acesta a avut succes și cât timp a durat până la finalizare. Inspectorul de rețea furnizează, de asemenea, detalii importante despre tipul de activ pe care l-ați solicitat (de exemplu: CSS sau o imagine) și ce tip de cod a inițiat solicitarea. Toate acestea sunt furnizate într-un rezumat care oferă detalii rapide despre solicitări.
Dacă alegeți să accesați o vizualizare detaliată, puteți obține informații granulare despre o anumită solicitare. Să mă pot uita la corpul de răspuns a fost ceea ce mi-a permis să rezolv problema pe care am menționat-o mai devreme cu apelul meu XHR. Dar acesta este doar un mic procent din datele de ansamblu pe care le obțineți, scăzând în detaliu. În afară de asta, primiți antetele solicitării (solicitare & răspuns), cookie-urile trimise și chiar informații despre timpul care vă arată cât timp a luat cererea.
Afișarea momentului în vizualizarea sumară este foarte importantă, deoarece este o imagine clară a cererii care se desfășoară de mult și poate fi o problemă.
Voi fi primul care va spune ca testez testul HATE pentru mai multe versiuni ale Internet Explorer. M-am enervat în principal cu versiunile mai vechi și aș fi fericit dacă dezvoltatorii ar putea să-și facă griji pentru IE9 și IE10. Dar este ceea ce este și există câteva modalități de a aborda acest lucru. Ai putea utiliza mai multe mașini virtuale pentru fiecare versiune de IE pe care o vizați. Puteți utiliza Browserstack.com pentru a virtualiza versiunile IE în browser. Sau, puteți utiliza capacitatea de comutare a modului de navigare al instrumentelor pentru dezvoltatori pentru ca IE10 să emuleze IE7 prin IE10.
Acest instrument vă permite să schimbați modul în care IE redă o pagină astfel încât să emuleze o capacitate a unei anumite versiuni, asigurându-vă astfel că site-ul dvs. ar trebui să funcționeze pentru acea versiune. Nu numai că vă permite să specificați modul browser (care determină suportul caracteristicilor), dar și modul de document (care specifică modul în care o pagină va fi interpretată). Acest lucru vă oferă o mare flexibilitate pentru a testa diferite versiuni de IE de la un singur browser. Rețineți că echipa IE face tot ce este mai bun pentru a emula versiuni. Dacă doriți o testare completă, atunci VM-urile sunt calea de urmat. De obicei, încep cu ultima opțiune, deoarece este de departe cea mai ușoară și randarea este foarte aproape de a folosi o versiune nativă specifică a IE.
Inspectarea marcării este una dintre cele mai comune sarcini pentru orice profesionist web. Este minunat să puteți privi sub capotă cum se construiește ceva fără a fi nevoie să faceți o "Vizualizare-> Sursă". Fila "HTML" din instrumentele dezvoltatorului prezintă toate elementele de pe o anumită pagină împreună cu stilurile lor asociate și atributele. Acest lucru vă permite să inspectați și să actualizați valorile în timp real și să obțineți feedback imediat. Puteți face clic pe, de exemplu, un element de paragraf și devine editabil, astfel încât să puteți schimba textul și să vedeți imediat rezultatele. Același lucru se aplică stilurilor și atributelor acelui element.
Atributele pot fi, de asemenea, adăugate în linie prin clic dreapta pe un element și selectând "Adăugați atribut" din meniul contextual sau selectând fila "Atribute" și adăugându-l în listă. Următoarea imagine arată cum am adăugat un atribut de culoare și font pentru elementul de accent, afișându-le ca stiluri inline în liniile de marcare și atributele individuale din fila Atribute:
Marcajul paginii este reprezentat într-un stil arborescent, astfel încât să vedeți o vizualizare de sus în jos a copacului DOM și să puteți extinde elemente pentru a vedea copiii lor.
CSS are, de asemenea, o filă proprie, dar este menită să gestioneze stilurile globale, de obicei stocate în foi de stil. Selectarea unei foi de stil prezintă toate selectorii, regulile și proprietățile definite și vă permite să le optimizați după cum doriți. În acest caz, pur și simplu debifând proprietatea text-align a mutat dinamic textul din stânga:
Nu se modifică doar regulile existente. De asemenea, puteți adăuga noi selectori, reguli sau proprietăți:
Motivul principal pentru care am vrut să scriu această piesă este că am fost cu adevărat surprins de numărul de dezvoltatori pe care i-am întâlnit, care au avut o concepție greșită despre F12 Developer Tools - sau nu știau că au existat chiar și ei! Speranța mea este că ajută dezvoltatorii să aibă o senzație pentru ceea ce este disponibil și face ca depanarea acestora să fie ușor mai ușoară.
De asemenea, sper că generează feedback pentru funcțiile viitoare pe care dezvoltatorii le au nevoie. În timp ce funcționalitatea existentă este bună, sunt sigur că există o serie de lucruri noi pe care dvs., cititorii, le veți găsi esențiale pentru experiența dvs. de depanare. Dați-mi voie să știu ce sunt!
Accentsconagua