分享一下如何更专业的使用Chrome开发者工具

一、文件操作相关

• 快速切换文件
  • 在Chrome开发者工具中，如果要查找项目文件，不必在source控制面板里一个一个找。按Ctrl+P（在Mac系统下是Cmd+P）就能快速搜寻和打开项目文件。
• 在源代码中搜索
  • 若希望在已经加载的页面文件中搜寻特定字符串，可以使用快捷键Ctrl+Shift+F（在Mac系统下是Cmd+Opt+F），并且这种搜寻方式还支持正则表达式。
• 在源代码中快速跳转到指定的行
  • 在Sources标签中打开一个文件之后，按Ctrl+G（在Mac系统下是Cmd+L），然后输入行号，控制台就会跳转到输入行号所在的行，这和在VS里操作类似。

二、编辑操作相关

• 使用多个插入符进行选择
  • 当编辑一个文件的时候，按住Ctrl在要编辑的地方点击鼠标，可以设置多个插入符，这样就能一次在多个地方进行编辑。
• 选中下一个匹配单词
  • 在Sources下编辑文件时，按下Ctrl+D（在Mac系统下是Cmd+D），当前选中单词的下一个匹配也会被选中，方便同时对多个匹配项进行编辑。

三、设备与样式相关

• 设备模式与传感仿真
  • 可以使用Chrome的设备模式来避免在不同设备（如开发完在Visualstudio工具上开发完功能后再到手机上调试）之间频繁切换进行调试，提高开发效率。如果看到压缩后的js文件难以查看，可以使用Sources标签左下角的PrettyPrint功能。
• 颜色属性操作
  • 在样式编辑中选择颜色属性时，点击颜色预览会弹出颜色选择器；当选择器开启，鼠标停留在页面指针会变成放大镜以便选择像素精度的颜色。还可以使用快捷键Shift+Click在rgba、hsl和hexadecimal之间来回切换颜色格式，在CSS编辑器中可利用此功能查看不同状态下元素的样式，对模仿界面的前端爱好者很实用。

四、网络面板相关

• 网络面板构成与功能
  • Chrome开发者工具的网络面板由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这6个区域构成。
    • 控制器中的红色圆点按钮用于开始/暂停抓包；全局搜索按钮可在所有下载资源中搜索内容并定位文件。
    • Disable cache功能可禁止从Cache中加载资源，在调试Web应用时有用，因为Cache会影响网络性能测试结果。
    • Online按钮可模拟2G/3G功能，限制带宽以模拟弱网情况，调整Web应用策略。
    • 抓图信息区域可分析用户等待页面加载时看到的内容和体验情况（可勾选Capturescreenshots启用屏幕截图）。
    • 详细列表详细记录每个资源从请求发起至完成过程中的状态和数据信息，还可按多种属性排序（如按请求发起时间、返回状态码、请求类型、请求时长、内容大小等），选中一项后右边会显示详细信息，可用于判断业务逻辑或逆向推导他人网站业务逻辑。
    • 下载信息概要中要重点关注DOMContentLoaded和Load两个事件及其完成时间，DOMContentLoaded事件发生意味着构建DOM所需的HTML、JavaScript、CSS文件都已下载完成，可查看触发这两个事件所花费的时间。

五、命令菜单相关

• 使用命令菜单执行功能
  • 可以通过快捷键打开命令菜单（Windows系统下是Ctrl+Shift+P，Mac系统下是Cmd+Shift+P），然后转到命令面板输入命令来执行很多强大的功能。