Vue + VScode breakpoint debugging detail

preface

• Not out of the box, only for curiosity satisfaction, complex project custom breakpoint configuration, the next project does not ask for people do not immediately debug breakpoint
• It involves a wide range of areas, requires a certain amount of experience, and is not too deep (I also dish)
• If you’re searching everywhere and you can’t find a solution: VSCode can’t connect to the page, the breakpoint is not verified (grey hollow circle), the breakpoint is drifting to another line, the breakpoint is actually broken in the wrong place, or the breakpoint is skipped to a strange place, then this might be the solution

How to make a breakpoint

As shown in Figure ↑, the interrupt point in the panel of direct Sources.

If you are at the blank line break point on line 6, you see an animation showing the break point slipping from line 6 to line 7. The essence of vsCode’s Debugger extension is to communicate with this and feed back the results to its own UI.

So if you see a break point in VISUAL studio Code that doesn’t match the display, that’s exactly what the browser is doing, but visual studio code lacks transition animations. It’s not a bug in visual Studio Code, it’s a setting.

SourceMap

Ruan Yifeng teacher explains: JavaScript Source Map detailed explanation

In simple terms, SourceMap makes compressed/translated final versions of various files correspond to original uncompressed files. So the breakpoint logic is easy to understand:

1. Provide the uncompressed source code and SourceMap file to the browser
2. When the browser runs the final version of JS code, it finds the corresponding source code through SourceMap. If the corresponding source code is marked with a breakpoint by the user, it will break

At the same time:

1. Only after you open the developer tool on F12 will the browser load the SourceMap file indicated by the final version of the code (so there is little impact on the loading speed of ordinary users), and then load the source code according to the SourceMap file. File ↓ as shown in the following figure

2. In an online environment, it is possible to put the SourceMap file on the server, but it is not possible to put the source code on the server as well. That is, SourceMap points to the source file as/a.js, the browser loadsProtocol :// domain name /a.jsApparently the file is not available online. However, we can use the browser Sources->Filesystem to add folder mapping, that is, mapping to the source code of the local project for breakpoint debugging. Of course, the browser window will give the corresponding UI feedback ↓3. Depending on the quality of the SourceMap (for example, there are many ways to generate webPack with different levels of detail), there may be some lack of mapping information, modules merge to point to the same source location, etc

Configure SourceMap in vue

Set the devTool :’source-map’ option in the Webpack configuration. You may be a @vue/ CLI initialization project, a project built using the VUE template of WebPack, or a project reorganized by the project leader. Here, please learn which configuration webPack.

Note: This devtool:’source-map’ may be required, other ways of generating SourceMap are not suitable for breakpoints and are suitable for analysis, otherwise there are all kinds of strange behaviors due to the above reasons.

Local server provided by WebPack

You should see this structure in the most complete SourceMap Settings1. 1webpack://This is the webPack custom Web application layer protocol, withhttp://andhttps://Same thing.

2. In this custom application-layer protocol, the domain name (similar to FTP) can be omittedWebpack: / / / path. In addition.It’s really just a folderThe name, does not represent the current directory (in HTTP protocolhttps://juejin.im/timelineandhttps://juejin.im/./timelineOne thing)

3. As shown in figure,webpack:///srcIs usually our original vue file,webpack:///./srcVue, PNG and other resources after partial processing

4. Webpack local server puts compiled resources directly in memory, you can’t see any compiled local files. So you might want to build it and see what we end up withapp.jsAnd hisapp.js.mapWhat are some ↓

(1)app.jsThe last line in the file is going to be//# sourceMappingURL=app.js.mapWhen we open the developer tool, the browser loads the map file.

(2)app.js.mapIt should read something like this:

  "version":3,
  "sources":[
    "webpack:///src/app.js",
    "webpack:///./src/app.js",
    ...
  ]
Copy the code

SourceMap maps compiled code to the corresponding locations of several JS source files indicated in sources. (3) The browser can be regarded as a powerful IDE. At this point, we can find these files in the Source panel of the developer tools and debug them with breakpoints

Vscode in debugging

Essentially, vscode debugging is to connect to the browser to get debugging information through the debugging extension, while at the same time making it feel like we are using the above browser features through our UI and interactions. You need to install Debugger for Chrome.

Chrome requires preparation

This is to enable chrome to open the 9222 debug port. Our vscode extension will use this port to get the debugging information provided by the browser. The following VSCode will attach, so start the browser, run your vue project locally, and open the target page.

Normally, if Chrome is already running when you start debugging with a launch config, then the new instance won’t start in remote debugging mode.

Note that if you’ve already started Chrome regularly, then starting another Chrome will not normally start in remote debug mode. Therefore, attach mode, please close all Instances of Chrome, and start again in remote debug mode (as the above parameters, you can directly visit http://localhost:9222 to see if there is any response)

Mandatory parameters

• type – the type of debugger to use for this launch configuration. Every installed debug extension introduces a type: node for the built-in Node debugger, for example, Each debug extension registers a type with vscode, and vscode notifies different extensions to work based on the type value you set.
• Request – The request type of this launch configuration. Currently, launch and attach are supported. In our case, launch means launch the browser to open the target page and attach; Attach is a direct connection to the target page in the current browser.)
• Name-the reader-friendly name to appear in the Debug launch configuration drop-down. Debugging is actually used to switch between different configurations.)

