为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】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://img1.sycdn.imooc.com//62fe53810001884e17530825.jpg

  11. css

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

  

课程收获:

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

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

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


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




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消