Experiențe îmbunătățite de creare și depanare în Microsoft Edge DevTools și Visual Studio Code

Ca dezvoltatori web, petrecem mult timp creând codul nostru într-un mediu de editare. Apoi trecem la browser pentru a folosi instrumentele de dezvoltare încorporate pentru a depana și a modifica interfața de utilizare a produsului. Problema cu aceasta este că rezultatele ajustării și depanării nu sunt reflectate în codul sursă. În Microsoft Edge, lucrăm în prezent la câteva soluții care pot fi discutate și ne-ar plăcea feedback-ul dvs. despre ele

Dacă preferați să vizionați un videoclip în loc să citiți, iată o introducere de trei minute:

Problema actuală cu ajustări și modificări în Instrumentele pentru dezvoltatori

Astăzi, browserul DevTools oferă instrumente vizuale extrem de sofisticate care vă învață, de exemplu, sintaxa CSS în timp ce le utilizați. Aceste instrumente schimbă lucrurile într-o manieră vizuală. De exemplu, puteți da clic pe pictograma „Flexbox” de lângă orice proprietate CSS Flexbox și veți obține o fereastră pop-up care vă oferă o previzualizare a rezultatului modificării stilului.

Aceasta este o experiență excelentă de depanare și vă împiedică să căutați tot timpul sintaxa CSS Cu toate acestea, există o deconectare, deoarece codul afișat în aceste fluxuri de lucru de depanare nu este ceea ce ați scris în editorul dvs. de cod.

Editorul de stiluri funcționează arătând doar o vedere parțială a codului pentru codul curent. element selectat în browser. Nu știți unde și cum se încadrează acel cod în restul CSS-ului dvs. de pe pagina dvs. web. Deși puteți derula pentru a vedea restul codului, nu ar fi mai bine să vedeți și originalul Fișier CSS?

Îl puteți accesa făcând clic pe linkurile către fișierul CSS în sine, care vă duce la Instrumentul surse și departe de editorul de stiluri.

Acesta este un editor încorporate în instrumentele de dezvoltare ale browserului, care a fost ingenioasă când au apărut, dar nu strălucește în comparație cu ceea ce ne așteptăm de la un editor în aceste zile. Cu excepția cazului în care deconectați instrumentele și le utilizați într-o fereastră proprie, de asemenea, nu aveți suficient spațiu de ecran pentru o experiență de editare convenabilă.

Fie că utilizați instrumentele vizuale pentru a vă modifica CSS-ul sau editorul de surse, rămâne o problemă: odată ce ați schimbat mult lucruri și ați ajuns la rezultatul dorit, cum reintroduceți aceste modificări în codul sursă?

Știați că există un instrument de modificări?

Instrumentele pentru dezvoltatori de browser au o caracteristică care ajută la acest lucru numită Modificări care nu se folosește prea mult și este în mare parte necunoscută. Îl puteți accesa din meniul de comandă sau din meniul contextual și vă arată o vizualizare diferită a tuturor fișierelor pe care le-ați schimbat în această sesiune. Puteți folosi acest instrument pentru a copia și a lipi modificările înapoi în fișierele sursă.

Firefox folosește o abordare ușor diferită a instrumentului de modificări care se actualizează în direct cu modificările pe care le faci. De asemenea, creează un fișier CSS pe care să îl copiați și să inserați, care conține comentarii care explică în ce fișiere să lipiți aceste modificări înapoi și ce a fost eliminat sau adăugat.

Deși acesta este un pas bun în direcția corectă, este nevoie de un pas suplimentar pentru a copia și a lipi codul înapoi în editorul dvs..

Un flux de spațiu de lucru îmbunătățit, inclusiv Visual Studio CodeSpatiile de lucru din Chromium Developer Tools există de mult timp, dar nu văd atât de mult folos. De aceea, am vrut să facem mai evident faptul că puteți avea sincronizare live a modificărilor între browser DevTools și un editor de cod. De asemenea, ne-am dat seama că editorul din instrumentul Surse nu este ceea ce doresc oamenii să folosească.

Ce-ar fi dacă ați putea beneficia de confortul editorului pe care îl utilizați deja și de beneficiile modificărilor live ale fișierelor din Workspaces?

Începând cu versiunea 96 a Microsoft Edge, puteți găsi un nou experiment în DevTools numit „Deschideți fișierele sursă în Visual Studio Code“.

Odată ce ați activat-o și ați repornit instrumentele pentru dezvoltatori, navigați la un fișier de pe hard disk sau la o adresă de server local, cum ar fi localhost sau 127.0.0.1 vă va oferi o solicitare care vă solicită să identificați folderul rădăcină al acestui fișier. Puteți, de asemenea, să renunțați la o sesiune sau să nu vedeți niciodată această opțiune a câștig.

O dată dacă alegeți un dosar, browserul vă cere permisiunea pentru a obține acces la acel dosar – la fel cum trebuia să faceți când utilizați Workspaces în instrumentul Surse.

Când faceți acum orice modificare în panoul Stiluri, fișierul se schimbă pe disc. Diferența este că, atunci când aveți Visual Studio Code ca editor pe computer, făcând clic pe linkurile către fișiere, le va deschide în acest editor în loc de cel din instrumentul Surse. Rămâneți în mediul cu care sunteți obișnuit cu toate personalizările și extensiile pe care le-ați adăugat.

Acest lucru este grozav, deoarece modificările dvs. CSS sunt permanente acum. Problema este totuși că pot fi prea intruzive. Orice modificare a instrumentului Stiluri, cum ar fi modificarea unei dimensiuni cu o unitate, va avea ca rezultat modificarea fișierului de pe hard disk. Dacă utilizați orice soluție de server de reîncărcare live sau chiar scripturi care urmăresc un folder și declanșează un proces de construire, acest lucru se poate dezordona rapid.

Editarea în oglindă CSS

În cea mai recentă versiune a programului Extensia Edge DevTools for Visual Studio Code am introdus o modalitate diferită de a închide bucla de creație/depanare numită „Editarea în oglindă CSS”. Dacă doriți, puteți viziona acest introducere video de 40 de secunde.

Dacă activați această caracteristică, modificările făcute în instrumentul Stiluri afectează și codul sursă, dar fișierul rămâne neschimbat până când îl salvați în Visual Studio Code. Beneficiați de a nu pierde modificările și de a păstra controlul deplin asupra fișierelor de pe hard disk.

Dacă utilizați controlul versiunilor, puteți vedea toate modificările pe care le-ați făcut ca o vizualizare diferită odată ce ați salvat fișierul. Acest lucru vă oferă toată comoditatea fluxului de lucru Workspaces, cu mai puține modificări ale fișierelor.

Ce ar trebui să facem pentru a îmbunătăți această experiență?

Se pare că avem toate componentele potrivite în loc pentru a oferi dezvoltatorilor și experiență de creație și depanare end-to-end. Ne-ar plăcea să știm ce părere aveți despre aceste abordări și pe care o preferați.

Dacă aveți feedback, vă rugăm să contactați echipa Edge DevTools pe Twitter la @EdgeDevTools, comentați această problemă pe GitHub despre editarea în oglindă CSS sau utilizați instrumentul Feedback integrat în DevTools din browser.

– Chris Heilmann, Manager de program principal, Microsoft Edge