14
使用Vscode调试 Nuxt Server 端代码
source link: https://surest.cn/archives/162/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
使用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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK