第一模块:
课程名称:Chrome DevTools开发者工具调试指南
章节名称:1-1 ~ 3-3
讲师姓名:宗泽
第二模块:
内容概述:
第1章主要对DevTools的功能做了全面的介绍;第2章重点讲解了使用 Elements面板 调试 DOM;第3章重点讲解了如何进行样式调试。
第三模块:
学习心得:
0.前置知识:
Chrome DevTools的9大功能面板:
( 1 ) Elements元素面板:检查和调整页面,调试DOM , 调试CSS
(2)Network网络面板:调试请求,了解页面静态资源分布,网页性能检测
( 3 ) Console控制台面板:调试JavaScript、查看Console log日志、交互式代码调试
( 4 ) Sources源代码资源面板:调试js代码,这个页面可以进行断点调试
( 5 ) Application应用面板:查看&调试客户端存储,如Cookie , LocalStorage , SessionStorage等
( 6 ) Performance性能面板:高阶面板,一般程序员用不到。查看页面性能细节, 细粒度对网页载入进行性能优化
( 7 ) Memory内存面板:JavaScript CPU分析器,内存堆分析器(高阶)
( 8 ) Security安全面板:查看页面安全及证书问题
( 9 ) Audits面板:使用Google Lighthouse辅助性能分析,给出优化建议(高阶)
一些快捷键:
快速进入Console查看log运行JavaScript : Control+ Shift+J (Windows)
讲解的目录结构:
1.调试dom
在Elements元素面板,双击dom就可以编辑选中的dom
2.调试css样式
3.调试js
4.调试网络network
5.调试客户端存储(cookie)
6.移动端(H5)
7.结合React/Vue
*在Console面板中访问节点的方式有:
◆使用document.querySelectorAIl访问
eg:document.querySelectorAll('img')
◆>使用$0快速访问选中的元素
打开开发者工具,使用“Elements”元素选择器去选择dom元素后,在该dom元素后面就会跟着一个$0,这个$0是开发者工具提供的“快捷元素选择工具”。在Console面板下,输入“$0”,便可以打印出该元素。
◆拷贝-> JS Path
JS Path:就是dom元素在dom树里的索引
eg:document.querySelector("#video-box-mocoplayer-hls-video_html5_api")
#video-box-mocoplayer-hls-video_html5_api就是该dom元素的JS Path
小技巧:
在Elements元素面板中打开Console面板:单击“esc”键
*给DOM进行断点调试操作(区别于给js代码的断点调试)
◆属性修改时打断点: break on -> attribute modifications
◆节点删除时打断点: break on -> node removal
◆子树修改时打断点: break on -> subtree modifications
给dom打断点的操作:
使用“元素选择器”选择元素,右键选择“Break on”,其下有三个选项:
subtree modifications:子树修改时打断点
attribute modifications:属性修改时打断点
node removal:节点删除时打断点
所有 paused断点的机制都是:运行到该段代码(也就是:被打断点的代码生效时)断点才会paused住
层叠样式表:一个样式可以被申明多次,但是优先级最高的才会其效果
小技巧:使用“pretty print”/“format”可以将“压缩”的代码格式化成,人可以看得明白的
在“Elements元素面板”下的“Styles面板”中,样式选择器是按优先级从大往小进行排列的
Chrome DevTools支持:将写于浏览器中的调试代码写入到源文件中的
小技巧:强制提升到最高优先级样式:!important
给选中的元素中增加类与伪类:
:hov : 表示元素的状态,打钩就会“切换”掉对应的状态;也就是:原来有的没了,原来没得有了
.cls : 给选中的元素加一个类
+ : 给选中的元素加一个style样式选则器
.cls与+组合在一起,可以对选中的元素应用上自己新增的规则,这些新增加的都临时记入在inspector-stylesheet中。通过点击“样式选择器”后面的源码“index”可以索引到代码的位置。
快速调试CSS数值及颜色、图形、动画等
小技巧:使用Chrome DevTools下的Elements元素面板下的Styles面板进行图形化调节text-shadow、box-shadow、color、background-color
小技巧:使用Chrome DevTools下的
进行动画的图形界面调试
注意:并不是所有Elements元素都有animations,如果选中的元素有动画,那这个Animations面板就会显示出动画的几个状态,也就是动画的“快照”,可以基于动画快照,对动画进行图形化调试。
第四模块:
学习截图:
-
共同学习,写下你的评论
评论加载中...
作者其他优质文章