炫意html5
最早CSS3和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

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

  • 安全性

炫意HTML5 » Chrome 开发者工具-概述

Java基础教程Android基础教程