使用 debugger 声明，调试 Nuxt 代码

Nuxt.js 是 Vue.js 的一款通用应用程序框架，本文介绍一种对其 debug 的方法。

1. 准备工作

  • 本文假设使用 create-nuxt-app 创建 Nuxt 项目
  • 本文适用于 Nuxt V2.6+ 的 V2 版本

在配置文件 nuxt.config.js 或 nuxt.config.ts 中，修改如下：

// 本代码段使用 TypeScript 写法，JavaScript 类似
extend(config, ctx) {
  // Run ESLint on save
  if (ctx.isDev && ctx.isClient) {
    config.module!.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })
    config.devtool = '#source-map' // 添加此行代码
    // 表示在开发模式的 client 端启用 source-map
  }
}

什么是 Source Map？

Source map 就是一个信息文件，里面储存着位置信息。即，编译转换后的代码的每一个位置，所对应的转换前的位置。

2. 在代码中添加 debugger 声明

如下图所示，在需要打断点的位置，添加 debugger 声明：
debugger

3. 在浏览器的开发者工具中调试

执行命令：npm run dev，并在目标页面开启浏览器的开发者工具，之后刷新页面。这时，断点应该已经命中了。

命中断点

接下来，就可以使用浏览器的开发者工具进行调试、监视变量了。

P.S. 千万记得当你调试完毕之后，要把所有的 debugger 语句移除。

参考链接

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue