Chrome DevTools – 25个实用技巧

Google Chrome 是一款时下非常流行的浏览器. The Chrome DevTools 能够能好的帮助你提高在开发时候的效率, 测试和调试你的网站在浏览器中是否运行良好. 事实上我们很多人都只会使用Chrome DevTools的基本功能。如果你想提高我们的开发效率,那么以下的技巧很值得你去试一试。

Between Sept 2015 – Feb 2016, Google Chrome holds a 47.77% browser market share across the globe. – StatCounter

What are the Google Chrome DevTools?

The Google Chrome Developer Tools, also known as Chrome DevTools, are web authoring and debugging tools built right into the browser. They provide developers deeper access into their web applications and the browser. You can do everything from testing your viewport on a mobile device to editing your HTML/CSS on the fly, and even measuring the performance of your site’s individual assets.

To use the latest version of the developer tools, you will want to use Google Chrome Canary, which is the experimental version of Chrome. Canary can be run side by side with Chrome so you can check any issues that may arise.

Chrome DevTools – 25个实用技巧-稀土区

You can enhance your development by using  chrome://flags and enabling the developer tools experiments. You can then use the settings panel in developer tools to toggle individual experiments.

Chrome DevTools – 25个实用技巧-稀土区

We will be mentioning some of the keyboard shortcuts for Chrome DevTools below, but you can see a full list of them on the Google Developer’s site.

Opening Chrome DevTools

There are a couple ways to open Chrome DevTools.

1. Open from Browser Menu

You can open Chrome DevTools from Chrome’s menu   , click into “More tools” and then click into “Developer Tools.”

Chrome DevTools – 25个实用技巧-稀土区

2. Open by Right Clicking

You can also right-click on any element on a web page and click “Inspect element” which will launch Chrome DevTools.

Chrome DevTools – 25个实用技巧-稀土区

3. Open with Keyboard Shortcuts

You can also use the following shortcuts:

  • Windows: F12 or also Ctrl + Shift + I
  • Mac: Cmd + Opt + I

Tips and Tricks

Below are just a few of the hundreds of things you can do with Chrome DevTools. It also makes for a good crash course on the tools if you haven’t used them before. Note: we are using Google Canary for all these examples, as there are newer features such as material design palettes and aggregated timeline details.

Quick File Switching

You can easily access any file within a current project or web page by pressing Ctrl + P (Cmd + P) when Chrome DevTools is open and searching for the name.

Chrome DevTools – 25个实用技巧-稀土区

Pretty Print { }

Did you know Chrome DevTools has a pretty print featured built in? You can easily change the formatting of your minimized code by clicking on { } which will go back to the normal view so you can easily go through it.

Chrome DevTools – 25个实用技巧-稀土区

Edit an HTML Element

You can edit HTML on the fly/preview changes by selecting any element, choosing a DOM element within the panel, and double clicking on the opening tag to edit it. The closing tags are automatically updated for you. Any changes will show up in your browser as if the change had actually been made to the source code.

Chrome DevTools – 25个实用技巧-稀土区

Edit CSS Properties

Just like with editing HTML, you can also change CSS in Chrome DevTools and preview what the result will look like. This is probably one of the most common uses for this tool. Simply select the element you want to edit, and under the styles panel you can add/change any CSS property you want.

Chrome DevTools – 25个实用技巧-稀土区

Search Within Source Code

You can quickly search within your source code by pressing Ctrl + Shift + F (Cmd + Opt + F).

Chrome DevTools – 25个实用技巧-稀土区

You can also search by CSS selectors by pressing Ctrl + F (Cmd + F).

Javascript Breakpoints

When debugging Javascript it is sometimes useful to set breakpoints. You can set breakpoints in Chrome DevTools by clicking on the line number you want to break at, and pressing Ctrl + R (Cmd + R) to refresh the page. The page will then run right to that breakpoint.

Chrome DevTools – 25个实用技巧-稀土区

Skip to Line Number

