Chrome debugging

Personal blog ： Chrome debugging

Elements panel

step ：

1. open DevTools, There are many ways to open ,F12 Shortcut key , Right click to check
2. View the style of the element to be checked , Click the red box in the figure below , Then click on the page element , Or place the mouse over the element to be checked , Right click to check

3. stay DevTools Under the Styles Add, delete, and change the query style
   
4. Class name operation
   1. , Direct double click Elements Class name under , You can modify the class name
   2. Click on "Styles" Under the ".cls" To operate

5. Pseudo class selector style modification ：
   1. stay Elements Corresponding element found in , The right choice Force state, Then select the pseudo class , Such as :hover, You can force the style change , The pseudo class style can also be found in Styles I'll make some changes

2. Click on "Styles" Under the ":hover" To operate

6. When there are too many element styles , Click on "Computed", There will be all the styles of this element below , Click on "Filter", Enter the style you want to view

Console panel

You can output things in the console through the program , To check whether the program works correctly

Example ：

	<script>
		var a = 10;
		console.log(a);
		var b = 15;
	</script>

Log level can be selected on the left , You can flexibly use the log level

console.table() usage ： You can print an array of objects , convenient

Example ：

	<script>
		var student = [
			{
				name: "ttt",
				code: 111,
				price: 11
			},
			{
				name: "xxx",
				code: 333,
				price: 11
			},
			{
				name: "yyy",
				code: 333,
				price: 33
			},
		]
		console.log(student);
		console.table(student);
	</script>

result ：

The red box is console.table(), And on the red box is console.log()

Place holder ：

Place holder	function
%s	character string
%d	Integers
%f	Floating point numbers
%c	css Format string

Sources panel

It is mainly used to debug JavaScript

step ：

1. open Sources panel , Find the to debug js Code
2. Click the number on the left of the part of code to be debugged , Add Breakpoint
3. Refresh the page
4. Start debugging

Debugging common parts ：

Screenshot of the source ： Google browser debugging –Sources

A little special ：

1. Hover the variable with the mouse to view the variable value
2. Add... To the program debugger; It is equivalent to setting a breakpoint here
3. Special breakpoints （ Event breakpoints ） The addition method is different from the above , Is in Event Listener Breakpoints Add

Network panel

It can be used to simulate weak network environment

Application panel

This panel is mainly used to record all resource information loaded by the website , Including storing data （Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、 Cache data 、 typeface 、 picture 、 Script 、 Style sheets, etc .

Small skills

Use the appeal method to select elements （ node ）, stay Elements Panel right click , Select the red box below to take a screenshot

Screenshot effect ：

expand ： Out of the 996,Chrome DevTools Panel full introduction ！！！（ Collection ）