你之前一直只用控制台调试吗?你是否对其输出的顺序头疼不已?用很长时间才发现丢失了对象?让我们面对现实...几乎每个人都不得不重复这种方法,包括我自己。

console.log 不是且永远不是调试的银弹

调试器是一个伴随我们多年但因为种种原因人们不再Node世界中使用。我们来自NodeJS,VSCode和Jetbrains的朋友创建了大量工具,帮助我们“停止”应用程序,并在那个时刻获得应用程序的当前状态。NuxtJS,另一方面,尝试启动和运行调试器一直很痛苦,难以搞定,因此人们就倾向于放弃并开始使用console.log。

好吧,恐惧不是我的朋友。事实上我有一个快速,安全并且好用的方案来解决你所有的问题!其实,NuxtJS的调试比大家想象中的更容易,我想让你了解它,因为几乎没有关于这个主题的文档,希望这让你的生活更轻松。

项目配置

打开你的nuxt.config.js并转到build属性,因为我们要修改extend方法。

extend(config, ctx) {
      // Added Line
      config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'

      // 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是Webpack的一个属性,它允许我们配置如何生成JS的SourceMap(参考

eval-source-map是一个与行号完全匹配的SourceMap,这有助于我们在客户端进行调试。(更多信息

inline-source-map与上一个非常相似,但有一个例外,即在bundle中添加为DataUrl。 它帮助我们在服务器中调试我们的NuxtJS应用程序。 (更多信息

注意:判断开发环境,不建议在生产中使用它。

使用nodemon运行NodeJS调试器

我们将使用一个名为nodemon的优秀开发工具,它基本上让我们可以观察项目中的任何变化并自动重启服务器。

要使用nodemon运行NodeJS调试器,只需添加标志--inspector即可!

{
  "scripts": {
    "dev": "nodemon --inspect node_modules/.bin/nuxt",
  }
}

WebStorm

配置服务端

正常配置npm run dev项目即可

配置客户端

添加 Javascript Debug,URL应该是Nuxt将运行的URL,但我建议使用Chrome并启用“确保在加载脚本时检测到断点”选项并保存!

如何同时运行

首先以调试模式🐞运行服务端,项目正确加载后,选择客户端运行配置并单击相同的图标。它应该打开一个新的chrome实例。

现在我们完全准备好调试我们的程序了!🎉

原文地址:Nuxt.js Debugging with WebStorm