Tips for using Chrome developer tools

Tag: deb BST multiple BER cursor NET file name log CAD

I recently spent more time using Chrome's developer tools. I've found a lot of good features that haven't been used before (or features that are not particularly needed, such as blackboxing and asynchronous stacktraces). So I want to summarize some of the features I really like.

A small magnifying glass icon tells you which CSS class/selector is located in which file, which determines the style of a particular element and the properties of the CSS. For example, on any DOM element, right-click to select "Review element" and switch to "Computed" submenu to find the CSS properties you are interested in and click the Magnifier to navigate directly to the position of the CSS class/selector in the. css file. (Useful when you are developing a new large web App project):

To see what xhrs requests the current web app sends, select the Log xmlhttprequests check box under Settings and then look at the tabs on the console. Before I know this feature, I usually set my browser to pass an HTTP intercept proxy, such as Burp suite, but it's handy if you just need a quick recap. Of course, you can also have the opportunity to modify the xhrs before you reach the server via the Interceptor agent, which is very helpful for security testing. A lightweight alternative is to use "Sources:: XHR Breakpoints" and activate the "any XHR" breakpoint.

Now, suppose your web app is periodically making some XHR requests (such as keeping the current page always up-to-date) and you need to know where the timer is set (for example, where SetTimeout () is called or setinterval () is used). To resolve this issue, switch to the "Sources" tab and select the "Async" check box. This allows stack traces to continue to execute, over SetTimeout () and friends, or even multiple levels of nesting. It is also valid for Requestanimationframe () and AddEventListener (). This check box is here:

To quickly find the code that executes when you click on a button or a link is clicked, launch "Event Listener Breakpoint" Mouse:: Click (another killer to develop an existing large web app):

When you use "Event Listener breakpoint:: Mouse:: Click", you may end up in some third party Coorey (for example, jquery) and you need to walk in debugger several times to get to the "real" Event handler. "Blackbox" third-party scripting is a great way to avoid this problem. Debugger is not interrupted in the blackboxed script, and he continues execution until it encounters a line of code that is not in the blackboxed file. In CallStack you can select a third-party library right-click to select "Blackbox Script" to place it in Blackbox.

To jump to a special file by file name, you can use Ctrl-p:

Go to a method by name (only the currently open file) using Ctrl-shift-p:

Global file Lookup Ctrl-shift-f

Select a word and then press ctrl-d several times to select more relevant variables. Very handy for renaming variables:

For locally developed web sites, you can use development tools to edit files and save changes to disk. Switch to the Sources tab, right-click the Sources Sub tab and select Add Folder to Workspace and select the Local project directory. Then right-click on the local file and select "Map to Network Resource ..." and select the corresponding "network" file.

Other useful tips

• The elements you selected on the Elemet tab will be displayed on the console

• Test Xpath expression using $x ("//p")

Recommended two chrome extensions to install

• Jsonview

• JS Error Notifier (non-"spyware" version)

Foreign Source: http://mo.github.io/2015/10/19/chrome-devtools.html

Tips for using Chrome developer tools