Microsofts nye Chromium-baserte nettleser har nylig hatt sin andre offentlige stabile utgivelse, avduking av Edge 80 med full ARM64-støtte, samt forbedrede verktøy som hjelper deg med å bygge og jobbe med nettinnhold. Som tidligere versjoner av den nå eldre kanten, holder Microsofts nye nettleser den kjente F12-snarveien for å starte utviklerverktøyene, enten festet til nettleseren eller i en egen rute.
Det er verdt å bli kjent med de nye tingene, siden selv om det er likheter med eldre Edge, jobber du nå i en Chromium-verden, og det er mye mer til felles med Chrome og andre Chromium-baserte nettlesere. Det er ikke dårlig. Det er lettere å overføre ferdigheter mellom nettlesere, og hvis du har brukt Chrome som en utviklingsleser, blir det enkelt å begynne å jobbe i nye Edge. Imidlertid har Microsoft gjort noen egne endringer, og jobber med å utvide Edge-utvikleropplevelsen til Visual Studio-kode, slik at du kan utvikle og teste JavaScript-applikasjoner i et enkelt miljø.
En plattformutvikleropplevelse
Med den nye Edge tilgjengelig på Windows 7 og macOS, og med en Linux-versjon under utvikling, er det tilgang til de samme utviklingsverktøyene på forskjellige plattformer. Du får de samme inspektørene, feilsøkingsprogrammene og konsollene, så det er enkelt å kjøre de samme testene uansett hvor du jobber, og på hvilket operativsystem du bruker. En utvikler som er kjent med Edge på Windows, bør kunne bytte til en Mac for å teste kode uten å måtte vente på at en Mac-utvikler skal hjelpe.
I likhet med eldre Edge hjelper de nye Chromium-baserte Edge-utviklingsverktøyene deg med å undersøke HTML, CSS og JavaScript på nettstedet ditt, med en JavaScript-feilsøking og en konsoll for visning av konsollloggingsutdata fra å kjøre JavaScript. Du kan bruke verktøyene til å raskt slå på en nettleserverktøylinje som legger til enhetsvisningsmodi, og som gir deg muligheten til å teste responsivt design uten å forlate en utviklings-PC.
Ved hjelp av Edge-utviklerverktøyene
Edge's utviklerverktøy finnes i ni forskjellige ruter, som hver gir deg forskjellig innsikt i webapplikasjonen. Det er mest sannsynlig at du bruker den første: Elements-visningen.
Dette går ned i HTML og CSS, og viser hvilke elementer på en side som genereres av hvilke kodeseksjoner. Å peke på et element i nettleservinduet fremhever den aktuelle koden, og hjelper deg med å isolere HTML eller CSS du vil feilsøke. En rute viser HTML; den andre viser gjeldende CSS, med gjeldende stil og hendelseslytterne som blir brukt. Du kan se hvilke CSS-regler som for øyeblikket brukes og hvilke som blir ignorert.
Elements-ruten er også tilgjengelig som Visual Studio Code-utvidelse, og gir layoutinspeksjon ved siden av HTML-redigering. Det er en nyttig måte å raskt se hvordan endringer i koden påvirker sidelayoutene dine. Du kan til og med legge ved kode til en nettleserforekomst, og gir deg direkte tilgang til alle åpne HTML-dokumenter.
Gjør deg klar for PWA
Et av de mer nyttige verktøyene er Performance-panelet. Herfra kan du registrere nettleseraktivitetene dine. Når en testsekvens er fullført, kan du bruke verktøyets tidslinje til å profilere ressursene appen din bruker. Den brukes best i forbindelse med nettverks- og minneverktøyene, spesielt hvis du bruker mye JavaScript. Å forstå hvordan en webapp fungerer, er spesielt viktig hvis du planlegger å bruke den som en PWA (progressiv webapplikasjon), og her legger et applikasjonspanel til verktøy for å undersøke viktige komponenter i en PWA, inkludert lokale lagrings- og servicearbeidere.
Med Edge som gjør det lettere å identifisere og installere PWAer, er det verdt å utforske disse verktøyene mer detaljert, spesielt applikasjonsruten. Med et dashbordlignende utseende er det en rask måte å få en grundig titt på hva som skjer i applikasjonene dine, og hvordan de vil prestere utenfor nettleseren. Du kan bruke applikasjonsverktøyet til å utforske hvordan Edge sine innebygde tjenester, for eksempel betalingsbehandler, fungerer.
Bruker plug-ins i Edge DevTools
En annen funksjon ved overgangen til en Chromium-basert utvikleropplevelse er støtte for tredjeparts plugin-moduler. Noen er allerede tilgjengelige i Edge sin egen tilleggsbutikk (men foreløpig bare via private dyplenker til butikken). For et bredere utvalg, hvis du har aktivert tredjepartsbutikksupport i Edge, har du tilgang til alle utvidelsene i Chrome Nettmarked. Det er mye her, inkludert verktøy som legger til fokusert støtte for spesifikke JavaScript-rammer eller hjelp med feilsøking. Disse inkluderer Facebooks React, åpen kildekode gRPC, verktøy for å hjelpe deg med GraphQL APIer, og støtte for linters som webhint.
Chromiums utviklerplugg-spesifikasjon er offentlig, og alle kan bygge og publisere sine egne utviklerverktøy, enten internt eller for hele verden å bruke. Ettersom Edge-plugin-modulene deler et felles format med andre Chromium-nettlesere, kan den samme plug-in-en leveres gjennom andre nettleserbutikker, noe som forenkler utviklingen av verktøyet.
Å legge til en utvidelse til utviklerverktøyene er som å legge til en i nettleseren. Naviger til en butikk, klikk på verktøyet du vil legge til, og la det laste ned og installere. Den installeres i nettleseren, og det kan være lurt å skjule utvidelsesikonet i nettlesermenyen før du åpner utviklerverktøyene for å se en ny fane. Å kjøre webhint over et nettsted viser et sett med viktige beregninger, og gir deg tips om viktige funksjoner som tilgjengelighet, eller for støtte for PWA-funksjoner.
Det er bra å se tilpasning endelig som en del av Edge-verktøyene. Vi bruker alle forskjellige verktøykjeder, og det er en veldig utviklervennlig tilnærming å gi deg det du trenger for å støtte teknologiene du bruker. Tilbake da Microsoft kunngjorde byttet til Chromium for nettleseren, indikerte det at en av grunnene var å gi utviklerne funksjonene de trenger for å bygge applikasjonene de ønsker. Det kan ha betydd bare forbedring av nettleserstøtte for HTML5, CSS og JavaScript, så å bringe hele spekteret av Chromium-utviklerverktøy til Edge, på tvers av alle støttede operativsystemer, er et velkomment trekk.
Microsofts endringer i Chromiums utvikleropplevelse
Det er viktig å huske at Microsoft fortsatt er en relativt yngre partner for Google i Chromium-utvikling. Allikevel har det klart å gi et betydelig antall bidrag siden det ble med i prosjektet, inkludert å legge til støtte for tilgjengelighetsfunksjoner for å gjøre utviklerverktøy tilgjengelig for et bredest mulig samfunn. Med omtrent 170 endringer som legger til støtte for verktøy som skjermlesere, er det mye å like her, ettersom tilgjengelige utviklerverktøy vil føre til utvikling av tilgjengelige webapplikasjoner og tjenester.
Andre nye funksjoner er for tiden skjult bak eksperimentelle flagg i Edge-innstillingene, inkludert støtte for flere språk. Hvis du aktiverer denne funksjonen, og bruker et av de 10 støttede språkene, vil lokaliseringen av utviklerverktøyene matche nettleserens lokalisering.
