C/C++教程

【学习打卡】Chrome DevTools开发者工具调试指南

本文主要是介绍【学习打卡】Chrome DevTools开发者工具调试指南,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:chrome devtools 开发者工具调试指南

课程章节: 课程介绍   Elments 调试Dom     调试样式及css   使用console 和sources调试js

主讲老师:宗泽


课程内容:

  1. Elements 元素面板

    1. 检查调试页面,调试dom,调试css

  2. Network 网络面板

    1. 调试请求,了解静态资源分布,网页性能检测

  3. Console 控制面板

    1. 调试js 查看日志,交互式代码调试

  4. Sources 源代码资源面板

    1. 进行断点调试代码

  5. Application 应用面板

    1. Cookie Local Storage SessionStorage

  6. Perfformance 性能面板

    1. 查看页面性能分析,细粒度对网页载入进行性能优化

  7. Memory 内存面板

  8. Security 安全面板

  9. Audits面板

  10. 快捷键

    1. https://img2.sycdn.imooc.com/62fe53810001884e17530825.jpg

  11. css

    1. https://img1.sycdn.imooc.com/62fe5608000111fc06180226.jpg

  

课程收获:

在日常开发的过程中,经常会使用到开发者工具,最长使用到的就是 elements  console   network Sources

这些工具帮助我们更好的开发,看了老师的视频 发现还有一些 方便快捷的东西 是自己不知道的,以后也要把这些东西很好的运用在日常调试。

https://img2.sycdn.imooc.com/62fe536e0001884e17530825.jpg


https://img1.sycdn.imooc.com/62fe59580001415113440814.jpg




这篇关于【学习打卡】Chrome DevTools开发者工具调试指南的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!