Using the debugger statement, the code debugging Nuxt
Nuxt.js is a universal application framework Vue.js, this paper describes a method of debug it.
1. Preparations
- This article assumes use
create-nuxt-appto create Nuxt project - This article applies to V2 version of Nuxt V2.6 +
In the configuration file nuxt.config.jsor nuxt.config.tsin modified as follows:
// 本代码段使用 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
}
}
What is the Source Map?
Source map is an information file, which stores the location information. That is, each location code compiled conversion, the position before conversion corresponds.
2. Add the debugger statement in your code
As shown below, the position of the break point required, add debuggerthe statement:
3. In the developer tools to debug browser
Executive order: npm run dev, developer tools and open the browser in the target page, and then refresh the page. At this time, we should have hit the breakpoint.
Then, you can use the browser's developer tools to debug, monitor variables.
PS do remember when you finished debugging, put all the debuggerstatements removed.