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

Question

我发现有关此调试体验的许多问题，但没有很好的答案。

Answer 1

这是调试浏览器内方案的配置。 1.安装Debugger for Chrome扩展程序。 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}/*"
  }
}

1. 开始站点：npm run dev（我的开发脚本默认为：“ dev”：“ nuxt”）
2. 通过F5或在调试面板中开始调试。
3. 浏览器将与您的网站一起显示，并且在此新浏览器窗口中工作时，vs代码中的断点将起作用！