SourceMaps的VSCode Gatsy调试错误

Posted

技术标签:

【中文标题】SourceMaps的VSCode Gatsy调试错误【英文标题】:VSCode Gatsy Debug Error with SourceMaps 【发布时间】:2018-11-12 18:19:34 【问题描述】:

我试图设置 VSCode 以便能够调试 Gatsby 代码。 我是 javascript sourcemaps 的新手,这似乎是问题的原因。

我在启动时看到以下错误:

Cannot launch program "c:\Gatsby\myprogram\node_modules\.bin\gatsby" because corresponding Javascript cannot be found.

我验证了错误中文件 gatsby 的路径存在。

这是我用于 launch.json 的文件:

  "version": "0.2.0",
  "configurations": [
    
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "protocol": "inspector",
    "program": "$workspaceRoot/node_modules/.bin/gatsby",
    "args": ["develop", "-p", "7777"],
    "stopOnEntry": false,
    "cwd": "$workspaceRoot",
    "preLaunchTask": null,
    "runtimeExecutable": null,
    "runtimeArgs": [
      "--nolazy"
    ],
    "env": 
      "NODE_ENV": "development",
      "DEBUG": "gatsby:*"
    ,
    "console": "integratedTerminal",
    "sourceMaps": true,
    "outFiles": []
   
  ]

【问题讨论】:

【参考方案1】:

我能够通过使用全局安装的 gatsby-cli 的 gatsby 而不是 node_modules 中的 gatsby 来完成这项工作。所以:

npm install --global gatsby-cli

然后(因为我在nvm下使用node/npm等):

    
        "type": "node",
        "request": "launch",
        "name": "Launch 'gatsby develop'",
        "protocol": "inspector",
        "program": "$env:HOME/.nvm/versions/node/v8.11.3/bin/gatsby",
        "args": [
            "develop"
        ],
        "stopOnEntry": false,
        "cwd": "$workspaceRoot",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": 
            "NODE_ENV": "development",
            "DEBUG": "gatsby:*"
        ,
        "console": "integratedTerminal",
        "sourceMaps": true,
        "outFiles": []
    

为我工作。 不过,我使用的是 OSX,您的 Windows 设置可能需要进行更多更改。

另外:为了在 VSCode 中使用 nvm 下的节点,我使用了这里的默认别名方法:Visual Studio Code to use node version specified by NVM

【讨论】:

以上是关于SourceMaps的VSCode Gatsy调试错误的主要内容,如果未能解决你的问题,请参考以下文章

gulp常用插件之gulp-sourcemaps使用

webpack使用三

实战webpack系列03

逐行调试 CoffeeScript

在 vscode 中 debugger 调试

vscode怎么调试c语言 调试步骤