Microsoft integrerar webbläsarutvecklingsverktyg i Visual Studio Code

Goda nyheter för föregångare utvecklare: det finns ett nytt Microsoft Edge Tools for VS Code-tillägg.

Dela inlägget

Arthur Aballéa / Publicerad den 5 oktober 2020 12:28

Ladda ner Microsoft Edge-verktyg för VS-kod

Tillägget som presenteras av Microsoft tillåter frontend-utvecklare att använda DevTools-funktionalitet i VS Code med Edge-webbläsarnätverkselement och tillägg. Dessa verktyg motsvarar dem du kommer åt genom att inspektera ett element i webbläsaren eller genom att använda kortkommandot F12.

Detta är en sammanslagning av två experimentella tillägg som har testats av Microsoft sedan förra året. Microsoft Edge Tools for VS Code kan laddas ner från Visual Studio Marketplace eller direkt i VS Code. Tack vare detta tillägg är det möjligt att se HTML/CSS-renderingen och ändra dess layout genom att ändra dess CSS-filer utan att lämna VS-koden.

DevTools webbläsare i kodredigerare

Den här nya funktionen gör att frontend-utvecklare kan se sina utvecklingsresultat direkt utan att öppna en webbläsare. Således kan de direkt se och validera ändringar som gjorts i HTML/CSS-filen.

Tidigare hade du valet mellan blindkodning och inspektering av sidor i webbläsaren, inspektera utvecklingen och rapportera dem på din fil via VS Code. Du bör nu kunna applicera och testa dina UI-utvecklingar direkt på IDE.

Visual Studio renderar dina sidor via den nya, Chromium-baserade versionen av Edge, som säkerställer kompatibiliteten för din utveckling för Chrome. Observera att det är möjligt att lansera en fullständig eller huvudlös version av Microsoft Edge.

Fullständig Microsoft Edge-integration på VS Code. © Microsoft

Nätverksfliken för att spåra interaktioner med servrar

Microsoft säger att nätverksrutan är den näst mest använda funktionen i utvecklarverktygen på Edge. Ett särskilt tillägg har testats sedan förra året: det är nu en integrerad del av Microsoft Edge Tools for VS Code-tillägget som tillhandahålls av Microsoft i en stabil version. Det är inaktiverat som standard, gå bara till inställningar för att aktivera det.

Nätverksfliken i VS Code. © Microsoft