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.
console
Modify 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
console
Use 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
Sources
use 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
Elements
using 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.
Console
use 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
Elements
The 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