Chrome的浏览器

课程大纲

Elments元素页面
Network网络面板
Console控制台面板
Sou rces源代码资源面板（js断点调试）
Appkication应用面板
Performance性能面板（性能优化）
Memory内存面板
Security安全面板（证书查看）
Audits面板
 打开chrome开发者工具（更多工具-开发者工具；右键-检查；快捷键ctrl+shift-i；查看dom或样式：control+shift+c；进入console查看log运行：control+shift+j；f12）

调试dom

1. 查看与选择dom节点
   Ctrl+f搜索
2. 实时编辑html和dom节点
   *placeholder带有文本的搜索字段
   
3. Console访问节点
   使用Document .querySelectorAll(‘ ’)
   $0
   拷贝 Js-path
4. 断点dom调试
   属性修改break-on ->attribute modifications
   节点删除break-on ->Node removal
   子树修改break-on ->subtree modifications

调试样式css

1. 查看和编辑css
   被划掉的css（被级别更高的）
2. 增加类和伪类
   ：hov 增加类：Active，Hover，focus，vistied，focus-within
   .cls增加一个类
3. 调试css图形颜色
   Transition：1s all ease-in-out（animations.css）

调试javascript

1. 运行，交互性
   Document.cookie(浏览器信息)
2. 查看打印的log日志
   Console.log打印信息（输入多个信息自动连接）
   Console.warn警告信息（标黄）
   Console.error错误信息（红色）-在一场逻辑中catch主的错误信息使用
   Console.table展示json格式的复杂信息
   Console.group信息组展示（groupend）
   Console custom定制样式
   Console.assert断言（false，‘断言失败‘）
   Console.time 精确时间
   Network网络请求错误展示
   Console.cleared清除
3. 断点调试debugging
   传统的console.log()和alert()打印运行时间信息调试
   Js断点调试（debugger，step over）
   运行保存（console下可以运行）
4. Sourous面板（实时编辑）
   Page（查看对应页面，ctrl+p打开，ctrl+shift+p命令行，
5. 使用snippets来辅助debugging
   $(‘’)动态加入基础库等
   *test打印
6. 使用devtools作为代码编辑器
   Add folder to workspace
    网络network调试
7. Network面板简介
   查看网页资源分布
   正对某一请求request或时间消耗
   分析网页性能优化，使用工具代理页面请求数据等
8. Network查看站点网络
   Stop recording network log加载相应的log日志
   Clear清除
   Capture screenshots页面加载中的截图
   Filter 过滤（默认all，xhr-header头部，timing排队的时间等，依步请求）
   底部：请求数量，资源，dom和load时间
9. Network waterfall分析页面载入性能
   请求概括（优化）

客户端储

1. application面板
   Application
   Storage-cookie网址
   Cache
   Frames （）
2. 查看localstorage与sessionstorage
   Storage下域名
   Name删选key和value修改
   Localstorage.getltem

移动端hs

1. Toggle device toolbar ctrl+shift+m
   Responsive(切换设备)
2. H5编写ctrl+shift+p
   Sensors（传感器模拟）geoLocation地址OrientationTouch
   Network condition（）caching

结合recat/vue

1. Rea ct插件
2. 集成vue插件
   Vue.js devtools