Chrome Devtools 介绍
Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具。DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会。DevTools可以有效地 跟踪布局问题 , 设置JavaScript断点 ,以及 进行javascript代码的优化 。
注意:如果你是一个web开发人员,想要最新版本的DevTools,移应该使用Google Chrome Canary。
打开DevTools
要在一个网页或者web application中打开DevTools，可以用下面两种方法：
-
选择Chrome浏览器窗口右上角的
菜单
,然后选择 工具 > 开发工具。
-
右键单击任何页面元素>选择 审查元素。
DevTools工具将会在你的浏览器的地步打开。还有几种打开Devtools的快捷方式：
-
使用
Ctrl+Shift+I(Cmd+Opt+Ion Mac)打开DevTools。 -
使用
Ctrl+Shift+J(Cmd+Opt+Jon Mac)打开DevTools并将焦点移到控制台。 -
使用
Ctrl+Shift+C(Cmd+Shift+Con Mac)打开DevTools并将焦点移到检查元素移模式,或者控制检查元素模式开关如果DevTools已经打开了。
DevTools窗口
DevTools以任务的种类被组织到窗口顶部的工具栏里。每个工具栏项和相应的面板都有一个特定类型的页面或应用程序信息,包括 Elements , Source 和 Resources 等。
Devtools的颜色选择器
Devtools 中的颜色选择器
总的来说,在Devtools中有8种工具面板:
你可以用快捷方式 Ctrl +[ 和 Ctrl + ]进行切换.
查看DOM结构和样式
Elements 面板让你看到一棵 DOM 树,并允许你进行 DOM 元素检验和动态编辑。如果需要确认一些页面的 HTML片段，你会经常访问 Elements 面板。
查看一个h标签
查看一个h标签
用控制台工作
JavaScript控制台提供了两种主要功能为开发人员测试web页面和应用程序。在这个地方你可以:
- 在开发过程中打印诊断信息。
- 利用
shell工具进行Documents和Devtools的交互。
你可以使用 Console API 提供的控制台日志诊断信息的API。如 console.log() 或 console.profile() 。
你可以使用 Command Line Api 提供的方法直接在控制台中运行表达式。包括 $() 命令选择元素或者 profile() 进行CPU分析。
在控制台中运行命令
调试javascript
随着JavaScript应用程序的复杂性增加,开发人员需要强大的调试工具来帮助快速发现问题的原因并有效地修复它。Chrome DevTools中有一些有用的工具来帮助我们不那么痛苦地调试JavaScript。
打断点
进行网络加载的优化
Network 面板提供了实时的资源请求和网络下载。识别和解决这些超过预期的请求时间是页面优化的重要一步。
Network
Audits
Audits 面板可以从一个页面加载的时候开始分析一个页面。然后提供降低页面加载时间、增加页面响应的优化建议。
更多见PageSpeed Insights。
优化页面渲染
Timeline 面板给你一个完整的关于加载和使用web应用程序或页面的时间花费的信息。所有事件,从解析JavaScript加载资、,计算样式、重新渲染都将绘制于Timeline面板上。
Timeline
javascript && CSS 优化
Profiles 面板可以查看web应用或页面的执行时间和内存使用。这些有助于理解,资源被使用在哪里,帮助优化代码。提供的分析器有:
-
CPU profiler 显示页面的
JavaScript函数的执行时间. -
Heap profiler 显示页面的
JavaScript对象和DOM节点内存分配。 - JavaScript profiler 显示页面脚本的执行时间。
Profiler
查看存储
Resources 面板可以查看页面上加载的资源. 也可以和 HTML5 Database、 Local Storage 、 Cookies 、 AppCache 等进行交互.
Resource 面板
