原文：https://developer.chrome.com/devtools

DevTools 是 Developer Tools 的简称，它是一套内置在谷歌 Chrome 里的网页制作（web authoring）和调试的工具。该 DevTools 可以让 web 开发者深入到浏览器和Web应用程序的内部。使用 DevTools 可以高效地追踪布局问题，可以设置 JavaScript 断点，也可以为代码优化提供参考。

打开 DevTools

三种方式可供选择：

1. 打开 Chrome 菜单，选择工具->开发者工具
2. 右键，选择“审查元素/Inspect Element”
3. 使用快捷键打开

• Window Ctrl+Shift+I，或者直接按 F12
• Mac Cmd+Opt+I
  其中 I换成J可直接定位在 Console 页签、 I换成C可直接定位在 Element 页签

DevTools 窗口

窗口的顶部有一个面向不同任务的工具栏，每一个工具栏和它相应的面板可以让你得到有关网页或 App 的某个特定类型的信息，包括 Dom 元素、资源（resources）、源码（sources）等。

审查 DOM 和 样式

使用 Console

调试 JavaScript

提升网络性能

审计

提高渲染性能

JavaScript 和 CSS 性能

检查存储

更多阅读

更多资料