谷歌浏览器开发者工具(以下简称谷歌开发者工具)是一套基于谷歌浏览器内嵌的网页调试工具,使得网页开发者能够方便快速的调试和定位页面问题。
- 打开谷歌浏览器菜单,选择“更多工具”>“开发者工具”
- 网页上右击,选择“检查”选项
- 使用快捷键盘,Ctrl+Shift+I(Windows) Cmd+Opt+I
使用设备模式能够模拟网页在响应式布局,即移动端下的表现行为,经常被使用于开发H5页面时的调试。
使用元素面板,通过自由的操作DOM和CSS,来调整网页的布局和整体设计。
使用控制台可以打印开发过程中的日志诊断信息,同时它还是网页与开发者之间的人机交互接口。开发者可以输入JavaScript代码并执行。
在源代码面板,可以使用断点调试JavaScript代码,并且能通过工作区使用开发者工具的实时编辑器对本地代码进行修改。
使用网络面板可以检视网络请求以及资源请求,进而优化页面加载性能。
注意:Chrome 57之后 时间线面板更名为性能面板
使用性能面板能够记录和展示在网生命周期中发生的各种事件所消耗的时间,从而提升网页整体的性能
注意:Chrome 57之后 分析面板更名为内存面板
内存面板能够提供比�性能面板的更多的信息,例如内存泄漏等
注意:Chrome 52之后 资源面板更名为应用面板
应用面板可以检视所有的页面加载的资源,包括DataBase、Web SQL、本地缓存、图片、字体、样式文件等等
安全面板用来调试跟安全证书相关的各种复杂问题