2019-08-22【chorme devtools】

九大功能面板:

1.Elements元素免半年:检查和调整页面,调试DOM,调试CSS

2.Network网络面板:调整网络,了解页面静态资源分布,网页性能检测

3.Console控制台面板:调试JavaScript、查看console log日志、交互式代码调试

4.Sources源代码资源面板:调试JavaScript页面源代码,进行断点调试代码

5.Application应用面板:查看&调试客户端存储,如cookie,localStorage,sessionStorage等

6.Performance性能面板:查看页面性能细节,细粒度对网页载入进行性能优化(高阶)

7.Memory内存面板:JavaScript CPU分析器,内存堆分析器(高阶)

8.Security安全面板:查看页面安全及证书问题

9.Audits面板:使用Google Lighthouse辅助性能分析,给出优化建议(高阶)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 随着现代框架,ES6的出现以及日益增长的安全风险,了解如何使用Chrome开发工具可以极大地提高工作效率,并帮助您...
    晨光guocg阅读 1,861评论 0 52
  • Chrome以其界面简洁、大量的应用插件、良好的代码规范支持、强大的V8解释器,和Chrome开发者工具给前端开发...
    betterwlf阅读 1,025评论 0 0
  • 1. 摘要 不懂CHROME前端调试工具,遇到问题就叽叽喳喳问前端,显得很不专业。辉哥利用五一节日,补补功课,引用...
    笔名辉哥阅读 1,668评论 1 50
  • 本文原创:huhongtao 前端调试方法 css调试 js调试 network 性能调试 Application...
    jad_design阅读 2,767评论 0 4
  • 越来越相信这句话了。 这几天认识了好几位优秀的小伙伴,有的人把自律做到了极致,有的人把学习当成事业,有的...
    UMe米立阅读 206评论 0 3