如何调试已安装的 VSCode 扩展？答案

【问题标题】：How can I debug installed VSCode extensions?如何调试已安装的 VSCode 扩展？
【发布时间】：2016-12-24 12:54:54
【问题描述】：

在 Atom 中，我可以通过打开开发工具 (Option+Cmd+I) 并浏览来调试已安装的扩展~/.atom/packages 中的 JavaScript 文件，例如

在 VSCode 中可以做到这一点吗？通过 Help -> Toggle Developer Tools 打开开发者工具后，我能找到的唯一与扩展相关的文件是图标图像：

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

我希望这对你在 vs 代码扩展开发中有所帮助你可以通过这种方式设置调试环境

创建名为 .vscode 的文件夹
在此文件夹中创建名为 launch.json 的 json 文件
在json文件中你需要这个脚本

    {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Extension",
                "type": "extensionHost",
                "request": "launch",
                "runtimeExecutable": "${execPath}",
                "args": [
                    "--extensionDevelopmentPath=${workspaceFolder}"
                ]
            }
        ]
    }

然后你按 F5 VS 代码将启动安装了你的扩展程序的新窗口
在新窗口中CTRL+SHIFT+P
搜索“切换开发者工具”

如果扩展程序不适合您，您只需运行步骤 5 和 6

【讨论】：

这是不回答 OP 的问题，即“我如何调试 已安装的 扩展”，而不是我正在开发的问题。

【解决方案2】：

1。找到extension host进程的PID：

$ PID=$(pgrep -f "^/Applications/Visual Studio Code\.app/.*--type=extensionHost")
$ echo $PID
35791

参数-f 告诉pgrep 将模式与完整的进程参数字符串进行匹配，而不仅仅是进程名称。

2。向扩展主机Node进程发送SIGUSR1到tell it to start listening for debugger connections：

$ kill -SIGUSR1 $PID

（这不会产生任何输出。）

3。使用`lsof`查找进程开始监听的端口：

$ lsof -p $PID -a -i4tcp
COMMAND     PID        USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Code\x20H 35791 tim.vergenz   58u  IPv4 0x8af67df8a9aa26a8      0t0  TCP localhost:63767 (LISTEN)

论据解释：

-p 表示按 PID 过滤
-i4tcp 表示按 Internet 地址过滤（4tcp 表示仅 IPv4 / tcp 协议）
中间的-a 通过 AND 而不是默认的 OR 组合了两个过滤器

在“NAME”列中，您将找到 VS Code 扩展主机进程正在侦听的主机和端口——即在上面的示例中，localhost:63767。

4。打开 Chrome Devtools，在 Devices > Discover network targets > Configure 下添加调试地址。

5。打开新的调试目标：

您可能需要手动将~/.vscode/extensions 添加到您的工作区以浏览文件并添加断点：

...并单击“允许”授予其权限：

成功了！

【讨论】：

很棒的答案！有没有办法检查扩展生成的网络请求？在发出网络请求后，我从扩展程序中收到一条无用的错误消息（“无效的时间值”，没有其他信息）。我希望我可以使用这种方法来检查扩展程序发出的网络请求，但检查器上似乎没有“网络”选项卡？
@Monkpit 我不知道有什么方法可以专门调试 VS Code 扩展网络请求，除了通常通过 http/s 代理对 Node / 其他进程执行相同操作的方法。我从谷歌搜索“nodejs 进程检查网络请求”中找到的一些参考资料（没有亲自测试过）：httptoolkit.tech/javascript 和 stackoverflow.com/questions/28873332/…

【解决方案3】：

您的代码没有显示在主要的开发人员工具中，因为不幸的是 VSCode 在名为 Extension Host 的单独进程中运行扩展。

您可以转到帮助> 进程资源管理器 查找扩展主机进程ID，然后kill -sigusr1 它打开它的调试器（就像任何节点进程一样）。然后在 Chrome 中，转到chrome://inspect，您应该会看到该过程（它看起来不太容易识别，名称类似于/private/var/folders/f3/zmhpprp15zxfd1s3fpp3prm80000gn/T/AppTranslocation/C0D80599-1ECA-4802-A110-A1…）

我不能 100% 确定该调试器中是否所有扩展代码都可用，因为它具有子进程，但到目前为止，我已经能够在一些已安装的扩展中设置断点。

【讨论】：

这些说明很难理解。 “在 Chrome 中”是什么意思？ VSCode 是一个完全独立的进程，我如何进入它的chrome://inspect 页面？
另外：chrome://inspect 有很多标签。我需要哪一个？
抱歉，我没有收到关于此的通知，Chrome 有一个嵌入式 V8 javascript 引擎和一个嵌入式 V8 调试器（Chrome 检查器）。由于 node 在后台也使用 V8，如果 node 进程正在侦听端口上的调试连接，Chrome 检查器可以附加到远程节点进程（即使在不同的机器上！），默认为 9229。
我有点困惑你所说的选项卡是什么意思，但通常当我将节点进程置于调试模式时，它会以某种方式显示在可以调试的进程列表中，然后我单击“检查”该过程的链接
这就是chrome://inspect 的样子：ibb.co/W60bxsb 我已经向 extensionHost 进程发送了 SIGUSR1，但我现在该去哪里？

【解决方案4】：

由于how VS Code implements its debugging UI and debug protocol，这是不可能的（但我不能 100% 确定这一点）。

调试适配器是 VS Code 可扩展架构的一部分：它们作为扩展提供。它们与其他扩展的不同之处在于调试适配器代码不在扩展主机中运行，而是作为单独的独立程序运行。

您可以在调试器思想下轻松运行扩展。您需要扩展源文件和调试器启动配置。

您可以在VS Code documentation 中找到有关运行和调试扩展的更多信息。

您还可以查看示例扩展 wordcount 以获取启动配置。

【讨论】：

1。找到extension host进程的PID：

2。向扩展主机Node进程发送SIGUSR1到tell it to start listening for debugger connections：

3。使用lsof查找进程开始监听的端口：

4。打开 Chrome Devtools，在 Devices > Discover network targets > Configure 下添加调试地址。

5。打开新的调试目标：

成功了！

3。使用`lsof`查找进程开始监听的端口：