疑问：Chrome开发工具

Posted 2021-03-06 qq3279338858

Home

打开Chrome 开发者工具

了解面板

设备模式

• 注释：移动端开发工具

元素面板

• 使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面
• 注释:Elements标签页

控制台面板

• 在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell（壳） 在页面上与javascript交互。
• 注释：Console标签

源代码面板

• 在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
• 疑问：Workspaces（工作区）是指哪部分？不会有安全问题吗？
• 注释：使用开发者工具的Workspaces（工作区）进行持久化保存，没有对应的菜单入口，请参考 https://developers.google.cn/web/tools/setup/setup-workflow
• 注释:Sources标签页

网络面板

• 使用网络面板了解请求和下载的资源文件并优化网页加载性能。
• 注释：了解资源时间轴，没有对应的菜单入口，请参考 https://developers.google.cn/web/tools/chrome-devtools/network/understanding-resource-timing
• 注释：网络带宽限制，没有对应的菜单入口，请参考 https://developers.google.cn/web/tools/chrome-devtools/network/network-conditions
• 注释:Network标签页

性能面板

• 在 Chrome 57 之后时间线面板更名为性能面板
• 使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能
• 注释:Performace标签页

内存面板

• 在 Chrome 57 之后分析面板更名为内存面板.
• 如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏
• 注释:Memory标签页

应用面板

• 在 Chrome 52 之后资源面板更名为应用面板
• 使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表
• 疑问：本地和会话存储，应用程序缓存具体是指？
• 注释:Application标签页

安全面板

• 使用安全面板调试混合内容问题，证书问题等等
• 疑问：什么是混合内容问题？
• 疑问：证书是如何运用的？

————————————————————————————————————————————————————————————————————