浏览器调试工具精讲 Chrome Dev Tools精讲，前端必看！
各个面板的功能介绍
-
打开Dev Tool 快捷键 F12
常用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 搜索
- 直接文字搜索 例如
- css选择器搜索 例如 section#section_one
- 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顶上设置-渲染-突出显示绘制区域 配置后，当数据进行刷新渲染的时候，元素呈现绿色框
上一篇：
多线程四大经典案例