motivation

Every application, big or small, needs to understand how programs fail. When we write a program that doesn’t follow the logic we wrote, we go through the problem step by step. In normal development we might use console.log for troubleshooting, but now we can debug projects with vscode breakpoints.

A prerequisite for

  • Browser:Chrome
  • Editor:VS Code
  • Vscode extension:Debugger for Chrome
  • Project construction:Vue CLI 3

Browser breakpoint debugging

Before you can debug your Vue components from Chrome, you need to update the WebPack configuration to build the Source Map. After doing this, our browser has the opportunity to map the code in a compressed file back to its source file. This ensures that you can debug within an application, even if your resources have been optimized by WebPack.

Source Map can generate a map file of source code. Map file allows you to package compressed code to point back to source code.

Vue-cli3 Sets the source map

Use vue-cli3 to build the project, configure the corresponding Devtool in the project root directory vue.config.js file, collective DevTool configuration details can refer to the webpack article I wrote before

//vue.config.js
module.exports = {
  ...
  configureWebpack: {
	devtool: 'source-map'}}Copy the code

After NPM runs the project, you can debug the breakpoints on the console in Chrome F12

Note: Devtool is set to eval-cheap-module-source-map, which compiles faster than source-map. Therefore, it is recommended to set eval-cheap-module-source-map in the development environment and cheap-module-source-map in the build environment. See the Webpack documentation for more configurations

Vscode breakpoint debugging

* Step 1: InstallDebugger for ChromeThe plug-in

* Step 2: Configurelaunch.jsonfile

** Note :** URL parameter configuration must be consistent with vue. Config. js devServer

Json {// Use IntelliSense to learn about the properties. // Hover to view descriptions of existing properties. / / for more information, please visit: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0"."configurations": [{"type": "chrome"// Debug environment"request": "launch", // Debug mode: startup type"name": "erp_admin_break"// Customize the debug name"url": "http://localhost:3000"// The debugging service address must correspond to devServer"webRoot": "${workspaceFolder}/src"// The root path of debugging is in the SRC service directory"breakOnLoad": true."sourceMapPathOverrides": {// specify generatedsourceMap path, refer to the. And SRC directories generated by the browser"webpack:///src/*": "${webRoot}/ *"."webpack:///./src/*": "${webRoot}/ *"}}}]Copy the code

For details about Debugging parameters of Vscode, see the official documents

Breakpoint debug project

Start project NPM Run serve,F5 open debugging,

vscode
console.log

Thank you for support

Because many friends want to see the breakpoint configuration, so write a configuration manual. If there are mistakes, hope to guide 😄 study together. Thanks again for reading! The passing can pay attention to a wave of praise ♥♥