Chrome开发者模式及debug mode的使用

Chrome devtools

Chrome开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

打开方式

• 菜单中选择更多工具>开发者工具
• 在页面中右键点击，选择检查
• 使用快捷键Command+Option+I或F12+Fn

---

面板

• 元素面板
  可以自由的操作DOM和CSS来迭代布局和设计页面。

• 控制台面板
  记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。

• 源代码面板
  设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

• 网络面板
  了解请求和下载的资源文件并优化网页加载性能

• 性能面板
  通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

• 内存面板
  如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。

• 应用面板
  检查加载的所有资源，包括IndexedDB与Web SQL数据库，