You can automatically skip to a line in your code by pressing Ctrl + O (Cmd + O) and using the line syntax. In the example below we typed :200:10 and pressed enter to go to line 200 column 10.

Chrome DevTools – 25个实用技巧-稀土区

Multiple Cursors

Ever have multiple lines you need to add something to? Perhaps you want to add font-size to several classes. You can easily add multiple cursors by pressing Ctrl + Click (Cmd + Click) and entering information on multiple lines at the same time. This is a very handy trick.

Chrome DevTools – 25个实用技巧-稀土区

Change DevTools Docking Position

You can also change the docking position of Chrome DevTools. There are three options to choose from: Bottom, Side, and Undocked (floating). To toggle between docking positions you can press Ctrl + Shift + D (Cmd + Shift + D). Then there is also a docking panel in the top right corner.

Chrome DevTools – 25个实用技巧-稀土区

Clearing Cookies

You can also easily clear cookies with Chrome DevTools. This can be especially useful when testing and debugging third party plugins. Simply click the “Resources” tab and under Cookies you can right click and delete any cookies currently stored in your browser.
Chrome DevTools – 25个实用技巧-稀土区

Device Mode

You can test your website and media queries and see if your responsive design is breaking anywhere by going into device mode. Or perhaps you need to see at which resolution the page is breaking at so you know where to apply the media query. To enter device mode click on the small phone icon in Chrome DevTools or you can press Ctrl + Shift + M (Cmd + Shift + M). You can then choose what device you want to emulate, the orientation, and even resolution. You can also change the network throttling to see how your website actually would render on say a regular 2G connection.

Chrome DevTools – 25个实用技巧-稀土区

Custom Color Palettes and Color Picker

In Google Chrome Canary, they introduced new custom color palettes and material palettes which pull from your site’s CSS. You can access them by simply clicking on the color block in the style panel. There is also a color picker you can use to pick out colors from your web page.

Chrome DevTools – 25个实用技巧-稀土区

Change Color Format

You can toggle between RGBA, HSL, and hexadecimal formatting by pressing Shift + Click on the color block.

Chrome DevTools – 25个实用技巧-稀土区

Device Emulation Sensors

A cool feature of Chrome DevTools is that you can even simulate touch screens and accelerators. To do this click into Console, Emulation, and into Sensors.

Chrome DevTools – 25个实用技巧-稀土区

Toggle Element State

Have you ever tried to figure out where a hidden style is coming from, say the :hover attribute? In Firefox their dev tool lets you see this when selecting the element, but not in Chrome DevTools. However, there is something better, called toggle element state. This allows you to force the element state :hover so that you can then use the styles panel to see the properties.

Chrome DevTools – 25个实用技巧-稀土区

Copy Image as Data URI (base64 encoded)

You can save any image from a webpage out as a Data URI or rather base64 encoded. There is no need to use a free online converter as it is already built into Chrome DevTools. To do this simply click into the “Network” panel, click on an image, and then right-click on it and select “Copy image as Data URL.”

You will then get the image in the following format:



Chrome DevTools – 25个实用技巧-稀土区

Show User Agent Shadow DOM

When you are dealing with things like buttons and inputs the web browser usually constructs hidden attributes. To see these click into settings by pressing F1 (?) and you can enable the “Show user agent DOM.” As you can see in the example we are now able to see the #shadow-root div which is being constructed. You can even take this one step further and apply CSS styles to the hidden attributes.

Chrome DevTools – 25个实用技巧-稀土区

Select Next Occurrence(s)

Chrome DevTools lets you easily select the next occurrence and then apply changes simultaneously across the board. To do this simply double click on what you are wanting to edit, then press Ctrl + D (Cmd + D) for each occurrence you want to select, and then when you type it will simultaneously change all of them.

Chrome DevTools – 25个实用技巧-稀土区


A very powerful feature of Chrome DevTools is workspaces. By default when you change things in developer tools they disappear after you refresh the page. This is fine for small tweaks here and there, but workspaces actually lets you persist those changes by saving them to your disk.

