Sådan opsættes debugger til Chrome-udvidelse i Visual Studio Code

Fejlfinding af dine webapplikationer med Visual Studio Code gør dig mere effektiv. Det hjælper dig med at spare meget tid og holder din kode renere. Dette skyldes, at du ikke behøver at skrive en masse console.logs, og du kan gå gennem din kodeudførelse linje for linje. Men hvis du er her, ved du sandsynligvis fordelene ved fejlretning af webapplikationer. Så lad os begynde ...

Kom i gang

Den første ting du skal gøre er at installere Debugger til Chrome-udvidelsen. Når du har installeret det, er du næsten klar til at gå. Den næste ting du skal gøre er at oprette en startfil til Visual Studio Code Debugger. Denne fil indeholder debuggerens forskellige konfigurationer til dit projekt.

Du kan oprette startfilen ved at gå til afsnittet om fejlfinding i aktivitetslinjen og klikke på tandhjulsikonet.

En liste med muligheder vil bede dig om at vælge den "Chrome".

Når du har gjort dette, skal du have et .vscodebibliotek med en launch.jsonfil.

Konfigurationer

Der er to slags Chrome-fejlfindingskonfigurationer: launchog attach. Du kan indstille dette i requestindstillingen i hvert konfigurationsobjekt.

Start

Startkonfigurationen starter en Chrome-forekomst, der kører en bestemt fil eller URL. Hvis du angiver en URL, skal du indstille webRootdet bibliotek, som filer serveres fra. Dette kan enten være en absolut sti eller en sti ved hjælp af ${workspaceFolder}opløseren. Dette er den mappe, der er åbnet i dit Visual Studio Code-arbejdsområde.

Bemærk: Vær forsigtig under indstilling webRoot, dette bruges til at løse URL'er til en fil på din computer.

Du kan se et eksempel på to launchkonfigurationer: Den ene starter mod en lokal server og den anden starter mod en lokal fil.

Hvis du kører en Chrome-forekomst, bruger den, der startes af fejlfindingsprogrammet, en midlertidig session. Dette betyder, at du ikke har dine udvidelser eller åbnede faner. Hvis du vil starte en Chrome-forekomst med din bruger og udvidelser, skal du først lukke hver kørende forekomst.

Bemærk: Når du stopper fejlretningen, lukker dette Chrome-vinduet.

Vedhæft

Jeg foretrækker personligt at bruge denne ... Denne konfiguration vedhæfter fejlfindingsprogrammet til en kørende instans af Chrome. Men for at denne mulighed skal fungere, skal du starte Chrome med fjernfejlfinding aktiveret. At starte en Chrome-forekomst med fjernfejlfinding varierer afhængigt af dit operativsystem.

Windows

Der er to måder at starte Chrome med fjernfejlfinding i Windows. Den enkleste er at højreklikke på Google Chrome-genvejen. Vælg egenskabsmuligheden, og tilføj følgende kommando i målfeltet .

--remote-debugging-port=9222

Bemærk: Dette starter Chrome med fjernfejlfinding aktiveret hver gang du klikker på genvejen.

Den anden måde er at åbne kommandoprompten og udføre denne kommando, der erstatter th> with the actual location of your Chrome installation.

\chrome.exe --remote-debugging-port=9222

macOS

Open the terminal and execute the following command:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

Launch your terminal and run this command:

google-chrome --remote-debugging-port=9222

What this does — no matter what OS — is open Chrome with a flag, in this case: --remote-debugging-port, and sets it to 9222. You can read more about this here.

Note: If you have other Chrome instances running with no remote debugging, make sure to close them before launching a new one.

Here’s a sample attach configuration.

Note: If you do not set the "url" option, a list will be prompted with your open tabs.

This extension have a lot of very useful options that you can use to adapt the configurations to your project. You can read the documentation of some of them here.

Summary

Congratulations! You’ve learned how to install and set up the debugger for Chrome in Visual Studio Code. You also learned how to launch Google Chrome with remote debugging enabled. Now it’s time for you to explore and expand your new knowledge… I highly recommend you to take a look at the extension’s repository.

I hope you enjoyed this post. You can find me on Twitter @_svictoreq. ?