Share
act de renunțare: Lucrez pentru Microsoft Corporation.
În ianuarie, te-am urmărit prin caracteristicile instrumentelor de dezvoltare F12 ale Internet Explorer 10. Descărcarea recentă a versiunii Windows 8.1 de la Microsoft aduce cu ea, nu doar o actualizare a Internet Explorer (acum la v11), ci și o reîmprospătare binevenită pentru F12 Developer Tools. Acesta din urmă este deosebit de important, deoarece dezvoltatorii depind de problemele legate de site-uri din cadrul IE. Până acum, instrumentele au rezolvat cele mai multe cazuri de depanare, dar este clar că, pe măsură ce site-urile devin mai complexe, dezvoltatorii au nevoie de instrumente mai bogate pentru a lucra cu ele. Această actualizare își propune să aducă un aspect nou și capacități extinse pentru dezvoltatori, cu un accent puternic pe următoarele:
Unele actualizări sunt pur și simplu funcții de confort menite să eficientizeze fluxul de lucru al dezvoltatorilor (de exemplu: breadcrumbs), în timp ce unele vor avea un impact dramatic asupra îmbunătățirii performanței și randării aplicațiilor web.
În acest post, vom trece prin unele dintre cele mai noi actualizări și caracteristici ale instrumentelor IE11 F12 pentru dezvoltatori și în unele cazuri vă voi arăta diferențele clare în ceea ce privește caracteristicile din versiunile anterioare.
De la începuturile sale, instrumentele F12 au menținut un UI destul de consistent utilizând meniurile derulante și o metaforă bazată pe file pentru a prezenta diferitele opțiuni disponibile. Dar unele nits care păreau mereu în cale au fost lucruri cum ar fi uneltele popping în fereastra lor în timpul unei sesiuni de depanare și tab-uri luând imobiliare prețioase verticale. Cu IE11, instrumentele F12 au fost mult redesenate pentru a face UI mai intuitiv, folosind un sistem de navigație bazat pe grafic, poziționat ca o bandă derulantă în partea stângă a tabloului de depanare:
Meniurile care utilizează linia de sus a instrumentelor au fost eliminate pentru a oferi o mai mare claritate interfeței de depanare, precum și pentru a elibera bunurile imobile de care să lucreze. În plus, design-ul aplicației de depanare în sine a fost foarte revigorat rupându-se de la un Windows 7 UI-stil la un aspect mai modern Windows 8 look-and-feel. Puteți vedea diferența majoră de mai jos:
Noua interfață de utilizator este în mod clar mai consistentă cu elementele moderne introduse în Windows 8.
În timp ce instrumentul original de inspector DOM a oferit o experiență decentă, acesta nu avea anumite caracteristici cheie. Principalele puncte de durere pentru mine au fost lipsa de actualizare DOM live, ordinea de afișare a stilurilor CSS și incapacitatea de a vedea evenimentele atașate elementelor DOM. Din fericire, acestea au fost abordate acum în această actualizare.
Din moment ce mă concentrez atât de mult pe JavaScript, găsirea de evenimente atașate a fost deosebit de frustrant, necesitând o mulțime de coduri de depanare bazate pe console și încercări și erori pentru a ceda în jos combo-ul numit eveniment / metodă. Privind captura de ecran de mai jos, puteți vedea cum pot să fac clic pe un anumit element, să văd evenimentul atașat la acesta și metoda care va fi apelată la declanșarea evenimentului. Acesta este un moment de mare imens de la o perspectivă de depanare.
Și, deși poate părea evident, o schimbare ușoară, dar importantă a modului în care uneltele afișează CSS aplicată unui element, tocmai a făcut lucrurile mult mai ușoare. Înainte de această actualizare, instrumentele F12 ar afișa mai întâi stilurile moștenite, forțându-vă să derulați în jos panoul de stiluri pentru a ajunge la stilul utilizat efectiv pentru element.
Echipa a actualizat afișarea, astfel încât cele mai recente stiluri să fie afișate mai întâi, ceea ce, în opinia mea, face mult mai mult sens, mai ales dintr-o perspectivă de depanare:
Unele alte caracteristici noi, care sunt cu siguranță frumoase, sunt:
Anterior, a trebuit să deschideți instrumentele F12, faceți clic pe săgeata inspectorului DOM și faceți clic pe un element. Acest lucru simplifică lucrurile destul de puțin și aduce această experiență la egalitate cu alte instrumente de depanare.
Pescuitul oferă o modalitate intuitivă de a analiza structura ierarhică a unui element DOM, permițându-vă să faceți clic cu ușurință pe orice parte a breadcrumb-ului pentru a extrage elementul parental individual:
Cu noua funcție de stil Intellisense, când editați un stil sau adăugați o nouă regulă, vi se oferă imediat un popup care vă oferă acces rapid la regulile și valorile CSS. În timp ce unii dintre voi pot fi enciclopedii CSS, eu unul mă apreciez că nu trebuie să-i amintesc pe toți. :)
În cele din urmă, cu ajutorul programului DnD din cadrul exploratorului DOM, puteți testa interactiv modul în care elementele dvs. vor arăta și vor reacționa atunci când veți schimba poziția lor în aspectul paginii. Modificările sunt făcute live, astfel încât să primiți feedback imediat când repoziționați elementul.
Există un număr mai mare de coduri plasate pe partea clientului decât oricând. Cadre precum Ember.js și Angular fac în mod substanțial mai ușor pentru dezvoltatori să construiască aplicații web pe o singură pagină, iar dezvoltatorii utilizează caracteristici bazate pe HTML5 pentru a construi jocuri imersive care necesită rate de cadre ridicate și timpi de răspuns. Cu aceasta, vine un set complet de considerații legate de performanța paginii, iar noile instrumente F12 oferă un nou instrument care vă ajută să vă faceți profilul și să măsurați capacitatea de reacție a interfeței dvs. de utilizator. Instrumentul de receptivitate al UI este un profil care vă permite să măsurați frameratele și utilizarea procesorului pentru a identifica problemele de performanță ale UI.
Prin lansarea profilului, pot urmări modul în care CPU-ul meu reacționează la pagina mea și ceea ce viteza vizuală (cadre AKA-pe-secundă) reprezintă puncte diferite în ciclul de încărcare a paginii.
Panoul cu detalii despre Timeline oferă detalii chiar mai detaliate despre modul în care anumite evenimente sau solicitări de rețea au afectat performanța paginii, permițându-mi să mă aflu mai adânc în orice problemă și să fac modificări pentru a îmbunătăți performanța site-ului meu.
Privind la fiecare element al cronologiei, puteți vedea cum acțiunile specifice, de exemplu stilul, pot afecta performanța de randare.
Vă puteți imagina cât de neprețuite sunt aceste date, în special pentru dezvoltatorii de jocuri care doresc să folosească capacitățile browserului nativ pentru jocuri și sunt folosite pentru a avea instrumente robuste de depanare în alte instrumente de dezvoltare bazate pe plugin-uri, cum ar fi Flash.
Dintre toate schimbările, cele mai importante pentru mine au fost cele ale depanatorului de script, în principal pentru că au ajutat la prevenirea furiei pe care am simțit-o când o voi folosi. Acesta a fost în primul rând o problemă UX în faptul că, în momentul în care ați optat pentru a rula programul de depanare, întregul panou de instrumente ar apărea din fereastra de vizualizare a browser-ului și în fereastra pop-up de sine stătătoare. A fost o experiență groaznică de spus cel puțin. Această actualizare rezolvă această problemă și asigură că debuggerul rămâne ferm.
Un alt avantaj deosebit este utilizarea unei metafore de file pentru afișarea fiecărui fișier deschis pe care îl depanați. Versiunea anterioară a instrumentului v-a forțat să redeschideți fiecare fișier necesar pentru depanare. Noua versiune prezintă o filă pentru fiecare fișier cu care lucrați, făcând navigarea mult mai ușoară.
În plus, opțiunile care au fost în general îngropate în meniurile context sunt acum puternic evidențiate și ușor de descoperit. Este uimitor de câte ori dezvoltatorii au fost surprinși când i-am arătat funcția destul de tipărită pentru formatarea JavaScript, chiar dacă a fost acolo de la IE8. Caracteristica este acum evidențiată printr-o pictogramă din partea de sus a panoului de depanare alături de pictograma wordwrap.
Nu în ultimul rând, uitați console.log (). Noile instrumente suportă Tracepoints acum cu ușurință, permițându-vă să monitorizați anumite valori în același fel în care ați putea console.log ().
Problemele legate de memorie au reprezentat întotdeauna o tragere, mai ales dacă este o problemă de degradare lentă a memoriei. Noile instrumente F12 urmăresc să abordeze acest lucru cu noul profil de memorie. Instrumentul vă permite să faceți instantanee ale utilizării memoriei site-ului sau al aplicației pe o perioadă de timp, permițându-vă să stabiliți ce acțiuni sau zone ale aplicației dvs. ar putea fi cauza principală a problemei.
Prin crearea unui instantaneu de bază al amprentei de memorie urmată de instantanee ulterioare, puteți compara datele colectate pentru a determina numărul de obiecte active și care sunt tipurile de obiecte care persistă. Acestea includ elemente HTML, noduri DOM și obiecte JavaScript și puteți trece în comparațiile instantaneelor pentru a vedea schimbarea memoriei dintre acestea pentru obiecte individuale.
Probabil sunteți prea familiarizați cu meniurile complexe numite "Mod browser" și "Mod document". Acestea au fost menite să ajute dezvoltatorii să depaneze problemele legate de versiunile non-moderne ale Internet Explorer. În realitate, acestea au fost puțin confuz de folosit și au oferit doar un suport de testare marginal pentru IE non-moderne. Cu această nouă actualizare, instrumentele F12 au simplificat acest lucru pentru a ajuta dezvoltatorii să se concentreze pe testarea versiunii IE compatibile cu cele mai multe standarde, mai ales dacă site-ul lor rulează în prezent într-un mod compatibil.
Prin modificarea modului de documentare la "Edge", un dezvoltator poate forța site-ul să le facă în modul cel mai recent standard acceptat de acea versiune a IE și să lucreze pentru a face schimbările necesare bazate pe standarde pentru ca site-ul lor să facă browser încrucișat. În plus, o legătură informațională este furnizată direct în instrumentul care duce dezvoltatorii direct la modern.IE, o resursă online care oferă un scanner pentru probleme comune de compatibilitate, mașini virtuale pentru diferite versiuni ale Internet Explorer și cele mai bune practici pentru asigurarea site-ului compatibilitate în versiunile moderne ale IE.
O caracteristică nouă care vizează în mod explicit dispozitivele mobile și tabletele este simularea pentru Geolocație. Acest lucru vă permite să utilizați API-ul Geolocation chiar dacă dispozitivul nu este conectat.
Aceasta este o actualizare minunată a unei suite de instrumente care ne-au servit bine, dar cu siguranță aveau nevoie de ceva. Sa concentrat în mod clar atenția asupra ofertei de instrumente care v-au ajutat să depanați problemele legate de performanță, ceea ce este incredibil de important, mai ales cu tendințele orientate spre aplicațiile de o singură pagină, în stil nativ.
.
Accentsconagua