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

Question

在Atom中，我可以通过打开开发人员工具（ Option + Cmd + I ）来浏览已安装的扩展程序并浏览~/.atom/packages中的JavaScript文件，例如

是否可以在VSCode中执行此操作？通过帮助 - ＆gt;打开开发人员工具后切换开发人员工具，我能找到的唯一与扩展相关的文件是图标图像：

Answer 1

1.找到 extension host 进程的 PID：

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

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

2.发送 SIGUSR1 到扩展主机 Node 进程到 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，在设备 > 发现网络目标 > 配置下添加调试地址。

5.打开新的调试目标：

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

...然后点击“允许”授予它权限：

成功！

Answer 2

您的代码未显示在主要的开发人员工具中，因为很遗憾，VSCode在称为扩展主机的单独进程中运行扩展。

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

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

Answer 3

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

调试适配器是VS Code可扩展体系结构的一部分：它们作为扩展提供。将它们与其他扩展区分开来的原因是调试适配器代码没有在扩展主机中运行，而是作为单独的独立程序运行。

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

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

您还可以查看示例扩展名wordcount以了解启动配置。

Answer 4

我希望这对您可以以这种方式设置调试环境的vs.代码扩展开发有帮助

1. 创建名为.vscode的文件夹
2. 在此文件夹中创建一个名为launch.json的json文件
3. 在json文件中，您需要此脚本

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

1. 然后按F5 vs代码将在安装扩展程序的情况下启动新窗口
2. 在新窗口中CTRL + SHIFT + P
3. 搜索“切换开发人员工具”

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