浏览器调试工具精讲 Chrome Dev Tools精讲，前端必看！

参考视频

各个面板的功能介绍

• 打开Dev Tool
  快捷键 F12

• 打开命令菜单
  快捷键 ctrl+shift+P
  输入theme 可以切换light和dark theme；
  
  输入screenshot 可以用来截图；
  
  输入dock，选择调试器的位置；
  

常用Tab中的Element

• 给元素添加样式
• 让:hover常驻 悬停
• 编辑class
• 复制样式
• 观察flex布局
• 观察grid布局
  

常用Tab中的Console

快捷键 ctrl+shift+J

• 执行语句
• $_ 返回上一条语句的执行结果
• $0 上一个选择的DOM结点
• console.log() 常用：error warn table clear group time
• log级别筛选
• 监测某个变量
  

常用Tab中的Source

参考 JS调试

常用Tab中的Network

常用Tab中的Application

• Local Storage
• Session Storage
• Cookies
  

CSS调试

• 网页元素，右键检查，即可看到右边元素

• 查询DOM树
  Elements面板 查询方式：Ctrl+F 搜索

1. 直接文字搜索 例如
2. css选择器搜索 例如 section#section_one
3. xpath搜索 例如 //section/p
   

• Console
  定位到元素节点：inspect(element)
  例如：inspect(document.getElementById(‘est_en’))
  

JS调试

• 代码中写debugger 精准定位和调试
• Sources中打断点
• Enable code folding 折叠代码
  
• Elements中元素发生改变的时候 断点调试
  
• 事件监测断点 Sources-Event Listener Breakpoints
  
• 忽略源代码调试 Sources-Call Stack - add script to ignore list
  

一些小技巧

网络

查询到ajax请求信息，如果是每秒定时器，那每秒都有信息提示。

渲染

F12顶上设置-渲染-突出显示绘制区域

配置后，当数据进行刷新渲染的时候，元素呈现绿色框