Tips for Chrome 35 Developer Tools, chrome developers

Tips for Chrome 35 Developer Tools, chrome developers

Source: w3cplus-North and South (@ ping4god)

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

Google Chrome is now the most popular Web browser for Web developers. With the release cycle every six weeks and the ever-expanding powerful development features, Chrome has become a necessary tool. Most of them may be familiar with many features of chorme, such as usingconsoleAnddebuggerEdit CSS online. In this article, we will share some cool tips to help you better improve your workflow.

PassconsoleModify page elements and content on the panel:

• Retrieve element nodes
• Right-clickEdit as HTMLOrEdit Text
• The modified content is reflected on the page andElementsPanel

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

• InconsolePanel usageinspect(elem)JumpelementsThe specified Element Node of the Panel.
• InconsolePanel usagecopy(values)Copy Data to clipboard
• InconsolePanel usagevalues(object)Obtains all attribute values of an object and returns an array.
• UseCtrl + LClear the currentconsolePanel

JS file opening and quick jump in the file

• InSourcesPanel usageCMD + OShortcut key to open the search box
• The search box displays the JS files on the current page. Enter the file name to open the file.
• If you enter:5:9To jump to the ninth character of the object

InSourcesPanel usageAlt + -AndAlt + =You can jump between the previous and next mouse positions

InElementsPanel usageCMD + FOpen the search box. In addition to regular strings, you can use the selector to select HTML elements.

Right-click the preview image and choosecopy image as Data URITo convert the image to base64 encoding.

UseCMD + ClickYou can create multiple editing points in the file.CMD + UYou can cancel the last edit point.

Press and holdAltKey and select the file content to create a rectangular selection area

InNetworkFilter input box of the PanelIs:runningCommand to view network requests in progress

InElementsRight side of the PanelEvent ListenersTab, right-click the Bound event to jump to the corresponding JS Code

Sometimes we need to open the link in anonymous mode. Now Chrome can maintain the same developer tool status when you open the link anonymously, such as the same toolbar location, size, panel layout, and setting information.

InConsoleUse in panelgetEventListeners(node)The function can obtain the events bound to the current node and return an array.

InElementsOn the Panel, right-click the inline JS or CSS path and selectopenYou canSourcesOpen the corresponding file in the panel

Numeric adjustment shortcut

• Up / Down, Increase or decrease by 1 unit
• Shift + Up / Down, Increase or decrease by 10 units
• Alt + Up / DownTo increase or decrease the number of units by 0.1.
• Scroll wheel

UseCMD + [ or ]You can switch the various panels of the developer tool cyclically.

Sets a condition breakpoint for JS Code. This breakpoint is triggered only when the condition is met.

Select a piece of code in the JS fileCtrl + Shift + EYou canConsoleRun this code in the panel

After separating the developer tool from the browser, useCMD + Alt + iAnother developer tool will be created, which can be used to modify the style of the first developer Tool

Useconsole.trace()Tracing stack information during Code Execution

InTimelineSome frames are highlighted in red in the panel, because these frames are worth the attention of developers and their rendering time is usually over 18 ms. Click these red frames to view the corresponding warning information. Generally, the rendering of 60 frames per second is smooth, which requires that the rendering of each frame cannot exceed 16 ms.

The Canary developer tool provides a hidden layout editor.

InSourcesUse in panelCMD + Opt + F / Ctrl + Shift + FYou can search for information about all objects.

UseTabKeys can be traversed and selected in CSS style rules. The selected targets include selector, attribute, and attribute value. If you want to jump back to the previous target, useShift + Tab

UseUp / DownThe shortcut key can modify the value in the DOM element attribute.

Adjust DOM element styles

InConsoleThe Panel provides a series of filters for filtering specific information, suchHandledFilters can be used to capture the reject status of Promises.

Useconsole.time('sign string')Andconsole.timeEnd('sign string')Obtain the intermediate Interval

Useconsole.table(arr)Output array data

In the Canary version, if you hover your mouse over a selector for a long time, the Elements panel on the left will highlight the matched DOM element area.

Manually blocks URL loading to test the page Effect of failed resource retrieval.

In the Canary version, a Constly Functions module is added to the Timeline panel to record performance in four aspects: Painting/Rendering/Scripting/Network activity.

Rearranging the Panel sequence on the developer tool by dragging

ElementsThe Panel follows the mouse to hover the target to display different DOM elements

You can use the animation Checker to check the running CSS animation attributes.

Visualized resource dependency: Green Resources are initialized resources, and red resources are introduced by green resources.

References

• How to Use Chrome developer tools more professionally
• 15 tips for Chorme dev tools you have to know
• Google devtools
• Dev tips