使用Vscode调试 Nuxt Server 端代码

使用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所示

在这里插入图片描述

图片描述...

常见问题

  • 下一步在哪里

    图片描述...

原文首发: https://surest.cn/archives/162/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值