Usually in the development process, often come into contact with front-end pages. So for the debugging of js that is commonplace, needless to say. I have been using Firefox's Firebug recently, but I don't know why it doesn't work. I searched for the answer on the Internet, and they all said that reinstalling the Foxfire browser is enough, but I installed it many times, but it didn't work. Later, I heard that Firebug stopped updating. There is no way, since I don't use it, I can just change the browser! At the beginning, I thought of Google. Google Chrome is a tool commonly used to debug JS code. This article mainly introduces how to use Google Chrome to debug JS code, assist us in development work, and speed up development efficiency.
1. First, open Google Chrome, then open the debugging function bar, press the shortcut key F12 or ctrl+shift+j, you can open the developer tools of Google Chrome. The page after opening is as follows.
2. The following mainly introduces several basic common functions commonly used in developer tools. The second option in the upper left corner is used to switch the mobile page. If the URL we visit is the wap page on the mobile phone, then click this button to simulate the mobile phone to visit.
3. Network is a network tool, you can view the status, type, size, time, etc. of the requested data, as shown in the figure below. Network is a commonly used tool in debugging. You can check whether the sent request is correct and whether the returned data is normal.
4. Sources can be used to view the source files of the page, including JS files and Html files. Find the JS code you want to debug and click before the code to set a breakpoint. When running JS code, it will automatically enter the breakpoint execution. Similar to Java debugging, JS debugging can also be single-stepped, debugged into the function body, run directly to the next breakpoint, and so on.
5. As shown in the figure above, there are 4 breakpoints in the upper right corner, which are to run directly to the next breakpoint, single-step operation, enter the function body to run, and return the function execution result. The corresponding shortcut keys are F8, F10, F11 and shift+F11. When debugging, place the mouse on a variable to view the running value of the variable.