Chrome开发工具使用技巧

一、 打开Chrome开发工具

. 在Chrome菜单中选择：更多工具 > 开发者工具
. 页面点击右键 > 检查
. 快捷键也可以用来打开开发工具： Cmd + Opt+ I (Window：Ctrl + Shift + I )或按 F12

二、 Chrome开发简介

目前，开发工具工具主要有八个功能（位置可根据自己需求拉拽调整），本文会重点介绍前四个。
. 元素: 元素面板让你看到一个 DOM 树的全部相关信息，并允许你检查以及在传输过程中编辑 DOM 元素
. 控制台: 为开发者提供了测试 Web 页面和应用程序两个主要功能,其中包括：在开发过程中记录诊断信息、一个可与文档和工具交互的 shell 提示符。
. 来源: 调试工具来帮助开发者快速发现问题的原因和并找出有效的解决方法。
. 网络: 提供有关已经下载和加载过的资源的详细分析。
. 性能: 在加载和使用你的网页应用程序或网页时，提供时间轴面板给你关于时间开销的完整概述。
. 内存: 为网络应用程序或页面配置执行时间和内存使用量。有助于你理解资源的消耗，以帮助你优化你的代码。提供的分析器有：CPU 分析器会显示你页面上的 JavaScript 函数的执行时间、堆内存分配器 显示页面的 JavaScript 对象和 DOM 节点、JavaScript 配置文件会显示脚本的执行时间。
. 应用
. 安全
提示： 你可以使用 Command + [ 和 Command + ] 快捷键在面板之间移动。

三、 各种按钮使用

 尺寸菜单

点击可切换为浏览器/手机/pad尺寸。点击尺寸，可根据需求选择不同的尺寸大小，也在尺寸旁的输入框自定义尺寸大小。

 命令菜单
使用 Cmd + Shift + P 呼出命令工具(或按图右击选中)，在命令工具输入：

命令菜单有很多有用命令，例如
. screenshot命令实现不同的屏幕截屏，比如选择“截取完整尺寸的屏幕截图”，就可以就获得当前页面的完全完整屏幕截图
<