Front-end Debug various collection-Breakpoint chapter

Front-end Debugging breakpoints Preface

• When I first knew this kind of thing, I was also stunned, incredibly still has this operation, is really powerful to have no friend, since then fell in love with debugging, on time work
• Countless times through debugging the problem-solving experience tells me that debugging is definitely one of the most important skills that developers should master. Debugging can help us to locate the problem to solve the problem, each solve a problem, the experience value will go up. After the experience to solve a lot of problems, and can correctly avoid the mined area of the year, reduce the number of recidivism, save time to solve problems, greatly improve the development efficiency and coding level. I think this should be a very important part of mastering the debugging skills, not just to solve the problem.
• Have you ever encountered any of the following:
  1. The button's Click event does not work and the Click button does not respond. Download the user's demo run, click the login error page does not jump
  2. The data is populated to the page after it is requested, but the page does not display data
  3. A request is always canceled
  4. Clearly according to the people's tutorial to write, the code is exactly the same, but not the same effect as the tutorial
  5. Inadvertently write a typo, the casing part, run error, but look at the code can not see the problem
  6. According to the document, the console always error, and errors occur in the components used, not their own code
  7. And so on, there are many types of questions
• The above problems can be solved by debugging, only need to master the relevant debugging skills can be

Breakpoint

• The first step in debugging is to break the point. The purpose of the breakpoint is to stop the code when it is running where you want to start debugging. At this point, you can view the current context information, such as global variables, local variable values, whether the input of the function is correct, the return value of the request is normal, and so on. Use this to determine where the problem occurs, and how to remedy it
• For example, in Google Chrome (version 69), the editor is Vscode (version 1.26.1)

Breakpoint Mode One

• This approach is more commonly used in the browser development tool to find the corresponding source code in the script node inside the line breakpoint

• First press F12 on the browser page to open the development tool, click on the Sources option, the default is to display the Page label. Then find the source files that need to be debugged
• If it is a normal HTML page, then the source code is generally under the corresponding domain name. If the webpack page is processed, and the source code mapping is turned on, the source code is webpack:// below. You can open the search box by using the shortcut key to ctrl+ o enter the filename search source
• Just find the source, add a breakpoint to the left of the script code display area, and the development tool will go into debug state as soon as the code runs to the breakpoint
• Note : Some of the number lines are gray and are not breakpoints. Sometimes clicking on a 15-line breakpoint selects 14 rows, because the browser actually executes the line of code that you see that is not the line you are seeing, either optimized or passed some kind of conversion. In other cases, adding a breakpoint to a line jumps to another page and hits a row with the background color yellow and the file name VM beginning. The above situation, most of all because the browser display version of the source code, and the actual source files inconsistent, only need to refresh the page, to ensure that the source of the display is the latest can

• Tip 1: Sometimes the source code through the hardships can not find where, this time will need to sacrifice console.log . In the line of code that needs debugging before adding console.log(666) , and then run once, to the console to see the results output, click on the right link will automatically jump to the source code, so you can directly breakpoint

• Tip 2: For example, Filesystem after adding a folder to the work path, you will be prompted after the selection, click Accept. If your Google browser does not have this thing, please upgrade the version, or not, please ignore this paragraph. Although I do not know when this is out of the function, but I accidentally found that it can be edited after really saved to the file, this can be used as an editor.

Breakpoint Mode Two

• This is very rough, in the need to debug the place with the debugger keyword, the code runs to the time will automatically stop, into the debug mode
• This method does not require a manual breakpoint, but the trouble is that you may not have to debug it once, but every time you run there it will stop and you must remove the code.
• This thing I in a lot of sites also see someone use, do not want to let others convenient view to the site source code, an open control console on the automatic debugger

Breakpoint Mode Three

• This method is simply attributed to the editor breakpoint debugging, is the need to connect the debugger (can be a remote debugger) or additional processes, and then receive debugging information, you can debug the source code in the editor
• Debug Vue.js in Chrome and VS code: This method is the source. This approach uses VSCode the "Debugger for Chrome" extension, recommended . Feeling is the first way above, just map the source code to the local source code, and display on the editor. A brief introduction to the following steps:
  1. Webpack Configuration: webpack Configure add devtool：'source-map' open source mapping.

