如何在VSCode中调试运行在浏览器端的JavaScript-VSCode-PHP中文网

如何在VSCode中调试运行在浏览器端的JavaScript

P粉986688829

发布： 2025-12-20 19:00:09

原创

905人浏览过

在VSCode中调试浏览器端JavaScript需正确配置环境：安装Debugger for Chrome或使用内置JavaScript Debug Terminal，配合Live Server启动页面，配置launch.json指定URL和webRoot，设断点后按F5调试。

如何在vscode中调试运行在浏览器端的javascript

在 VSCode 中调试浏览器端 JavaScript 很方便，关键是正确配置调试环境，让 VSCode 能和浏览器建立连接并控制执行流程。

确保浏览器支持调试（推荐 Chrome 或 Edge）

VSCode 通过 Debugger for Chrome 或内置的 Edge Debugger 扩展与浏览器通信。Chrome 和新版 Edge 均基于 Chromium，兼容性最好。

安装官方扩展：Debugger for Chrome（已归档，但旧项目仍可用）或直接使用 VSCode 内置的 JavaScript Debug Terminal（VSCode 1.59+ 默认启用，无需额外插件）
启动浏览器时建议加上远程调试标志（仅特定场景需要）：chrome.exe --remote-debugging-port=9222，一般开发服务器自动处理，可暂不手动操作

用 Live Server 启动页面（快速上手）

适合静态 HTML + JS 项目，无需构建工具。

安装扩展：Live Server（by Ritwick Dey）
右键 HTML 文件 → Open with Live Server，页面会在浏览器中打开，URL 类似 http://127.0.0.1:5500/index.html
VSCode 自动识别该地址，后续调试会默认连接这个标签页

配置 launch.json 启动调试会话

点击左侧调试图标 → 顶部“运行和调试”面板 → 点击“创建 launch.json 文件” → 选择环境（如 Chrome 或 Edge）。

立即学习“Java免费学习笔记（深入）”；

Eclipse中创建Web Maven Project并部署到Tomcat中中文WORD版

大家都知道，在进行J2EE项目的开发过程中，在调试阶段如果只是修改了页面是不需要重启应用服务器的，比如不需要重启Tomcat。只需要在浏览器中进行页面刷新即可。其实之所以不用重启Tomcat等应用服务器，其根本原因是因为我们可以在应用服务器的配置文件中设置虚拟目录，这样就可以知道web 项目所在的目录，于是就可以省去打包、然后再重新发布到服务器的步骤。感兴趣的朋友可以过来看看

查看详情

一个典型配置如下（适用于本地 HTML 文件）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against index.html",
      "url": "http://127.0.0.1:5500/index.html",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}

登录后复制