JS practical skills breakpoint debugging

Enjoy the front end 2021-02-23 03:43:59
js practical skills breakpoint debugging


Debugging ability is the foundation of a programmer's survival , But many beginners ignore debugging . Today we're going to talk about JS Debugging skills .

This article will list in detail JS Related to a variety of practical debugging skills . If you are JS Beginners , So this article will be of great help to you .

Why debug ?

A program is a stack of functions , The operation of a program is the execution of a function . And by JS debugging , We can more intuitively trace the running of the program , The order in which functions are executed , And the change of each parameter . So we can quickly locate the problem .

1 What is? JS debugging ?

While the program is running , We always meet all kinds of bug, The process of tracking the running order of the code to locate the problem is called JS debugging .

First of all, we need to know how to enter the debugging interface , Here we take Google as an example , adopt F12 And right click to check , find Sources You can enter the debug interface . The specific interface is shown as follows :

img

The red box indicates the buttons that we use to debug . Next, we will describe the function of each button in detail in the actual application scenario .

2 Step by step debugging

First, general debugging , It's also called single step debugging .F12 find Sources after , Find the file you want to run in the folder on the left , And then click pause script execution Button to refresh the page (F5), You can go into single step debugging

img

Click on Step over next function call It's program debugging step by step , Every click , It's in the order of code execution , Execute one sentence of code down .

img

3 Function debugging

If you have tried single step debugging, you will find that , Single step debugging is not enough for us to find bug The needs of , Because single step debugging can't enter the function body , We can't keep track of variables in a function .

So we're going to learn about the third button ,step into next function call Button

img

Use Step into Button , We can go into the body of the function , In the process of single step debugging , When a function is called , Click on Step into You can enter the body of the function .

img

After entering the function body , Continue clicking Step over Button , You can do single step debugging in the function body . As shown in the figure , The change of variables in the function is clear at a glance .

img

But when we've tracked the changes we want , There's a lot in the function body , Single step debugging to the end of the function is a waste of time . Here you can use the fourth button we learned today ,step out of current function call Jump out of the body of the current function , Jump out to the code position that entered the function body before .

img

4 Breakpoint debugging

In actual projects, the amount of code is huge , Using single step debugging is a waste of time . And sometimes we want to find out if there is something wrong with the code , So there's no need to debug all the code . So we can use breakpoint debugging , So what is breakpoint debugging ?

First , Where you want to locate the problem , Breaking point , Where the code stops executing . As shown in the figure, click on the red box to break the line .( Because of the different versions of Google , The breakpoint icon is slightly different )

img

And then refresh the page (F5), You can enter the breakpoint debugging page . Click on Resume script execution Button can be adjusted to the next breakpoint .( Be careful : When it reaches the breakpoint , This line of code has a blue background , Indicates that this line of code is about to be executed but not executed )

img

5 Event debugging

First of all, let's define a concept , It's synchronous and asynchronous , When the code is executed , The top-down run is synchronization code , One of the types of asynchronous code is that it needs events to trigger . So in code debugging , Functions in the event body , It needs to be after the break point , Through the behavior of the event , To enter the function body .

As the following code : Refresh after break point , It doesn't work

img

Debugging must be triggered by an event

img

版权声明
本文为[Enjoy the front end]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222134322249n.html

  1. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  2. Javascript数据类型
  3. HTTP interface debugging tool! 48000 star HTTP command line client!
  4. Parameter encryption of front end URL link band
  5. HTTP interface debugging tool! 48000 star HTTP command line client!
  6. Three front end frameworks: data binding and data flow
  7. Reading Axios source code (1) -- exploring the realization of basic ability
  8. Event bubble and capture in JavaScript
  9. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  10. R & D solution e-Car front end monitoring system
  11. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  12. R & D solution e-Car front end monitoring system
  13. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  14. 解决ajax跨域问题【5种解决方案】
  15. Top ten classic sorting of JavaScript
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  18. My http / 1.1 is so slow!
  19. Why Vue uses asynchronous rendering
  20. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  21. The tapable instance object hook of webpack4. X core tool library
  22. The tapable instance object hook of webpack4. X core tool library
  23. Using libcurl for HTTP communication in C + +
  24. Using libcurl for HTTP communication in C + +
  25. Using CSS variable in Vue
  26. Deeply understand the update of state and props in react
  27. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  28. Baidu share does not support the solution of HTTPS
  29. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  30. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  31. Vue cli creates vue3 project
  32. Nginx reverse proxy for windows authentication using NTLM
  33. Rust tutorial: introduction to rust for JavaScript developers
  34. Deploying personal blog to Tencent cloud with serverless framework
  35. R & D solution e-Car front end monitoring system
  36. JavaScript advanced learning
  37. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  38. Vue: vuex persistent state
  39. React native gets the current network state of the device Netinfo
  40. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  41. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  42. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  43. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  44. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  45. High performance nginx HTTPS tuning
  46. JQuery advanced
  47. day 30 jQuery
  48. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  49. TCP/IP 开胃菜 之 HTTP
  50. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  51. JavaScript data type
  52. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  53. Solve Ajax cross domain problem [5 solutions]
  54. HTTP of TCP / IP appetizer
  55. Optimization of pod creation efficiency in serverless scenario
  56. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  57. First knowledge of HTTP / 1.1
  58. First knowledge of HTTP / 1.1
  59. Webpack learning notes series 05 devserver
  60. Webpack learning notes series 04 - resource processing optimization