Chrome 开发者工具-概述

html5 • • Chrome开发者工具文档

Chrome 开发者工具

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演，调试和剖析您的网站。

注意：寻找最新版本的Chrome 开发者工具，Chrome Canary总是有最新的DevTools。

打开Chrome 开发者工具

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

了解面板

设备模式

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

  • 设备模式
  • 测试响应和设备特定的可视窗口
  • 模拟传感器：地理位置和加速度

Elements(元素面板)

使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。

  • 检查和调整你的页面
  • 编辑样式
  • 编辑DOM

Console(控制台面板)

Console Panel

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

  • 使用控制台面板
  • 命令行交互

Sources(源代码面板)

Sources Panel

在“源代码”面板中，可以断点调试 JavaScript 。或者通过Workspaces（工作区）连接本地文件，使用开发者工具实时编辑。

  • 断点调试
  • 调试混淆代码
  • 使用开发者工具的Workspaces（工作区）建立持久性

Network(网络面板)

Network Panel

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

  • 网络面板基础
  • 了解资源时间线
  • 网络带宽限制

Timeline(时间轴面板)

Timeline Panel

使用时间轴面板，可以通过记录录像提高页面的运行时性能。并探索网站生命周期内发生的各种事件。

  • 如何看性能
  • 分析运行时性能
  • 诊断强制同步布局

Profiles(分析面板)

Profiles Panel

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

  • JavaScript CPU分析器
  • 内存堆区分析器

Application(资源面板)

Application Panel

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

  • 管理数据

Security(安全面板)

Security Panel

使用安全面板调试混入内容问题，您的证书的安全隐患及更多。

  • 安全性
以上是Chrome 开发者工具-概述的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>