如何通过Google Chrome扩展程序在浏览器脚本中调试Nuxt

Question

我发现很多关于这种调试经验的问题而没有好的答案。

Answer 1

这是我在调试浏览器内情景的配置。 1.安装适用于Chrome扩展程序的Debugger。 2.在nuxt.config.js中添加配置：

extend(cfg, ctx) {
  cfg.devtool = 'source-map';
}

3.添加启动配置：

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug Front in Chrome",
  "url": "http://localhost:YourSitePortHere",
  "webRoot": "${workspaceFolder}",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*"
  }
}

4. 启动站点：npm run dev（我的开发脚本是默认的：“dev”：“nuxt”）
5. 通过F5或调试面板启动调试。
6. 浏览器将与您的站点一起显示，并且当您在这个新的浏览器窗口中工作时，vs代码中的断点将起作用！