To do this right click on a folder and select “Add folder to local workspace.” Then to make it persistent right-click on a file and select “Map to file system resource…”

Chrome DevTools – 25个实用技巧-稀土区

Workspaces can also be very useful if you are working with CSS Preprocessors as we covered in our last post, Sass vs LESS.

Network Filmstrip

The network filmstrip feature allows you to see how your page renders from start to finish by grabbing screenshots throughout the loading process. This can be a great way to see how your font is rendering and if you’re dealing with issues such as FOIT or FOUT.

To do this click into the “Network” panel, click on the camera icon and press Ctrl + R (Cmd + R) to refresh the page. It will then show you how your page renders from start to finish.

Chrome DevTools – 25个实用技巧-稀土区

Monitor Network Performance

With the latest developer tools update, they have added an aggregated details panel into the waterfall timeline. This allows you to more easily see what is costing you the most time, and you can then break it down by domains, sub-domains, etc.

To run this click into the “Timeline” panel and press Ctrl + R (Cmd + R) to refresh the page. You can then click into the “Summary” panel and “Aggregated” details panel.

Chrome DevTools – 25个实用技巧-稀土区


We have a great post on what is blocking the DOM and how to fix it. In the developer tools, you can see exactly the DOMContentLoaded time and the total load time. To run this click into the “Network” panel, click on the “Show Overview” option and press Ctrl + R (Cmd + R) to refresh the page. A blue line will show up for DOMContentLoaded and a red line for total load time. Normally everything that is left of or touching the blue line are assets that are blocking the DOM, or also referred to as render blocking resources.

Chrome DevTools – 25个实用技巧-稀土区

Network Throttling Profiles

You can now also add custom networking throttling profiles. This can be beneficial if you are wanting to test more accurately at a specific speed.

To add a custom profile, click into the “Network” panel and into the “Throttling” dropdown. You can then click on “Add a custom profile…” and input the name, throughput, and latency.

Chrome DevTools – 25个实用技巧-稀土区

Security Panel

Chrome has added another great featured in developer tools called the Security Panel. This can be very useful for debugging HTTPS migrations and quickly fixing mixed content warnings. To run this click into the “Security” panel and press Ctrl + R (Cmd + R) to refresh the page. It will then display secure scripts in green and non-secure scripts in red.

Chrome DevTools – 25个实用技巧-稀土区

Validating Google AMP HTML

Google Accelerated Mobile Pages (AMP) is a new open source initiative to speed up the mobile web using lightweight HTML pages. For Google to index the AMP version of your page you must make sure it is validated. To run this click into the “Console” panel. You will then need to append #development=1 to the AMP version in your browser’s address bar.  Then press Ctrl + R (Cmd + R) to refresh the page. It will then display if it successfully validated below. Read more about AMP validation errors.

Chrome DevTools – 25个实用技巧-稀土区

Use Firefox Developer Tools in Google Chrome

Did you know that you can run Firefox Developer Tools in Google Chrome? Valence is an experimental add-on from the Firefox team that enables the Firefox Developer Tools to debug a wider variety of browsers. Valence requires Chrome 37.0 or higher.

Chrome DevTools – 25个实用技巧-稀土区

For example, on OSX, you could run the following command to start a debuggable copy of Chrome:

$ /Applications/Google\\ Chrome
-d -t 'chrome-remote_data_dir')

With the connection open, you can open Firefox’s WebIDE, select “Chrome Desktop”, and you now have access to Firefox Developer Tools within Chrome.


As you can see Chrome DevTools has numerous features to help you develop better, debug faster, and measure more efficiently the performance of your website or application. The tips mentioned above are just a few of many features available. Do you have a favorite DevTools feature that we missed? If so let us know below in the comments.


3 条回复 A 作者 M 管理员
  1. 愉快的装逼你来不来。

  2. 支持支持

  3. 表情好给力!

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论