Som webutviklere bruker vi mye tid på å skrive koden vår i et redigeringsmiljø. Vi hopper deretter over til nettleseren for å bruke de innebygde utviklerverktøyene til å feilsøke og finpusse produktets brukergrensesnitt. Problemet med dette er at resultatene av justeringen og feilsøkingen ikke reflekteres i kildekoden. I Microsoft Edge jobber vi for tiden med et par løsninger som er åpne for diskusjon, og vi vil gjerne din tilbakemelding på dem
Hvis du foretrekker å se en video i stedet for å lese, her er en tre minutters introduksjon:
Det nåværende problemet med justeringer og endringer i utviklerverktøy h2>
I dag tilbyr nettleserens DevTools svært sofistikerte visuelle verktøy som lærer deg – for eksempel – CSS-syntaks mens du bruker dem. Disse verktøyene endrer ting på en visuell måte. Du kan for eksempel klikke på «Flexbox»-ikonet ved siden av en hvilken som helst CSS flexbox-eiendom, og du får en popup som gir deg en forhåndsvisning av resultatet av den stilendringen.
Dette er en utmerket feilsøkingsopplevelse og hindrer deg i å måtte slå opp CSS-syntaks hele tiden. Imidlertid er det en frakobling, siden koden som vises i disse feilsøkingsarbeidsflytene ikke er den du skrev i koderedigeringsprogrammet.
Stilredigeringsprogrammet fungerer ved å vise bare en delvis visning av koden for gjeldende element valgt i nettleseren. Du vet ikke hvor og hvordan den koden passer inn i resten av CSS-en på nettsiden din. Selv om du kan rulle for å se resten av koden, ville det ikke vært bedre å også se originalen CSS-fil?
Du kan få tilgang til den ved å klikke på koblingene til selve CSS-filen, som tar deg til Kildeverktøyet og bort fra stilredigering.
Denne er en redaktør innebygd i nettleserutviklerverktøyene som var kjekke da de kom ut, men som ikke skinner i forhold til det vi forventer av en redaktør i disse dager. Med mindre du kobler fra verktøyene og bruker dem i et eget vindu, har du heller ikke nok skjermer for en praktisk redigeringsopplevelse.
Enten du bruker de visuelle verktøyene til å finpusse CSS, eller kilderedigeringsprogrammet, gjenstår ett problem: når du har endret mye av ting og du kom frem til ønsket resultat, hvordan får du disse endringene tilbake til kildekoden din?
Visste du at det finnes et endringsverktøy?
Utviklerverktøy for nettleser har en funksjon som hjelper til med dette kalt Changes som ikke får mye bruk og er stort sett ukjent. Du kan få tilgang til den fra kommandomenyen eller kontekstmenyen, og den viser deg en forskjellig visning av alle filene du endret i denne økten. Du kan bruke dette verktøyet til å kopiere og lime inn endringene tilbake til kildefilene dine.
Firefox bruker en litt annen tilnærming til et endringsverktøy som oppdateres live med endringer du gjør. Den oppretter også en CSS-fil som du kan kopiere og lime inn med kommentarer som forklarer hvilke filer du skal lime inn disse endringene tilbake i og hva som ble fjernet eller lagt til.
Selv om dette er et godt skritt i riktig retning, krever det et ekstra skritt å kopiere og lime inn koden tilbake til redigeringsprogrammet.
En forbedret Workspace-flyt inkludert Visual Studio CodeArbeidsområder i Chromium Developer Tools har eksistert lenge, men har ikke så mye nytte. Det er derfor vi ønsket å gjøre det mer åpenbart at du kan ha live synkronisering av endringer mellom nettleserens DevTools og en koderedigerer. Vi innså også at editoren i Kilder-verktøyet ikke er det folk vil bruke.
Hva om du kunne ha fordelene med redigeringsprogrammet du allerede bruker, og fordelene med direkte endringer i filer i Workspaces?
Fra og med versjon 96 av Microsoft Edge kan du finne et nytt eksperiment i DevTools kalt «Åpne kildekodefiler i Visual Studio Code“.
Når du har slått på denne og startet utviklerverktøy på nytt, navigerer du til en fil på harddisken eller en lokal serveradresse som localhost eller 127.0.0.1 vil gi deg en melding som ber deg identifisere rotmappen til denne filen. Du kan også velge bort en økt eller aldri se dette alternativet a gain.
En gang du velger en mappe, ber nettleseren deg om tillatelse til å få tilgang til den mappen – omtrent som du måtte når du brukte Workspaces i kildeverktøyet.
Når du nå gjør endringer i stiler-ruten, endres filen på disken. Forskjellen er at når du har Visual Studio Code som redaktør på datamaskinen, vil klikk på lenkene til filene åpne dem i denne editoren i stedet for den i kildeverktøyet. Du forblir i miljøet du er vant til med alle tilpasningene og utvidelsene du har lagt til.
Dette er flott siden CSS-endringene dine er permanente nå. Problemet er imidlertid at de kan være for påtrengende. Enhver endring i stilverktøyet, som å endre en størrelse med én enhet, vil føre til at filen på harddisken endres. Hvis du bruker en live reload-serverløsning eller til og med skript som overvåker en mappe og utløser en byggeprosess, kan dette raskt bli rotete.
CSS-speilredigering
I den nyeste versjonen av Edge DevTools for Visual Studio Code-utvidelsen vi introduserte en annen måte å lukke forfatter-/feilsøkingssløyfen kalt”CSS Mirror Editing”. Hvis du vil, kan du se denne 40 sekunders videointroduksjonen.
Hvis du aktiverer denne funksjonen, vil endringer som gjøres i stilverktøyet også påvirke kildekoden, men filen forblir uendret til du lagrer den i Visual Studio Code. Du får fordelen av å ikke miste endringene dine, og du har full kontroll over filene på harddisken.
Hvis du bruker versjonskontroll, kan du se alle endringene du har gjort som en diff-visning når du har lagret filen. Dette gir deg all bekvemmeligheten til Workspaces-arbeidsflyten med færre endringer i filene.
Hva bør vi gjøre for å gjøre denne opplevelsen bedre?
Det ser ut til at vi har alle de riktige komponentene i sted å gi utviklere og ende-til-ende forfatter-og feilsøkingsopplevelse. Vi vil gjerne vite hva du synes om disse tilnærmingene og hvilken du foretrekker.
Hvis du har tilbakemeldinger, vennligst kontakt Edge DevTools-teamet på Twitter på @EdgeDevTools, kommenter dette problemet på GitHub om CSS Mirror Editing a> eller bruk tilbakemeldingsverktøyet innebygd i DevTools i nettleseren.
– Chris Heilmann, hovedprogramleder, Microsoft Edge