background

When you’re writing code, it’s inevitable that there will be some problems, so how and where to find them is critical. You probably don’t pay much attention to debugging your code during development, and most of the time you use console.log to print logs. This way is not to say no, it’s just not elegant. Here is how to use vscode plug-in to achieve code debugging and some common debugging methods, easy to find problems in the code.

Debugger for Chrome

Use in vscode plug-in js code debugging, this is recommended by the author. You can see what you want to see in vscode code, variable values, running stacks and so on. Skilled use is absolutely a great tool for development and debugging. The specific usage is as follows

  • The first step, of course, is to go to vscode’s extension center and search for the Debugger for Chrome plugin to install

  • Click the debug button on the left to enter the configuration of the debug file

  • This will generate a.vscode folder in the project root directory and will produce a default configuration file

When debugging, it is mainly through the URL, so make sure that your service start port is the same as the url, if not, change to the port you started the service.

  • One thing to note here is that webRoot is relative to the root path of your home directory, which you will need to configure if you are debugging a subproject in your home directory
"webRoot" : "${workspceFolder}/app1"
Copy the code
  • Just a quick word about what this parameter means
"Type ":" debug host type" "Request ":" how to open a new browser TAB ""name":" debug window definition name" "URL ":" debug URL ""webRoot":" debug home directory"Copy the code
  • To start debugging, select the debug file you configured and click the green triangle button on the left

  • If the following action bar appears, debugging is successfully started

  • The important thing to note here is that most projects now have a separate front and back end. You need to get the project up and running, start the local development server, and then click the Debug button, which opens a new browser, and you can have fun debugging. Just break the point in front of the code you want to debug

This makes it easy to debug your code in the editor

JavaScript Debugger

This is another vscode plug-in that is built into vscode. The advantage is less configuration can run debugging, here depends on the degree of preference, introduce the use of this plug-in process

  • This plugin is built in, so it is enabled by default, and also supports some custom configurations. Open user Settings and search for Debug, and the Settings options will appear as shown in the figure below

The user’s custom Settings are displayed in the configuration items on the right, and you can set them by yourself

  • Enabling the Debug mode

When we open the package.json of the project, a debug button will appear at the top of the NPM script command by default, and then click the select debug command to enter the debug mode

When you click debug, a box appears to select a command to run the debug environment

Then select Serve to start the local server. You can debug the local code and open a new browser. The general phenomenon is similar to the previous plug-in. Specific debugging steps can also refer to the last plug-in, the advantage of this plug-in is less configuration, boot available. Most likely, no more custom configuration is required, and the two steps of debugging and starting the local service are combined, making it easier

Chrome and Debugger

This is the traditional way, many people debugging probably used this way, and probably still use it. Is to use Google browser developer tools for debugging. For those of you who haven’t used this approach, here’s how to debug front-end code using developer tools.

  • First of all, needless to say, you need to install a Chrome browser
  • Then use F12 to open the developer debug tool, something like this

  • If you want to see the execution of a line of code, you need to hit a breakpoint after the line, and the way you break the point in developer tools is like this
Open Sources → Open the JS code file you want to debug → click on the lineCopy the code

As shown in figure:

The blue label is the breakpoint that you hit when you refresh the page again.

The Sources panel has three modules

The first is to select resources. The files requested from the server when the page is loaded include files such as.html.ccs.js. The second is the JS debug window, you can break the point on the left, refresh the page, debugging. The third window highlights this

These buttons are the main function keys of debugging

  1. Step by step, pausing at breakpoint
  2. Step skipping will skip to the next breakpoint
  3. Step in, will enter the function internal debugging
  4. Step out, will jump out of the current breakpoint function
  5. Step by step
  6. Temporarily invalidate all breakpoints
  7. Do not pause at exceptions
  8. You need to pause there if you throw an exception
  9. Instead of typing a variable name or expression over and over again, you can just add them to the watch list and watch them change over time
  10. Management panel for all breakpoints
  11. You can see quite a bit of useful information, such as what this points to, whether it has a value, whether the breakpoint is an object or something else
  12. When pausing within a line of code, you can see in the Call Stack panel which stacks brought you to the current breakpoint (which functions were called by the current function). The Call Stack panel is empty unless paused in a line of code. Clicking on a function jumps to where the function was called. The blue arrow is the function currently being viewed. Right-click in the Call Stack panel and select Copy Stack Trace to Copy the Stack information from the panel to the ClipBoard.
  13. Set a breakpoint for a request or the key of the request
  14. Right-click on a DOM element and select the Subtree Modifications under Break on. This allows the debugger to stop automatically when the script iterates through the element and wants to modify it, allowing the user to debug
  15. Global listener
  16. A breakpoint is paused when a listener listens for an event to occur
  17. Trusted Type Violations pause the script when an exception occurs

This is the main use of these functions, these can be very detailed debugging, but this is only in the browser, the editor code does not have any information.

Debugger

This is the js keyword, in fact, in the browser code to break the point, as in the browser developer tools directly break the point result

Console.log

About this to debug code, I believe you are all used, where the need to debug there is printed log. This method will want to know the variables, values of what output to the browser log, easy to view, is also a debugging way, but not recommended, the code invasion is large.

summary

In general, vscode plug-in or Google browser debugging panel is used for debugging, so the code invasion is relatively small, for debugging information is more detailed, is also recommended by the author, if you feel useful welcome to like it