第一模块：
课程名称：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面板就会显示出动画的几个状态，也就是动画的“快照”，可以基于动画快照，对动画进行图形化调试。
第四模块：
学习截图：
-
随时随地看视频
