A. Open the shortcuts
windows: ctrl + shift + i/F12
1.Elements
1. Select the element is switched to Event ... Tab can view events bound to this element
2. You can modify the html in the Element tab
2. Breakpoints
- A breakpoint is set Sources js line numbers of the panel, in addition to conventional breakpoint here, there is a conditional breakpoint (right conditional breakpoint), the set condition is true until a breakpoint, the breakpoint in the circulation required more useful
- In the call stack where you can switch to any place in the stack to re-execute (Right restart frame), useful if the information before the breakpoint would like to see
- Save to global variables after the break
- Select the variable, right Evalute in console
- Select the output in the console contents, right-store as global variable
- dom mutation breakpoints (recommended)
- dom mutation event is a new event DOM3 added, is generally triggered when dom to change the structure. devtools find the business code when DOMSubtreeModified DOMAttrModified and DOMNodeRemoved break. The above elements of the event break is not easy (mouseover), the use of mutation-off point, with the call stack after the break to find a business code
- Global event break
- devtools also can break when an event occurs, such as click when a break occurs, this event break with the different elements, the elements are not limited to, as long as the event occurred, and there handler to break; can also resize, ajax, setTimeout / setInterval breakpoints.
- xhr break
- Open chrome browser console
- Select the source panel
- Click on the right XHR Breakpoints the "+" to add a breakpoint rules
- xhr：XMLHttpRequest
- Steps for usage
- Examples of the article: JS Reverse | Share tips and a small case XHR breakpoint
- Conditional breakpoint
- Examples of the article: [infinity] debugger
- Several commonly used breakpoint shortcuts:
- F8: Continue
- F10: step over, single-step, the function does not enter
- F11: step into, step through, into the function
- shift + F11: step out, out of a function
- ctrl + o: Open the file
- ctrl + shit + o: skip function definition position
- ctrl + shift + f: all scripts in search
3.Console
Element selection
$(selector)- Even if the current page does not load
jQuery, you can still use$and$$function to select elements, in fact, these two functions justdocument.querySelector()和document.querySelectorAll()simple package,$used to select a single element,$$is used to select multiple $_- Use
$_to refer to the most recent expression
Alternatively online documents using Reres
- To be added
Replace JS files online using Charles
- First agent software on the computer off, then open the Charles, select Open macos Proxy Proxy in the menu bar.
- Open developer tools on Chrome, select Network to disable caching on the hook (Disable cache).
- Refresh the page, select the JS code needs to be replaced on the Charles, right click and choose Map Local ..., then click the Choose button, select the JS code needs to be replaced.
Fiddler modify files online using JS
- Open Fiddler, set just grab browser traffic
- Use browser proxy settings SwitchyOmega Fiddler proxy mode
- After using Fiddler-cut request, find the JS file then modify as needed Click RUN
- Examples of sites: an instrument Home JS