Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to debug vuejs". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to debug vuejs.

Vuejs debugging methods: 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.exports = {...}" in the vue.config.js file.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How to debug vuejs? How vuejs debugs code

Configuration debugging based on webpack

The command syntax for initializing a project based on the wabpack template using the Vue-cli command line tool:

Npm install-g @ vue/cli # installs vue-cli globally, and the version vue3.xvue init webpack [my-project] [app-name] # initializes a complete webpack project using vue-cli. Cd my-project # enter the directory npm install # install dependency (package.json) npm start # launch the development environment version

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

Module.exports = {devtool: 'source-map',// defaults to: cheap-module-eval-source-map}

Set to source-map, the .map file can be generated, 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: it is clearly explained in the documentation that each module is wrapped in eval and / / # sourceURL is added later.

Source-map: this is the original source-map implementation, which involves packaging the code and creating a new sourcemap file, and adding / / # sourceURL comment lines at the end of the packaged file to tell the JS engine where the file is

Hidden-source-map: it is also said in the document that it is soucremap but without comments, how can you find a file without comments? It seems that we can only rely on suffixes, such as xxx/bundle.js files, and some engines will try to find xxx/bundle.js.map.

Inline-source-map: add the DataUrl of sourcemap to each file, note that the file here is each file before it is packaged, not the last one, and that the 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 contain loader's sourcemap, (such as babel's sourcemap)

Cheap-module-source-map: contains no column information, and the sourcemap of loader is simplified to contain only the corresponding rows. There is only one final sourcemap, which webpack simplifies the sourcemap generated by loader and then generates it again.

Configuration debugging based on vue-cli

Vue-cli is based on webpack packaging, the effect is the same as above, but the configuration is not the same.

Add the following configuration to the vue.config.js file:

Module.exports = {configureWebpack: {devtool:'souce-map'}} vscode editor debugging

Vscode debugging has been a problem, debug mode has been started for a while, must be stuck, try many ways have not been successful, to be continued.

Thank you for your reading, the above is the content of "how to debug vuejs", after the study of this article, I believe you have a deeper understanding of how to debug vuejs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.