本文详细介绍了Chrome浏览器的F12开发者工具，包括元素面板用于DOM和CSS的操控，控制台面板用于JavaScript交互和诊断，源代码面板支持JavaScript调试和实时编辑，网络面板用于资源请求分析，内存面板关注性能优化，应用面板记录所有资源信息，安全面板解决安全问题，性能面板提升页面运行性能。此外，还讲解了Network-Controls控件，展示资源请求的详细信息。
一、各种面板
元素面板：使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。
控制台面板：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell，在页面上与JavaScript交互
源代码面板：在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器
网络面板：从发起网页页面请求Request后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化
内存面板：分析web应用或者页面的执行时间以及内存使用情况
应用面板：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
安全面板：使用安全面板调试混合内容问题，证书问题等等
性能面板：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能
二、Network
Network-Controls控件
最低0.47元/天 解锁文章
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
