谷歌浏览器开发者工具.pdfVIP

目 录 概览 配置开发者工具 快捷键 模拟移动设备 响应式设备视图 模拟位置和加速度计 远程调试安卓设备 访问本地服务器 元素面板 编辑样式 编辑DOM 控制台面板 命令行 代码调试 格式化混淆的代码 工作空间 网络 资源加载时间 性能优化 时间线 如何使用时间线 强制同步布局 分析器 代码执行优化 解决内存问题 应用面板 安全 本文档使用 看云 构建 - 2 - 概览 概览 谷歌浏览器开发者工具 打开谷歌开发者工具 开发者工具面板 设备模式 元素 控制台 源代码 网络 时间线 分析器 应用 安全 谷歌浏览器开发者工具 谷歌浏览器开发者工具 （以下简称谷歌开发者工具 ）是一套基于谷歌浏览器内嵌的网页调试工具 ，使得网 页开发者能够方便快速的调试和定位页面问题。 打开谷歌开发者工具 打开谷歌浏览器菜单 ，选择 “更多工具” “开发者工具” 网页上右击 ，选择 “检查”选项 使用快捷键盘 ，Ctrl+Shift+I(Windows) Cmd+Opt+I 开发者工具面板 设备模式 使用设备模式能够模拟网页在响应式布局 ，即移动端下的表现行为 ，经常被使用于开发H5页面时的调试。 设备模式 测试响应式和特定设备视图展现 模拟传感器 ：地理位置和加速度计 本文档使用 看云 构建 - 3 - 概览 元素 使用元素面板 ，通过自由的操作DOM和CSS ，来调整网页的布局和整体设计。 检视以及调整网页 编辑样式 编辑DOM 本文档使用 看云 构建 - 4 - 概览 控制台 使用控制台可以打印开发过程中的日志诊断信息 ，同时它还是网页与开发者之间的人机交互接口。开发者 可以输入JavaScript代码并执行。 使用控制台 人机交互的命令行 源代码 在源代码面板 ，可以使用断点调试JavaScript代码 ，并且能通过工作区使用开发者工具的实时编辑器对本 本文档使用 看云 构建 - 5 - 概览 地代码进行修改。 断点调试 调试混淆后的代码 工作区持久化设置 网络 使用网络面板可以检视网络请求以及资源请求 ，进而优化页面加载性能。 网络面板基础 理解资源时间线 网络优化 本文档使用 看云 构建 - 6 - 概览 时间线 使用时间线能够记录和展示在网页生命周期中发生的各种事件所消耗的时间 ，从而提升网页整体的性能 分析运行性能 如何使用时间线功能 避免强制同步布局事件的发生 本文档使用 看云 构建 - 7 - 概览 分析器 分析器面板能够提供比时间线的更多的信息 ，例如内存泄漏等 JavaScript CPU 分析器 堆分析器 本文档使用 看云 构建