如何在 VSCode 中设置 pathMapping 以调试 Snowpack 应用程序

Posted

技术标签:

【中文标题】如何在 VSCode 中设置 pathMapping 以调试 Snowpack 应用程序【英文标题】:How to setup pathMapping in VSCode to debug a Snowpack application 【发布时间】:2021-05-19 03:06:13 【问题描述】:

我正在评估 Snowpack 以构建我的 javascript 项目。但是,VSCode 和 Debugger for Chrome 扩展名无法将开发服务器上的脚本与本地源文件匹配。因此,断点不起作用。我没有使用任何源映射,因为我没有捆绑/转换任何东西,只是使用香草 ES 模块。

我正在使用以下模板:https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-lit-element

项目的简化目录布局为:

public/
  index.html
src/
  index.js 

现在,当我启动 Snowpack 开发服务器时,它使用以下布局提供文件,这是完全不同的:

index.html
dist/
  index.js

我在 VSCode 中尝试了以下启动配置,但它不起作用,即它无法匹配 javascript 文件:


  "name": "Launch localhost",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:8080/",
  "webRoot": "$workspaceFolder/public",
  "pathMapping": 
    "/dist": "$workspaceFolder/src"
  

pathMapping 属性的文档非常少,我想知道它是否有效。

有什么想法吗?

更新:

lit-element 示例似乎使用 babel 进行转译,但即使禁用转译,问题仍然存在。这更像是 VSCode 问题,而不是 Snowpack 问题。

【问题讨论】:

听起来 snowpack 仍在进行一些转译或捆绑。在雪包配置中启用源映射应该可以解决您的问题。 【参考方案1】:

要创建您想要的输出,请为 snowpack 配置配置挂载选项,试验此配置以获得您需要的结果。

  mount: 
   public: '/',
   src: '/src',
  ,

【讨论】:

谢谢,有趣的解决方法。但是,VSCode 仍然无法匹配来源。当我向源代码添加“调试器”语句时,断点面板显示文件是:app-root.js 位于“/localhost:8080/src”(没有 http:// !)。当我向本地源文件添加断点(红色圆圈)时,它是“src”处的 app-root.js。

以上是关于如何在 VSCode 中设置 pathMapping 以调试 Snowpack 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

如何在 VSCode 中设置 pathMapping 以调试 Snowpack 应用程序

在 vscode 中设置扩展的图标或徽标

VSCode中设置断点调试PHP

在 VSCode 扩展中设置文本文档的语言

在 vscode JavaScript 中设置全局声明

如何在 Visual Studio Code 1.5.2 中设置 jsx 语法高亮和 Intellisense?