Shortcut key cheat sheet
F11: step by step. When encountering a subfunction, it enters a subfunction
Shift +F11: Jumps out of the current function
The breakpoint function
A breakpoint is a breakpoint that freezes the entire running state of a program when it reaches a line. You can clearly see all the scope variables, function arguments, and function call stack up to this line. You can see how the data flows through the program, and you can modify and play with it. Breakpoint debugging allows you to truly understand the flow of a program.
Introduction to Developer Tools
Elements Page body
1. Every time you hover over an element, the HTML view gives that element a blue background.
2. If you click to select an element, the position of the element in the HTML structure is displayed at the bottom
3. Edit the style of the element in the styles option and see the HTML structure updated in real time
4.Event Listeners view events bound to the element
Network Monitoring page
Monitor all HTTP requests on the current web page, showing each HTTP request, with each field representing the different attributes and status of the request
1. Click any HTTP information in the panel. A new panel is displayed at the bottom, which records the detailed parameters of the HTTP request
Preview(formatted text message returned after transfer) Response (original message before transfer) Cookies Cookies with the request TimingCopy the code
Sources Resource List
Displays a list of loaded resources, cookies, and local storage information, such as local storage and SESSION
Commissioning procedures
1. Open the code to be debugged in the browser, F12→ Sources → double-click the file to be debugged → click the line number
2.command + o (Windows should be control + O), enter app.js to find our file:
3. Click the line number, and the JavaScript pauses at line 10, freezing the entire application
Watch monitors the result of executing any expression in the scope of the current breakpoint 1. Click ➕ next to Watch. 2. Type 'this.state' to see the structure of the data 3. Type 'this.state.name +' OK 'to see the result of the execution of the data. The Scope of the current breakpoint and all of the closure scopes and global scopes you can see all of the scoped variablesCopy the code