使用Vscode调试 Nuxt Server 端代码
前情提要: 由于近期一些推广项目的原因,便使用nuxt来快速开发了一个前端项目,使用过程中,变发现和之前纯vue开发模式不尽相同,除了新增部分语法之外,包括很多配置甚是不清晰
这里主要记录一下 使用vscode
来进行调试nuxt服务, 主要是针对 asyncData
快速开始
vscode插件安装
vscode中搜索安装: Debugger for Chrome
初始化
这里的 .vscode/launch.json
使用默认的即可
配置相关配置
在 nuxt.config.js
中加入
extend(config, ctx) {
const path = require('path');
config.devtool = '#source-map'
// 以下看着来吧
// Run ESLint on save
// if (ctx.isDev && ctx.isClient) {
// if (ctx.isDev && ctx.isClient) {
// config.devtool = '#source-map'
// }
// }
}
}
开始debug
1、点击运行调试 运行 npm run dev
2、启动后检查debug
检查debug相关文件是否正常
<node_internals>
这个文件是核心,请注意,如果缺失这个文件,可以忽略下面的步骤了
第一次调试请勾选这两项
如果你问我为什么,那我也不知道,暂时没深究,按我来就行
3、debug 对应文件行数
移动到边上,点击小红点
4、最最最重要的一步来了
i: npm run 之前,请关闭 这两项 (Caught Exceptions、Uncaught Exceptions)
ii: 启动后,打开地址
iii: 打开 Caught Exceptions
iiii: 已知按下一步,即可进入到对应位置
iiiii: 进入debug
如 gif
所示
常见问题
- 下一步在哪里
本文由 邓尘锋 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Mar 23, 2021 at 09:23 am