Cómo configurar el depurador para la extensión de Chrome en Visual Studio Code

La depuración de sus aplicaciones web con Visual Studio Code lo hace más eficiente. Le ayuda a ahorrar mucho tiempo y mantiene su código más limpio. Esto se debe a que no tiene que escribir un montón de console.logs y puede revisar la ejecución de su código línea por línea. Pero si está aquí, probablemente conozca los beneficios de depurar aplicaciones web. Vamos a empezar…

Preparándose

Lo primero que debe hacer es instalar la extensión Debugger for Chrome. Una vez que lo haya instalado, estará casi listo para comenzar. Lo siguiente que debe hacer es crear un archivo de inicio para Visual Studio Code Debugger. Este archivo contiene las diferentes configuraciones del depurador para su proyecto.

Puede crear el archivo de inicio yendo a la sección de depuración en la barra de actividad y haciendo clic en el ícono de ajustes.

Una lista de opciones le pedirá que seleccione "Chrome".

Después de hacer esto, tendrá un .vscodedirectorio con un launch.jsonarchivo.

Configuraciones

Hay dos tipos de configuraciones de depuración de Chrome: launchy attach. Puede configurar esto en la requestopción dentro de cada objeto de configuración.

Lanzamiento

La configuración de lanzamiento lanza una instancia de Chrome que ejecuta un archivo o URL específico. Si especifica una URL, debe establecer webRootel directorio desde el que se sirven los archivos. Puede ser una ruta absoluta o una ruta que utilice el ${workspaceFolder}resolutor. Esta es la carpeta abierta en su espacio de trabajo de Visual Studio Code.

Nota: tenga cuidado al configurar webRoot, esto se usa para resolver las URL en un archivo en su computadora.

Puede ver un ejemplo de dos launchconfiguraciones: una que se inicia contra un servidor local y la otra que se inicia contra un archivo local.

Si tiene una instancia de Chrome en ejecución, la iniciada por el depurador utilizará una sesión temporal. Esto significa que no tendrá sus extensiones ni pestañas abiertas. Si desea iniciar una instancia de Chrome con su usuario y extensiones, primero debe cerrar todas las instancias en ejecución.

Nota: Cuando detenga el depurador, esto cerrará la ventana de Chrome.

Adjuntar

Personalmente prefiero usar este ... Esta configuración adjunta el depurador a una instancia en ejecución de Chrome. Pero para que esta opción funcione, debe iniciar Chrome con la depuración remota habilitada. El lanzamiento de una instancia de Chrome con depuración remota varía según su sistema operativo.

Ventanas

Hay dos formas de iniciar Chrome con depuración remota en Windows. La más simple es hacer clic derecho en el acceso directo de Google Chrome. Seleccione la opción de propiedades y agregue el siguiente comando en el campo de destino .

--remote-debugging-port=9222

Nota: Esto iniciará Chrome con la depuración remota habilitada cada vez que haga clic en el acceso directo.

La otra forma es abrir el símbolo del sistema y ejecutar este comando reemplazando el 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. ?