Microsofts nye Chromium-baserede browser har for nylig haft sin anden offentlige stabile udgivelse, der afslører Edge 80 med fuld ARM64-support samt forbedrede værktøjer, der hjælper dig med at opbygge og arbejde med webindhold. Som tidligere versioner af den nu arvede Edge holder Microsofts nye browser den velkendte F12-genvej for at starte dens udviklerværktøjer, enten knyttet til browseren eller i en separat rude.
Det er værd at gøre sig bekendt med de nye ting, da selvom der er ligheder med den gamle Edge, arbejder du nu i en Chromium-verden, og der er meget mere til fælles med Chrome og andre Chrom-baserede browsere. Det er ikke en dårlig ting. Det er lettere at overføre færdigheder mellem browsere, og hvis du har brugt Chrome som en udviklingsbrowser, bliver det let at begynde at arbejde i den nye Edge. Imidlertid har Microsoft foretaget nogle egne ændringer og arbejder på at udvide Edge-udvikleroplevelsen til Visual Studio-kode, så du kan udvikle og teste JavaScript-applikationer i et enkelt miljø.
En udvikleroplevelse på tværs af platforme
Med den nye Edge tilgængelig på Windows 7 og macOS og med en Linux-version under udvikling er der adgang til de samme udviklingsværktøjer på forskellige platforme. Du får de samme inspektører, debuggere og konsoller, så det er nemt at køre de samme tests, uanset hvor du arbejder og på hvilket operativsystem du bruger. En udvikler, der er fortrolig med Edge på Windows, skal kunne skifte til en Mac for at teste kode uden at skulle vente på, at en Mac-udvikler hjælper.
Ligesom den gamle Edge hjælper de nye Chromium-baserede Edge-udviklingsværktøjer dig med at undersøge HTML, CSS og JavaScript på dit websted med en JavaScript-fejlfinding og en konsol til visning af konsolloggingoutput fra at køre JavaScript. Du kan bruge værktøjerne til hurtigt at tænde for en browserværktøjslinje, der tilføjer enhedsvisningsfunktioner, hvilket giver dig mulighed for at teste responsivt design uden at forlade en udviklings-pc.
Brug af Edge-udviklerværktøjerne
Edge's udviklerværktøjer findes i ni forskellige ruder, som hver giver dig forskellige indsigter i din webapplikation. Du bruger sandsynligvis den første: Elements-visningen.
Dette borer ned i din HTML og CSS og viser, hvilke elementer på en side der genereres af hvilke sektioner af kode. Peger på et element i dit browservindue fremhæves den relevante kode, hvilket hjælper med at isolere den HTML eller CSS, du vil fejle. En rude viser HTML; den anden viser den aktuelle CSS med de aktuelt anvendte stilarter og de begivenhedslyttere, der bruges. Du kan se, hvilke CSS-regler der i øjeblikket bruges, og hvilke der ignoreres.
Elements-ruden er også tilgængelig som Visual Studio Code-udvidelse, hvilket bringer layoutinspektion sammen med din HTML-redigering. Det er en nyttig måde at hurtigt se, hvordan ændringer i din kode påvirker dine sidelayouts. Du kan endda vedhæfte kode til en browserinstans, hvilket giver dig direkte adgang til alle åbne HTML-dokumenter.
Gør dig klar til PWA'er
Et af de mere nyttige værktøjer er Performance-panelet. Herfra kan du registrere dine browseraktiviteter. Når en testsekvens er afsluttet, kan du bruge værktøjets tidslinje til at profilere de ressourcer, din app bruger. Det bruges bedst i forbindelse med netværks- og hukommelsesværktøjerne, især hvis du bruger meget JavaScript. At forstå, hvordan en webapp fungerer, er især vigtig, hvis du planlægger at bruge den som en PWA (progressiv webapplikation), og her tilføjer et applikationspanel værktøjer til at undersøge nøglekomponenter i en PWA, herunder lokal opbevaring og servicearbejdere.
Da Edge gør det lettere at identificere og installere PWA'er, er det værd at udforske disse værktøjer mere detaljeret, især applikationsruden. Med et dashboard-lignende look og feel er det en hurtig måde at få et dybtgående kig på, hvad der sker i dine applikationer, og hvordan de fungerer uden for browseren. Du kan bruge applikationsværktøjet til at undersøge, hvordan Edge's indbyggede tjenester, som f.eks. Betalingshåndteringen, fungerer.
Brug af plug-ins i Edge DevTools
Et andet træk ved skiftet til en Chromium-baseret udvikleroplevelse er understøttelse af tredjeparts-plug-ins. Nogle er allerede tilgængelige i Edge's egen tilføjelsesbutik (dog i øjeblikket kun via private dybe links til butikken). For et bredere udvalg, hvis du har aktiveret tredjepartsbutiksupport i Edge, har du adgang til alle udvidelser i Chrome Webshop. Der er meget her, herunder værktøjer, der tilføjer fokuseret support til specifikke JavaScript-rammer eller hjælp til fejlretning. Disse omfatter Facebooks React, open source gRPC, værktøjer til at hjælpe med at arbejde med GraphQL API'er og support til linters som webhint.
Chromiums udvikler-plug-in-specifikation er offentlig, og alle kan bygge og udgive deres egne udviklerværktøjer, enten internt eller for hele verdenen at bruge. Da Edge's plug-ins deler et fælles format med andre Chromium-browsere, kan det samme plug-in leveres gennem andre browserbutikker, hvilket forenkler værktøjsudvikling.
Tilføjelse af en udvidelse til udviklerværktøjerne er som at tilføje en til browseren. Naviger til en butik, klik på det værktøj, du vil tilføje, og lad det downloade og installere. Det installeres i browseren, og du vil måske skjule udvidelsesikonet i browsermenuen, før du åbner udviklerværktøjerne for at se en ny fane. At køre webhint over et websted viser et sæt nøglemålinger, der giver dig tip til vigtige funktioner som tilgængelighed eller til understøttelse af PWA-funktioner.
Det er godt at se tilpasning endelig en del af Edge's værktøjer. Vi bruger alle forskellige værktøjskæder, og det er en meget udviklervenlig tilgang at give dig det, du har brug for til at understøtte de teknologier, du bruger. Da Microsoft annoncerede skiftet til Chromium til sin browser, angav det, at en af grundene var at give udviklerne de funktioner, de har brug for til at opbygge de applikationer, de ønsker. Det har muligvis kun betydet forbedring af browsersupport til HTML5, CSS og JavaScript, så det er et godt skridt at bringe hele spektret af Chromium-udviklerværktøjer til Edge på tværs af alle dets understøttede operativsystemer.
Microsofts ændringer til Chromiums udvikleroplevelse
Det er vigtigt at huske, at Microsoft stadig er en relativt junior partner til Google i Chromium-udvikling. Alligevel har det formået at yde et betydeligt antal bidrag, siden det sluttede sig til projektet, herunder tilføjelse af support til tilgængelighedsfunktioner for at gøre udviklerværktøjer tilgængelige for det bredest mulige samfund. Med omkring 170 ændringer, der tilføjer support til værktøjer som f.eks. Skærmlæsere, er der meget at lide her, da tilgængelige udviklerværktøjer vil føre til udvikling af tilgængelige webapplikationer og -tjenester.
Andre nye funktioner er i øjeblikket skjult bag eksperimentelle flag i Edge's indstillinger, herunder understøttelse af yderligere sprog. Hvis du aktiverer denne funktion og bruger et af de 10 understøttede sprog, vil lokaliseringen af udviklerværktøjer matche din browsers lokalisering.