Source: was Debugging

This parameter is optional

The optional parameters are not uniform. For details, see the description of each extension. Some of the parameters supported by most extensions are described in the official website, not repeated. Here are the usual parameters for this extension in attach mode:

• Url: On a ‘launch’ config, it will launch Chrome at this URL. If you are in launch mode, the browser will launch directly to the page. Then attach the page, which is the same as launching developer tools on the page.)
• urlFilter: On an ‘attach’ config, or a ‘launch’ config with no ‘url’ set, search for a page with this url and attach to it. It can also contain wildcards, for example, “localhost:*/app” will match either “http://localhost:123/app” or “http://localhost:456/app”, But not “StackOverflow.com “.
• sourceMaps: By default, the adapter will use sourcemaps and your original sources whenever possible. You can disable this by setting sourceMaps To false.(Defaulttrue. Add directories to Filesystem as mentioned above.
• WebRoot: set${webRoot}The variable.${webRoot}Is the variable used for the default setting of the following two parameters to make this parameter meaningful
• pathMapping: This property takes a mapping of URL paths to local paths, to give you more flexibility in how URLs are resolved to local files. "webRoot": "${workspaceFolder}" is just shorthand for a pathMapping like { "/": "${workspaceFolder}"}(Actually it does the same thing as the following, but the difference is the human “semantic” difference and the default setting. Regular file mapping uses this, map file mapping uses the following, but there is no strict distinction.)
• SourceMapPathOverrides: More on that later. How to map the current directory to the Filesystem

Source: vscode – chrome – the debug

variable

• ${workspaceFolder} – the path of the folder opened in VS Code
• ${workspaceFolderBasename} – the name of the folder opened in VS Code without any slashes (/)
• ${file} – the current opened file
• ${relativeFile} – the current opened file relative to workspaceFolder
• ${fileBasename} – the current opened file’s basename
• ${fileBasenameNoExtension} – the current opened file’s basename with no file extension
• ${fileDirname} – the current opened file’s dirname
• ${fileExtname} – the current opened file’s extension
• ${cwd} – the task runner’s current working directory on startup
• ${lineNumber} – the current selected line number in the active file
• ${selectedText} – the current selected text in the active file
• ${execPath} – the path to the running VS Code executable
• ${defaultBuildTask} – the name of the default build task

例 句 : This point in to see his example can understand, not translation.

sourceMapPathOverrides

Set how to map. Here are its default Settings

// Note: These are the mappings that are included by default out of the box, with examples of how they could be resolved in different scenarios. These are not mappings that would make sense together in one project. // webRoot = /Users/me/project "sourceMapPathOverrides": { "webpack:///./~/*": "${webRoot}/node_modules/*", // Example: "webpack:///./~/querystring/index.js" -> "/Users/me/project/node_modules/querystring/index.js" "webpack:///./*": "${webRoot}/*", // Example: "webpack:///./src/app.js" -> "/Users/me/project/src/app.js", "webpack:///*": "*", // Example: "webpack:///project/app.ts" -> "/project/app.ts" "webpack:///src/*": "${webRoot}/*", // Example: "Webpack: / / / SRC/app. Js" - > "/ Users/me/project/app. Js" "meteor: / / 💻 app / *" : "${webRoot} / * / / Example: "Meteor: / / 💻 app/main ts" - > "/ Users/me/project/main ts"}Copy the code

Where ${webRoot} is a variable of our custom value. All you need to do is make sure that the files under webpack:/// are mapped to our development directory files correctly. Note: Once the sourceMapPathOverrides is set, the original default setting is invalid. When there are multiple matches, the subsequent matches overwrite the previous ones.

conclusion

Made a lot of, in fact, is such a few meanings: 2. To create and debug vscode, in launch.json, click “Add Configuration” in the lower right corner and change the port to the port 3 you started. Set the URL or urlFilter parameter (Attach requires that you have the url page open. It doesn’t make much difference to launch the page automatically. Set the webRoot parameter because ${webRoot} is used in the default sourceMapPathOverrides 5. After attaching the target page, the bottom bar of vscode will change color. It is ready. 6. The most common error is that webRoot and sourceMapPathOverrides do not match. In general, as long as your vue project has a SRC folder with main.js and app.vue in the working directory, the minimum configuration is only 6 parameters:

{
    "type": "chrome",
    "request": "attach",
    "name": "hello world",
    "port": 9222,
    "webRoot": "${workspaceFolder}/src",
    "url": "http://localhost:8080"
}
Copy the code