[TOC] ## 谷歌浏览器开发者工具 谷歌浏览器开发者工具（以下简称谷歌开发者工具）是一套基于谷歌浏览器内嵌的网页调试工具，使得网页开发者能够方便快速的调试和定位页面问题。 ### 打开谷歌开发者工具 * 打开谷歌浏览器菜单，选择“更多工具”>“开发者工具” * 网页上右击，选择“检查”选项 * 使用[快捷键盘](246495)，Ctrl+Shift+I(Windows) Cmd+Opt+I ### 开发者工具面板 #### 设备模式 使用设备模式能够模拟网页在响应式布局，即移动端下的表现行为，经常被使用于开发H5页面时的调试。 * [设备模式](246880) * [测试响应式和特定设备视图展现](247127) * [模拟传感器：地理位置和加速度计](247128)  #### 元素 使用元素面板，通过自由的操作DOM和CSS，来调整网页的布局和整体设计。 * [检视以及调整网页](247130) * [编辑样式](247131) * [编辑DOM](247132)  #### 控制台 使用控制台可以打印开发过程中的日志诊断信息，同时它还是网页与开发者之间的人机交互接口。开发者可以输入JavaScript代码并执行。 * [使用控制台](247133) * [人机交互的命令行](247134)  #### 源代码 在源代码面板，可以使用断点调试JavaScript代码，并且能通过工作区使用开发者工具的实时编辑器对本地代码进行修改。 * [断点调试](247135) * [调试混淆后的代码](247136) * [工作区持久化设置](247137)  #### 网络 使用网络面板可以检视网络请求以及资源请求，进而优化页面加载性能。 * [网络面板基础](247138) * [理解资源时间线](247139) * [网络优化](247140)  #### 时间线 使用时间线能够记录和展示在网页生命周期中发生的各种事件所消耗的时间，从而提升网页整体的性能 * [分析运行性能](247141) * [如何使用时间线功能](247142) * [避免强制同步布局事件的发生](247143)  #### 分析器 分析器面板能够提供比时间线的更多的信息，例如内存泄漏等 * [JavaScript CPU 分析器](247145) * [堆分析器](247146)  #### 应用 应用面板可以检视所有的页面加载的资源，包括DataBase、Web SQL、本地缓存、图片、字体、样式文件等等 * [数据管理](247147)  #### 安全 安全面板用来调试跟安全证书相关的各种复杂问题 * [安全](security.md)