A few tips for Chrome browser F12 developer Tools Summary

1. Modify page elements directly
Select the element on the page, right-click "Check", will open the Developer tool window, display the current selection of elements of the source code, you can double-click to modify.
If you want to modify more things, you can collapse the element and click Select, and then right-edit as HTML modification.

2. Color Picker
Select the element on the page, right-click "Check", will open the Developer tool window, in the Styles window, click on a style of color to the right of the small square (if no color can be input such as color:red), will pop up the color picker, you can select a color on the above color artboard, You can also select the pen icon to pick the color of the elements on the page.

3. Quickly find and locate files
To view the source code, mouse over the development tool window, press CTRL+P, enter the first few letters of the link address, will automatically associate to show all eligible addresses, click to open. (Sometimes the first time you open a blank content, you can click the link again)
After opening, if it is JS content, you can break the point of debugging directly above, in addition, you can click on the left corner of the content box, the brace icon "{}" (pretty print), the code is typeset.

4. Edit Source Code
(1) "Console" input box input, but press ENTER is not a newline, will be executed directly, if there are multiple lines of code, you need to write in another place and then paste it in.
(2) under "Sources", click the ">>" next to the top left corner of the Sources to open snippets, click "+ New Snippet" To create a new file editing script, write the right button "save" saved, then right click on the file "Run" run.

Description, if it is to overwrite the page JS code:
In the case of a function, the method can be overridden directly with the same function name.
If the button event is to overwrite the page JS code, the event needs to be re-registered, otherwise the same multiple events will all respond.
Reference from: http://www.cnblogs.com/yougewe/p/6964724.html

$ (' #id '). Off (). On (function () {
Alert (' Test ');
});

5. Analysis of asynchronous request resources only
Under "Network", click "XHR", this will only show XHR asynchronous request resources, in order to quickly analyze requests headers and response.