"JS learning"-Using Google browser debugging JS code

Source: Internet
Author: User

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:


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.