chrome DevTools学习

一.console中获取dom的三种方式
1.使用document.querySelectAll 访问
2.使用$0快速访问选中元素

image.png

3.拷贝js Path
右键复制，js Path
二.在DOM中断点调试
1.属性修改时打断点 break on -> attribute modifications
2.节点删除时打断点 break on -> node removal
3.子树修改时打断点 break on -> subtree modifications

三，动态追加class

image.png

四.快速调整动画效果

image.png

五 console.table可以打印出表格

image.png

console.group打印组
custom 定制样式

image.png

console.assert()

image.png

console.time()
console.timeEnd() 监听代码执行时间
console.clear() 将log清除
六.使用sippets来辅助Debugging

image.png

七.使用DEvTools 作为代码编辑器

image.png

八.使用 Network Waterfall 分析页面载入性能

image.png

九.使用 Chrome DevTools 进行 H5 页面开发

image.png

image.png

十.集成 React和vue 插件

image.png

image.png