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

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

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

插件地址

在扩大商店搜寻装置：

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

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

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

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

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

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！

Quokka.js 插件

Debugger for Chrome 与 Live Server 搭配