// Vue CLI 3.Xmodule.exports = {  configureWebpack: {    devtool: "source-map"  }};

1. Debug Configuration: Press F5 in Vscode, the input box for the selection environment will appear (if launch.json it does not appear), select Chrome. The launch.json configuration in is as follows. Which url is to open the browser after access to the address, webRoot is app.js , main.js such as the directory of portal files, the following two are experimental features (advanced features, mouse hover on the above will be described)

{    "version": "0.2.0",    "configurations": [        {            "type": "chrome",            "request": "launch",            "name": "启动 Chrome 并打开 localhost",            "url": "http://localhost:8080",            "webRoot": "${workspaceFolder}/src",            "breakOnLoad": true,            "sourceMapPathOverrides": {                "webpack:///src/*": "${webRoot}/*"            }        }    ]}

1. Debug: A breakpoint on the line that you want to debug in the Vue file component, npm start run the project through a command, or one of npm dev npm serve the commands (which is the node that can be viewed specifically package.json scripts )
2. Press F5 start to debug, all normal words will hit your breakpoint
3. Note : If you do not hit the breakpoint and your breakpoints are not red dots, you need a SAO operation to VSCode debug on breakpoints: Open the Google Chrome Developer tool source Breakpoint debugging once (or add keyword debugger trigger debugging, refer to the above method one), run to the breakpoint VSCodewill jump out of a cached source page to debug. In addition, based on the above situation, if the debug display source code is different from the true source code, VSCode then the source map is incorrect, the above configuration is webRoot not correct. Even if it is not correct, through this Sao operation can in VSCode debugging, is not too elegant, the effect is as follows:

• Remote Debugging Chrome
  • The way to attach a browser, different from the previous one, to refresh the page after modifying the code to re-breakpoint debugging
  • Pending update

Breakpoint Mode Four

• This approach is categorized as debug Nodejs, which can be debugged webpack , or a node instance running back-end.
• In this way, when you start node, add--inspect, turn on the V8 inspector function byWebSocketsCommunication, debugger connection to debug, more debugger reference official documentation. Here are a few examples:
  • Debugging vue.config.js , you can view the configuration in the debug, so that even if you can not understand the document will be able to follow their own ideas to write the configuration, or even do not look at the document. The usage is VSCode configured as follows, and the two configurations are equivalent. Debugging in the same webpack.config.js vein, the startup file can be replaced, package.json the node corresponding to view the scripts command to determine the boot file

  {   "version": "0.2.0",   "configurations": [       {           "type": "node",           "request": "launch",           "name": "Launch Program",           "args": [               "serve"           ],           "program": "${workspaceFolder}  /node_modules/@vue/cli-service/bin/v  ue-cli-service.  js"//client-app/src/aspnet-dev.js"       },       {           "type": "node",           "request": "launch",           "name": "Launch via NPM",           "runtimeExecutable": "node",           "runtimeArgs": [               "--inspect-brk=9229",               ".  /node_modules/@vue/cli-service/b  in/vue-cli-service.js",  //"./client-app/src/aspnet-dev.  js",               "serve"           ],           "autoAttachChildProcesses": true,           "port": 9229       }    ]}

  • Debug Aspnetcore nodeservices One of the open way, this can be VSCode debugged, the debugger provided by VSCode , will not automatically connect, a little trouble, it is recommended to use the next one, convenient.
  • If you are using Google Chrome's development tools as a debugger, you can try the plugin Nim, start node or automatically open tabs. Or Google browser comes with, Connection add connection, detect signal will automatically connect, in Filesyatem Add the need to debug the source code can be. If the browser is connected to a site in the node environment and Inspector is enabled, the developer tool will have an icon to quickly open the node debugger

Other references (ranked by recommended index)

• A probe into the development of the front-end JS debugging skills (recommended to see, find a lap to find this original address)
• What are the JS debugging techniques?
• "Debugger for Chrome" extension with visual Studio code
• VUEJS Official Documentation: Debug in VS Code and Chrome
• node. JS's V8 Inspector Integration
• node. JS Debugging Guide
• Debugging in Vscode
• Vuejs Forum related discussions
• When debugging a program, what is the principle of setting breakpoints?