Visual Studio Code 前端调试不完全指南

dongfangyiyu 发布于2019-08-20 16:44 / 1448人阅读

摘要：接下来的内容将从以下几方面进行展开调试前端代码调试通过启动的服务器要使用的调试功能，首先就得配置文件。调试前端代码通过调试前端代码主要依赖于一个插件，该插件主要利用所开放出来的接口来实现对其渲染的页面进行调试。

本文最初发布于我的个人博客：咀嚼之味

Visual Studio Code (以下简称 vscode) 如今已经代替 Sublime，成为前端工程师们最喜爱的代码编辑器。它作为一个大型的开源项目，不断推陈出新；社区中涌现出大量优质的插件，以支持我们更加舒服地进行开发工作。在近期的工作中，我尝试通过 vscode 来提升调试代码的幸福度，积累了一点点小心得在此与大家分享一下。

接下来的内容将从以下几方面进行展开：

launch / attach

调试前端代码

调试通过 Nodemon 启动的 Node 服务器

1. launch / attach

要使用 vscode 的调试功能，首先就得配置 .vscode/launch.json 文件。以最简单的 Node 调试配置为例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "program": "${workspaceRoot}/index.js"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 5858
        }
    ]
}

其中最重要的参数是 request ，它的取值有两种 launch 和 attach。

launch模式：由 vscode 来启动一个独立的具有 debug 模式的程序

attach模式：附加于（也可以说“监听”）一个已经启动的程序（必须已经开启 Debug 模式）

这两种截然不同的模式到底有什么具体的应用场景呢？且看后文。

2. 调试前端代码

通过 vscode 调试前端代码主要依赖于一个插件：Debugger for Chrome，该插件主要利用 Chrome 所开放出来的接口来实现对其渲染的页面进行调试。可以通过 Shift + Cmd + X 打开插件中心，搜索对应插件后直接安装。安装完成并重新加载 vscode 后，可以直接点击调试按钮并创建新的启动配置。如果你之前已经创建过启动配置了，就可以直接打开 .vscode/launch.json 进行修改。

其中调试 Chrome 页面的配置如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动一个独立的 Chrome 以调试 frontend",
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

如之前所述，通过第一个 launch 配置就能启动一个通过 vscode 调试的 Chrome。大家可以直接使用我组织好的项目 zry656565/vscode-debug-sample 进行测试，测试方法在该项目的 README 里面写得很清楚了。简要步骤概括为：

npm run frontend

启动调试配置：“启动一个独立的 Chrome 以调试 frontend”

在 frontend/index.js 中加断点

访问 http://localhost:8091/frontend/

延伸问题

使用 launch 模式调试前端代码存在一个问题，就是 vscode 会以新访客的身份打开一个新的 Chrome 进程，也就是说你之前在 Chrome 上装的插件都没法在这个页面上生效（如下图所示）。

在这种情况下 attach 模式就有它存在的意义了：对一个已经启动的 Chrome 进行监听调试。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "监听一个已经启动调试模式的 Chrome",
            "port": 9222,
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

其中 9222 是 Chrome 的调试模式推荐的端口，可以根据需要进行修改。不过目前我并没有成功实施这个设想，对此有兴趣的同学可以从下面这两个链接入手去研究一下：

Chrome DevTools Protocol Viewer

Debugger for Chrome / Attach

有一部分遇到的问题可以直接在 Debugger for Chrome 的 FAQ 中得到解答。

3. 调试通过 Nodemon 启动的 Node 服务器

如今，使用 Node 服务器开发一些中间层的服务也慢慢纳入了所谓“大前端”的范畴。而在开发 Node 服务时，我们通常要借助类似于 nodemon 这样的工具来避免频繁手动重启服务器。在这种情况下，我们又如何利用 vscode 来进行断点调试呢？先来看看示例配置文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "附加于已启动的 Node 服务器（debug模式）",
            "port": 5858,
            "restart": true
        },
        {
            "type": "node",
            "request": "attach",
            "name": "附加于已启动的 Node 服务器（inspect模式）",
            "port": 9229,
            "restart": true
        }
    ]
}

