Google browser debugging skills

1、 Copy the objects output from the console

Get the object name , Then input copy function , Object name as function parameter , And then go back , Paste again .

2、 One click to expand all DOM Elements

Place the mouse cursor at the arrow , Hold down option, Then click the mouse , such div When it's all unfolded .

Or right-click to select expand recursively： 

3、 Network request repeat request once

network-->Fetch/XHR--> Select the network to request --> Right click --> choice Reply XHR

4、 View page layout

Bookmark --> Name any one , Website filling ： 

javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) {
			items.push(elements[i]);
		}
	}
	if (items.length > 0) {
		for (var i = 0; i < items.length; i++) {
			items[i].innerHTML = '';
		}
	} else {
		document.body.innerHTML +=
			'<style>html * { outline: 1px solid red }</style>';
	}
})();

save bookmark , Open any web page , Click on Bookmarks , The page structure is displayed ：

5、 Modify page content

 

• Double click the contents of the cursor
• The right choice Edit text perhaps Edit as Html

6、console Output dom 

  The cursor selects dom, Switch to console, Input $0, Ready to print