这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
今天老师主要讲了Web调试技术，哇真的是学到了很多，哪怕是浏览器调试的一些知识讲起来也是细微之处有乾坤啊。大开眼界，学到了
一，本节课重点内容
本节课可以分成PC端调试和移动端调试两个部分。其中PC端老师介绍了debug的特点，bug的历史还有Chrome Dev的使用，老师详细的介绍并实操了，Console , Source ,Performance，LightHouse和NetWork的使用.还讲了一些比如Source，代码压缩，Map映射，Application,移动端老师又教了真机调试在ios和Android下的操作还有VConsole,代理工具和Node的调试，最后又介绍了一些常用技巧。
二，详细知识介绍
老师这节课讲了非常多的知识。
先将了Bug与debug的历史与特性，接下来介绍了Dom元素的修改（比如直接改数值，名，添加属性，上下键微调值，勾选/取消类等等）接下来具体的介绍了console的使用，除了我经常使用的console.log，老师还讲了很多，之前都是很少接触。
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.dir
- console.table
- 占位符
其中，很多语句我都没有使用过，看到老师使用之后真的学到了很多，比如console.table具象化展示JSON，dir以类似文件树的方式更直观的展示对象的属性。还有可以给日志添加占位符和样式。比如 %s字符串占位符，%o对象占位符,%c样式占位符。,%d数字占位符。
接下来老师介绍了Sorce Tab的布局和各个的功能与使用。包括debug的暂停/继续，单步跳入，跳出函数，单步执行，激活/关闭所有断点，代码执行异常处自动等等。
接下来老师详细介绍了Break Point与Watch.
我们可以在代码中加入debugger来打上断点标记来调试，也可以手动来操作。
接下来老师讲了几个案例，又讲了代码打包压缩，和代码打包压缩后的调试，讲了Source Map的映射。
接下来老师又讲了NetWork的部分，各个区域的所在位置及功能。
接下来老师又讲了Application的使用与展示，包括cookie，和一些数据的存储。
接下来老师又讲了Performance的面板，并演示了性能分析的例子和功能的区域。
最后老师又讲了Lighthouse的指标分析。
接下来老师又讲了H5应用的调试。
包括真机调试，包括IOS和Android的调试还有VConsole,代理工具和Node的调试，最后又介绍了一些常用技巧。
三，实践的例子
四，课后个人总结
这节课学到了很多的使用技巧，我也在努力试着应用到我日后的项目开发中去。
