"JS learning"-Using Google browser debugging JS code

Google Browser is often used to debug the JS Code tool, this article mainly describes how to use Google browser to debug JS code, to assist us in development work.

First, open Google Browser, press the shortcut key F12 or ctrl+shift+j, you can open the Google Browser developer tools. Open the following page as shown below, the following image is open WAP side Baidu page.

Here are a few of the features that are commonly used in developer tools. The second option in the upper-left corner is used to toggle the mobile page. If we visit the Web site is mobile phone-side WAP page, then click this button, you can simulate the phone to visit. Network is a network tool that can view the status, type, size, and time of the requested data as shown below. Network is a tool commonly used in debugging to see if the request sent is correct, the returned data is normal, and so on.

Sources can be used to view the source files of a page, including JS files and HTML files. Find the JS code you want to debug, and then click in front of the code to set a breakpoint. When you run the JS code, you will automatically enter the breakpoint execution. Similar to Java debugging, JS debugging can also be one step running, into the function in vivo debugging, directly run to the next breakpoint, and so on.

As shown in the figure above, 4 breakpoints in the upper-right corner are run directly to the next breakpoint, step to run, into the function body, and return function execution results. The corresponding shortcut keys are F8, F10, F11, and Shift+f11 respectively. When you are debugging, you can view the running value of a variable by placing the mouse on it.

Resources can be used to view some of the stored data, and the more commonly used is the local cache, session cache session Storage, and cookies. As shown in the following illustration: