school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

Chrome 开发者工具

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

打开Chrome 开发者工具

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 “检查”
  • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

了解面板

设备模式

Device Mode

使用设备模式构建完全响应式,移动优先的网络体验。

元素面板

Elements Panel 使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.

控制台面板

Console Panel

在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell在页面上与JavaScript交互。

源代码面板

Sources Panel

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

网络面板

Network Panel

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

性能面板

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

内存面板

如果需要比时间轴面板提供的更多信息,可以使用“配置”面板,例如跟踪内存泄漏。 Use the Profiles panel if you need more information than the Timeline provide, for instance to track down memory leaks.

应用面板

使用资源面板检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。

安全面板

Security Panel

使用安全面板调试混合内容问题,证书问题等等。

参与互动

Twitter Stack Overflow Slack