How to debug vuejs

Vuejs debugging method: 1. Use the Vue-cli command line tool to initialize the project based on the wabpack template, and change the devtool configuration to source-map; 2. Add the configuration "module" in the vue.config.js file .exports = {...}" will do.

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

How to debug vuejs? How to debug code with vuejs

Configuration debugging based on webpack

Command syntax for using the Vue-cli command line tool to initialize a project based on the wabpack template:

npm install -g @vue/cli                  # 全局安装vue-cli,版本vue3.x
vue init webpack [my-project] [app-name] # 使用vue-cli初始化一个完整的webpack项目。
cd my-project                            # 进入目录
npm install                              # 安装依赖 (package.json)
npm start                                # 启动开发环境版本

In# Change the devtool configuration in the ##config/index.js file to source-map:

module.exports = {
     devtool: 'source-map',//默认是：cheap-module-eval-source-map
}

is set to

source-map , you can generate the .map file, and the source code can be displayed when debugging in the chrome browser. The effect is as follows:

cheap- module-eval-source-map option effect:

What do the other options of devtool in webpack represent:

• eval : The document explains it very clearly. Each module is encapsulated in eval, and //# sourceURL
• source-map is added at the end: This is the most The original source-map implementation is to package the code and create a new sourcemap file at the same time, and add the //# sourceURL comment line at the end of the packaged file to tell the JS engine where the file is
• hidden -source-map: The documentation also says that it is soucremap but there are no comments. How can I find the file without comments? It seems that you can only rely on suffixes, such as xxx/bundle.js files. Some engines will try to find xxx/bundle.js.map
• inline-source-map: for each file Add the DataUrl of the sourcemap. Note that the files here are each file before packaging rather than the last one packaged. At the same time, this DataUrl is a Base64 formatted string containing the complete souremap information of a file, not a URL.
• eval-source-map: This is to replace the sourceURL of eval with the DataUrl of complete souremap information
• cheap-source-map: Does not contain column information, does not include the loader's sourcemap, (such as babel's sourcemap)
• cheap-module-source-map: does not contain column information, and the loader's sourcemap is also simplified to Only the corresponding rows are included. There is only one final sourcemap, which is generated by webpack by simplifying the sourcemap generated by the loader and then generating it again.

Reference: Some explanations of various modes of webpack sourcemap options

Configuration debugging based on vue-cli

vue- cli is based on webpack. The packaging effect is the same as above, but the configuration is different.

Add the following configuration to the

vue.config.js file:

module.exports = {
    configureWebpack: {
        devtool:'souce-map'
    }
}

vscode editor debugging

There has always been a problem with vscode debugging, debug The mode will definitely get stuck after being started for a while. I have tried many methods without success. To be continued...

Recommendation: "

The latest 5 vue.js video tutorial selections》

The above is the detailed content of How to debug vuejs. For more information, please follow other related articles on the PHP Chinese website!