官方文档地址

https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn#top_of_page

Chrome 开发者工具

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

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

打开Chrome 开发者工具

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

了解面板

设备模式

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

Elements(元素面板)

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

Console(控制台面板)

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

Sources(源代码面板)

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

Network(网络面板)

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

Timeline(时间轴面板)

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

Profiles(分析面板)

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

Application(资源面板)

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

Security(安全面板)

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

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/

results matching ""

    No results matching ""