How to more easily debug JavaScript code

Developer Tools

Now the General browser has built-in developer tools, shortcut key F12 can be opened, such as Chrome browser, under the sources panel to find the corresponding JS file

This is the preferred method, but for spa programs (such as Easyui), inline pages may not be found. So if it's a spa program, you might want to think about other methods.

vs Next Breakpoint at JS code

This method is not used for spa inline pages, but you can use the Debugger keyword to set breakpoints manually , as follows.

If you use IE, you need to first remove the two options, and then F12 open the developer tools, using chrome just open the developer tools. This method is useful for debugging Spa single-page programs such as Easyui.

using Console.log

You can print the value of a variable to the console, which allows you to navigate to the line of code where the error occurred.

Before using the Console.log method, there is also the use of the alert method to debug, but the use of too inconvenient, debugging also need to delete, the code is intrusive, not recommended to use.

View the results.

Summarize

1, if it is a normal website (non-spa program), use the first method is best.

2, if it is a spa single-page program, using the debugger keyword to manually set breakpoints is most convenient, but after debugging or to manually delete.

How to more easily debug JavaScript code