1. El propósito del efecto 1. En VSCode, directamente F5 para abrir la página html, y puede depurar el código js con puntos de interrupción en el editor;
2. Preparación de la herramienta
1. Software VSCode
2. Un proyecto js
3. VSCode instala un complemento: Debugger para Chrome
como se muestra en la figura
Tres, cambios en el archivo de configuración
1. Cargue el proyecto con VSCode
2. Luego presione F5, aparece este cuadro
Elija Chrome
3. A continuación, aparece un mensaje de configuración y se abre el archivo launch.json.
Agregue un fragmento de información de configuración a este archivo
{
"name": "使用本机 Chrome 调试",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
// "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
// "preLaunchTask":"build",
"userDataDir":"${tmpdir}",
"port":5433
}
El resultado se muestra en la figura.
4. Luego, cambie el método de depuración
Como se muestra en la figura, seleccione el botón redondo a la izquierda, y luego salga de esta interfaz de gestión de configuración de depuración, seleccione "Usar depuración nativa de Chrome".
5. Luego, establezca el punto de interrupción en el js del proyecto, presione F5 y luego podrá depurar el punto de interrupción.
6. ¡Entonces disfruta!
PD: Este método solo es adecuado para páginas normales. Si su proyecto js contiene json y otros recursos que el navegador no admite la navegación local, entonces necesita abrir el servidor y cooperar con este complemento para depurar puntos de interrupción.