关于javascript:VS-Code-调试-js-的两种方法

本文将介绍 VS Code 调试 js 的两种办法：

1. Quokka.js 插件
2. Debugger for Chrome 与 Live Server 搭配

Quokka.js 插件

插件地址

在扩大商店搜寻装置：

在 VS code 中应用快捷键 ctrl+shift+P 调露面版，输出 quo：

能够看到有两个选项，一个是调试 js 的，一个是调试 ts 的。咱们选第一个。

可能会有一个询问你是否购买 pro 版的提醒，你能够关掉不必理睬，也能够抉择购买。

尝试在关上的编辑框中输出几句代码：

你会发现，代码的运行是实时的。右边的绿色方块代表语句被胜利执行，如果执行不胜利，会变成红色。

Debugger for Chrome 与 Live Server 搭配

Debugger for Chrome 插件地址

Live Server 插件地址

请先下载安装这两个插件；本办法须要装置谷歌浏览器。

假如你有这样一个前端我的项目：

当你装置好 Live Server 后你会发现 VS Code 右下角有个 Go Live 小按钮：

点它！

Live Srever 会创立一个本地开发服务器，并弹出一个浏览器窗口，地址相似这样：

http://127.0.0.1:5500/

同时也会有提醒：

你能够临时关掉这个浏览器窗口，不必放心，在没再次点击右下角的那个小按钮或关掉 VS Code 时，你仍然能够通过 http://127.0.0.1:5500/ 关上方才的网页。

请记住这个端口号：5500，因为前面会用到。当你多开 Live Srever 或其余程序占用了这个端口号时，端口号会主动 +1。

顾名思义，Live Server 是实时更新的。当你批改了我的项目的文件或代码，Live Server 会马上更新并主动刷新页面。

回到编辑器。

顺次点击: 运行图标 -> 创立 launch.json 文件：

用上面的配置笼罩掉本来的配置并保留：

{
    // 应用 IntelliSense 理解相干属性。// 悬停以查看现有属性的形容。// 欲了解更多信息，请拜访: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 调试",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

VS Code 就会在我的项目所在目录中保留相干的配置：

留神： "url" 字段中的端口号 5500 要与 Live Server 提供的端口号对应。

点击：

你会看到：

如你所愿，它曾经失常工作了。

咱们把鼠标移到图示地位，点击以打上断点：

而后点击网页上的按钮：

你会看到打上的断点胜利拦挡执行：

之后本我的项目的每次调试你只须要点击 Go Live 按钮并按下键盘 F5 键就行了。如果遇到端口号被占用的状况，能够点击“chrome 调试”旁边的齿轮来批改。

祝：

永无 BUG！