Tips for Chrome 35 developer tools

Source: W3cplus-North and south (@ping4god)

Website: http://www.w3cplus.com/tools/dev-tips.html

Google Chrome is now the most popular web browser used by developers. With every six-week release cycle and expanding powerful development capabilities, Chrome becomes a must-have tool. Most may be familiar with many of the features of Chorme, such as using console and debugger editing CSS online. In this article, we'll share some cool tricks that will allow you to better improve your workflow.

consoleModify page elements and element content through panels:

• Get element node
• Right-click to select Edit as HTML orEdit Text
• The modified content is reflected in the page and the panel in real time Elements

inspect()/ copy() / values() andCtrl + L

• consoleUse the inspect(elem) jump to elements panel specified element node in the panel
• console copy(values) copy data to the Clipboard using the panel
• console values(object) Returns an array of all property values for the object used in the panel
• Use Ctrl + L to clear the current console panel

JS file open and quick jump within the file

• Sourcesuse shortcut keys in the panel to CMD + O open the search box
• The search box will prompt the current page of the relevant JS file, enter the file name to open
• If entered :5:9 , it jumps to the nineth character of the fifth line of the file

Use in Sources panels Alt + - and Alt + = jump between the previous mouse position and the next mouse position

Elementsusing the CMD + F open search box in the panel, you can use selectors to select HTML elements in addition to regular strings

Right-click on the preview image to copy image as Data URI convert the picture to Base64 encoding

Use to CMD + Click create multiple edit points in a file, use CMD + U to cancel the last edit point

Press Alt and hold the key and select file contents to create a rectangular selection

Enter the command in the Network filter input box in the panel Is:running to view the in-progress network request

In Elements the tabs on the right side of the panel Event Listeners , right-click on the bound event to jump to the corresponding JS code

Sometimes we need to open the link in anonymous mode, and now Chrome can still keep the same developer tool status when you open it anonymously, such as the same toolbar location, size, panel layout, setup information, and so on.

Consoleuse a function in the panel getEventListeners(node) to get the current node-bound event, returning an array

In the Elements panel, right click on the inline JS or CSS path, select open can open the Sources corresponding file in the panel

Numeric adjustment shortcut keys

• Up / Down, increase or decrease by 1 units
• Shift + Up / Down, increase or decrease by 10 units
• Alt + Up / Down, increase or decrease by 0.1 units
• Mouse wheel

Use CMD + [ or ] the various panels that can cycle through the developer tools

Set a conditional breakpoint for the JS code that fires only when the condition is met

Select a piece of code in the JS file, Ctrl + Shift + E you can Console run the code in the Panel

Once the developer tools are detached from the browser, CMD + Alt + i a second developer tool will be created that can be used to modify the style of the first developer tool

Use console.trace() to track stack information during code execution

There are some frames in the panel that are Timeline highlighted in red because these frames are worth the attention of the developer, and they typically render more than 18ms of time. Click on these red frames to view the appropriate warning messages. The page that renders 60 frames per second is generally considered fluent, which requires that each frame render cannot exceed 16ms.

A hidden layout editor is available in the developer tools in version Canary

Use the information in the Sources panel CMD + Opt + F / Ctrl + Shift + F to search all files

Use the Tab keys to traverse the selection in a CSS style rule, with the selected targets: Selectors, attributes, and attribute values. If you want to jump back to the previous target, use theShift + Tab

Use Up / Down the shortcut keys to modify the values in the DOM element properties.

Adjust DOM element Styles

A Console series of filters are provided in the Panel to filter specific information, such as Handled filters that can be used to capture the reject state of Promises

Use console.time(‘sign string‘) and console.timeEnd(‘sign string‘) get intermediate time intervals

Using console.table(arr) output Array data

In the Canary version, if the mouse hovers over a selector for a long time, the Elements panel on the left highlights the matching DOM element area

Loading of manually blocked URLs for testing the page effects of resource acquisition failure

A constly Functions module has been added to the Timeline panel in the Canary version to record performance in four areas: Painting/rendering/scripting/network activity

Rearrange the panel order on the developer tool by dragging and dragging

ElementsThe panel displays different DOM elements following the mouse hover target

Use the animation inspector to check for CSS animation properties that are running

Visualize resource dependencies: Green resources are initialized resources, red resources are introduced by Green resources

Resources

• How to use Chrome developer tools more professionally
• 15 tips you have to know about Chorme Dev tools
• Google Devtools
• Dev Tips

Tips for Chrome 35 developer tools