Nu există multe lucruri pe care să nu le puteți face cu tehnologiile web în zilele noastre. Platforma web a evoluat atât de mult încât lucruri atât de diverse, cum ar fi animarea elementelor, redarea sau înregistrarea mediilor, accesarea fișierelor sau stocarea, interceptarea solicitărilor de rețea și accesarea memoriei cache, realizarea de aspecte CSS complexe sau scrierea codului nativ sunt toate posibile astăzi.
Cu atâtea lucruri de învățat și de folosit, dezvoltatorii web au nevoie de o suită completă de instrumente pe care să se poată baza.
Din fericire, Microsoft Edge vine cu instrumente de dezvoltare care fac posibil ca dezvoltatorii web să fie productiv cu funcțiile web și API-urile. Indiferent de ceea ce faci, cel mai probabil există un instrument dedicat care te poate ajuta.
Totuși, reversul este că DevTools tind să fie destul de complicate. Acestea conțin peste 30 de instrumente diferite, iar interfața cu utilizatorul a crescut de-a lungul timpului pentru a le găzdui. În plus, noi funcții sunt adăugate tot timpul ca răspuns la feedback-ul pe care îl primim de la utilizatori.
În această postare, vă vom prezenta funcții noi din Microsoft Edge DevTools care ajută la realizarea instrumentelor mai accesibil și personalizabil, astfel încât să puteți începe să faceți față provocării de a avea atât de multe instrumente diferite la dispoziție. De asemenea, puteți afla mai multe despre aceste funcții în videoclipul de mai jos.
DevTools evoluează rapid între browsere – pentru fiți la curent cu cele mai recente din alte browsere, consultați articolul meu din Smashing Magazine care acoperă noile funcții DevTools în Microsoft Edge, Google Chrome, Mozilla Firefox și Safari.
Deschiderea, închiderea și mutarea instrumentelor
Deși DevTools au aproximativ 30 de instrumente separate, este puțin probabil ca veți avea nevoie de acces la mai mult de o mână de ele în același timp, să nu mai vorbim de 30. Deci, este foarte important să aveți o modalitate de a deschide cu ușurință uneltele atunci când aveți nevoie de ele și de a le închide atunci când nu aveți nevoie.
În același timp, s-ar putea să existe instrumente pe care nu le-ați folosit niciodată până acum, care ar putea fi foarte utile. Dacă acestea sunt închise implicit, s-ar putea să nu le descoperi deloc.
Am adăugat trei funcții DevTools mici, dar foarte puternice, pentru a rezolva acest lucru.
Instrumente de închidere
File din Microsoft Edge DevTools au acum un buton de închidere care poate fi folosit pentru a le ascunde pe cele de care nu mai aveți nevoie. Prin urmare, puteți păstra o interfață de utilizator curată și simplă și aveți la dispoziție doar instrumentele de care aveți nevoie chiar acum.
Rețineți că câteva instrumente nu au un buton de închidere: Elemente, Consolă și Surse. Aceste instrumente sunt folosite mult mai mult decât toate celelalte. Dezvoltatorii web au nevoie de ele în orice moment, iar închiderea lor nu are prea mult sens.
Unelte de deschidere
Acum există un buton + (plus) la sfârșitul barei de file pentru a deschide orice instrument care nu este deja deschis.
Anterior, pentru a descoperi toate instrumentele disponibile, trebuia să mergi în meniul principal (…) și apoi să selectezi Mai multe instrumente sau să știi cum să folosești meniul de comandă pentru a accesa instrumentele rapid. Butonul + face descoperirea și accesarea altor instrumente mult mai ușoară.
Pot exista două bare de file în DevTools: una în partea de sus, care este întotdeauna vizibilă și este acolo unde sunt de obicei panourile Elemente și Surse, și una în partea de jos, Drawer, care poate fi comutat apăsând Esc pe tastatură. Consola locuiește de obicei în sertar. Ambele bare de file au butonul +, astfel încât să puteți deschide instrumente noi în oricare dintre aceste două locații.
Mutarea instrumentelor
Aveți sertarul deschis poate fi foarte util atunci când depanați ceva care necesită mai mult de un instrument în același timp.
De exemplu, poate doriți să aveți ambele panouri Surse și Rețea deschise în același timp pentru a vă asigura că sunt trimise solicitările HTTP corecte atunci când depanați codul JavaScript. Sau poate doriți să aveți ambele panouri Elemente și Vizualizare 3D deschise unul lângă altul pentru a depana o problemă z-index cu un element.
Cu Microsoft Edge DevTools, acum puteți muta instrumentele între zona principală și sertar, deschizând meniul contextual (clic dreapta) pe fila pe care doriți să o mutați și selectând Mută în jos sau Mută în sus.
Rețineți că dacă selectați butonul + din sertar și alegeți un instrument din listă care este deja deschis în zona principală, atunci acest instrument va fi mutat în sertar. Aceasta este o altă modalitate bună de a muta instrumentele.
Învățați despre instrumente, din interiorul instrumentelor
Butonul + este excelent pentru a descoperi cu ușurință instrumente noi pe care este posibil să nu le fi folosit înainte. Dar uneori, interfața de utilizator a unui instrument poate fi copleșitoare la prima vedere. Este de ajutor să aveți o documentație disponibilă. documentația Microsoft Edge DevTools vă poate ajuta acolo, dar De multe ori nu este la îndemână atunci când vă aflați la mijlocul sarcinii.
Recent, am adăugat o funcție pentru a face și mai ușoară învățarea contextuală despre un nou instrument: DevTools Tooltips. DevTools Tooltips este o suprapunere care acoperă instrumentele și oferă documentație contextuală despre acestea, cu linkuri pentru a afla mai multe.
Puteți activa DevTools Tooltips în 3 moduri diferite:
Accesați butonul Personalizați și controlați DevTools (…) > Ajutor > Activați dezactivarea instrumentelor DevTools. De asemenea, puteți utiliza comanda rapidă de la tastatură Ctrl+Shift+H (Cmd+Shift+H pe Mac). Sau utilizați meniul de comandă și tastați „tooltips”.
După ce ați activat, trebuie doar să mutați mouse-ul peste zonele evidențiate pentru a afișa un indicativ cu informații despre această zonă specifică a instrumentelor (puteți folosi și tasta Tab pentru a naviga prin sfaturile cu instrumente). Unele dintre indicațiile conțin chiar link-uri către pe site-ul web de documentație pentru a afla și mai multe.
Rețineți că puteți accesa și alte panouri în timp ce DevTools Tooltips sunt active. În acest fel, puteți naviga în DevTools și puteți continua să învățați despre lucruri noi fără a fi nevoie să porniți funcția dezactivată și reactivată de fiecare dată.
Schimbarea limbii
Știm că dezvoltatorii pot fi mai productivi atunci când instrumentele lor se potrivesc cu limba lor preferinta de utilizare. În plus, alte produse pentru dezvoltatori Microsoft, inclusiv VS Code, pot fi utilizate în alte limbi. Acesta este motivul pentru care am făcut DevTools disponibile în 11 limbi diferite.
În mod implicit, DevTools se potrivește cu limba pe care o alegeți pentru interfața de utilizare a browserului, dar o puteți seta independent la oricare dintre aceste alte limbi.
Pentru a schimba limba, navigați la setările DevTools (folosind comanda rapidă F1 sau făcând clic pe pictograma roată din bara de instrumente) și alegeți din Limbă listă drop-down. După reîncărcarea DevTools, interfața sa de utilizator va apărea în limba dorită, devenind astfel mai ușor de utilizat instrumentele. Iată cum arată în franceză: Acest lucru funcționează excelent și cu funcția DevTools Tooltips, deoarece documentația contextuală este tradusă și, așa cum se arată în rusă mai jos. De când am anunțat lansarea experimentală a funcției DevTools localizate în 2020, am continuat colaborarea cu echipele Lighthouse și Chrome de la Google prin proiectul Chromium, iar funcția nu este acum disponibilă numai pentru toți utilizatorii Microsoft Edge, b de asemenea, pentru oricine folosește DevTools într-un browser bazat pe Chromium. Dacă utilizați Visual Studio Code (sau alte editori de text și IDE-uri de altfel), probabil că și-a personalizat tema de culoare la ceva plăcut din punct de vedere vizual și confortabil pentru a lucra pentru perioade lungi de timp. Până acum, tema de culoare DevTools ar putea poate fi personalizat doar alegând între temele întunecate sau deschise. Cu toate acestea, acum, există 9 noi teme de culoare din care să alegeți. Acestea sunt aceleași cu cele preinstalate Visual Studio Code și, prin urmare, ar trebui să fie familiare. Iată întreaga listă de teme din Microsoft Edge DevTools acum: Teme existente: Light+ Dark+ Chromium Light Crom Întunecat Teme noi: Lumină liniștită Lumină solarizată Lumină întunecată Solarizată Întuneric Abyss Kimbie Întunecat Monokai Monokai Roșu estompat Mâine noapte Albastru Pentru a alege o temă nouă, puteți accesa Setări (pictograma roată din bara de instrumente ) și utilizați meniul drop-down Temă . De asemenea, puteți utiliza meniul de comandă și introduceți „temă” pentru a vedea întreaga listă a temelor de culori disponibile. Rețineți că, dacă utilizați Microsoft Edge Tools pentru VS Code, este posibil să fi văzut că DevTools nu este întotdeauna afișat cu aceeași temă de culoare ca și interfața de utilizator VS Code în sine. Acum, datorită noului teme de culoare în DevTools, acest lucru nu se va mai întâmpla. Începând cu Microsoft Edge 95, interfața de utilizare DevTools, încorporată în VS Code, se va potrivi cu tema de culoare selectată. Dacă nu știți despre această extensie, aflați mai multe despre asta aici. Feedback-ul utilizatorilor este modul în care stabilim prioritățile pentru lucru care se desfășoară pe Microsoft Edge DevTools. Dacă aveți întrebări sau feedback despre aceste funcții sau altele, vă rugăm să ne trimiteți câteva cuvinte și capturi de ecran folosind butonul de feedback din DevTools. Nu ezitați să adresați întrebări echipei noastre pe Twitter, menționând @EdgeDevTools cont. – Patrick Brosset, Senior Program Manager, Microsoft Edge 
Personalizarea temei de culoare
Feedback
