使用 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 声明：

---

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

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

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

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

---

参考链接

• Nuxt Docs - The build Property
• Vue.js CookBook - Debugging in VS Code
• JavaScript Source Map 详解