首先，为了配合 nodemon 在监听到文件修改时重启服务器，此处需要添加一个 restart 参数。同时大家可能注意到了，这里给出了两种模式，大家可能根据以下区别来选择合适自己的协议：

Runtime	"Legacy Protocol"	"Inspector Protocol"
io.js	all	no
node.js	< 8.x	>= 6.3 (Windows: >= 6.9)
Electron	all	not yet
Chakra	all	not yet

通俗来说，旧版 Node (< 6.3) 推荐使用 Legacy Protocol (--debug模式，默认 5858 端口)，而新版的 Node (>= 6.3) 推荐使用 Inspector Protocol (--inspect模式，默认 9229 端口)。

需要注意的是，在启动 nodemon 程序时，也要添加对应的参数，比如：

nodemon --debug server/app.js
nodemon --inspect server/app.js

详细的例子同样可以在 zry656565/vscode-debug-sample 中找到。

参考资料

VS Code - Debugger for Chrome - README

Debugging in VS Code

Chrome DevTools Protocol Viewer

bdspen/nodemon_vscode

Node.js Debugging in VS Code

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83123.html

Node.js 指南（入门指南）

摘要：调试指南本指南将帮助你入门调试应用程序和脚本。这样做可能会给你带来潜在的重大安全威胁，我们建议你确保适当的防火墙和访问控制措施，以防止安全风险。不再维护或记录调试协议。入门指南安装Node之后，让我们尝试构建我们的第一个Web服务器，创建名为app.js的文件，并粘贴以下代码： const http = require(http); const hostname = 127.0....

ybak 2019-08-23 13:02 评论0 收藏0
Visual Studio Code前端开发使用之旅

摘要：更好的断点控制启用禁用重新启用可以在调试视图中的断点区域设置。编辑器边距中的断点一般用红色的实心圆表示。前端开发必备插件功能性插件匹配标签，关闭对应的标签。这可以使得团队内的书写更为规范且具有一致性。 Visual Studio Code是个现下比较流行的编辑器，启动非常快，完全可以用来代替其他文本文件编辑工具。又可以用来做开发，支持各种语言，相比其他IDE，轻量级完全可配置还集成Gi...

stormjun 2019-08-21 18:46 评论0 收藏0
小技巧 - 收藏集 - 掘金

摘要：然而学习布局，你只要学习几个手机端页面自适应解决方案布局进阶版附源码示例前端掘金一年前笔者写了一篇手机端页面自适应解决方案布局，意外受到很多朋友的关注和喜欢。十分钟学会 Fiddler - 后端 - 掘金一.Fiddler介绍 Fiddler是一个http抓包改包工具，fiddle英文中有欺骗、伪造之意，与wireshark相比它更轻量级，上手简单，因为只能抓http和https数据...

A Loity 2019-08-20 17:45 评论0 收藏0
专为 Laravel 定制的 Visual Studio Code 编辑器

摘要：此扩展使用安装在已打开的工作区文件夹内的库。此扩展由开发，是一个与之间的调试适配器。它具有零依赖性，并可以极大程度地工作于任何规模的项目里。查看先前文件的拷贝或者将其与工作区版本或先前版本进行比较，查看编辑器里对活动行的更改。 showImg(https://segmentfault.com/img/remote/1460000018002818?w=1223&h=630); 嗨工匠...

Mertens 2019-07-01 11:16 评论0 收藏0
Top 10 JavaScript编辑器，你在用哪个？

摘要：在这个编辑器中，和是其中排名靠前的两个。是一个免费的轻量级编辑器和，用于和开发。对于免费的代码编辑器来说，是一个很好的选择。可以安装两个命令行实用程序，用于从启动编辑器，用于管理的软件包。对于JavaScript程序员来说，目前有很多很棒的工具可供选择。本文将会讨论10个优秀的支持javascript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。为什...

zombieda 2019-08-21 11:45 评论0 收藏0