Chrome 开发者工具

Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。

打开 Chrome 开发者工具

• 在 Chrome 菜单中选择 更多工具 > 开发者工具；
• 在页面元素上右键点击，选择 “检查”；
• 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。

面板

• 设备模式：使用设备模式构建完全响应式，移动优先的网络体验。
• 元素面板：使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。
• 控制台面板：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 Shell 在页面上与 JavaScript 交互。
• 源代码面板：在源代码面板中设置断点来调试 JavaScript ，或者通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
• 网络面板：使用网络面板了解请求和下载的资源文件并优化网页加载性能。
• 性能面板：使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。
• 内存面板：如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。
• 应用面板：使用资源面板检查加载的所有资源，包括 IndexedDB 与 Web SQL 数据库，本地和会话存储，Cookie，应用程序缓存，图像，字体和样式表。
• 安全面板：使用安全面板调试混合内容问题，证书问题等等。