chrome开发者工具简单使用

打开，与切换

1. 使用 Ctrl+Shfit+I 或使用F12打开开发者工具
   
2. 使用 Ctrl + [ 和 Ctrl + ] 快捷键在面板之间切换。
   
3. 使用Ctrl+Shift+J 打开控制台面板
   

搜索，导航和过滤

1. ctrl+o 过滤一个脚本，样式表或者根据文件名过滤一个片段
   
2. ctrl+f 在当前文件中进行文本搜索
   
   点击A↘B按钮进行查找和替换
3. Ctrl+Shift+F 在所有文件中搜索文字
   
4. Ctrl+Shift+O 在打开的文件中过滤一个函数或选择器
   
5. 实时编辑脚本和样式
   开发工具支持实时编辑脚本和样式，不需要重新加载页面就可以看到效果。这对于测试设计的更改，原生 JavaScript 函数或者代码块很有帮助。

• 脚本
  

可以看到在脚本中添加了一条控制台消息，对应的控制台输出了此消息

• 样式
  我们给p标签添加了一个背景色，响应的页面就会做出以下改变：
  

6. 已修改文件另存为本地文件
   
7. 查看本地文件修改历史