这里我假设你用的是 Chrome 浏览器, 如果恰好你做 web 开发, 或者是比较好奇网页中的一些渲染效果并且喜欢折腾, 那么你一定知道 Chrome 的开发者工具了.
其实其他浏览器也有类似工具, 比如 Firefox 下的 firebug.
本文将会详细讲述如何使用 Chrome 开发者工具, 希望里面有些让你感到惊艳的东西! 即使你不用 Chrome, 那么文中的某些内容也会相当有用.
首先啰嗦一下如何打开开发者工具吧.
可以直接在页面上点击右键, 然后选择审查元素;
或者是打开 Tools--Developer Tools; 或者是用快捷键 Command + Option + I 打开.[ctrl+shift+i 或者 F12]
打开后我们看到的界面大概如下:
Google Chrome 一共提供了 8 大组工具:
Elements: 允许我们从浏览器的角度看页面, 也就是说我们可以看到 chrome 渲染页面所需要的的 html,CSS 和 DOM(Document Object Model)对象. 此外, 还可以编辑这些内容更改页面显示效果;
Network: 可以看到页面向服务器请求了哪些资源, 资源的大小以及加载资源花费的时间, 当然也能看到哪些资源不能成功加载. 此外, 还可以查看 HTTP 的请求头, 返回内容等;
Sources: 主要用来调试 js;
Timeline: 提供了加载页面时花费时间的完整分析, 所有事件, 从下载资源到处理 Javascript, 计算 CSS 样式等花费的时间都展示在 Timeline 中;
Profiles: 分析 web 应用或者页面的执行时间以及内存使用情况;
Resources: 对本地缓存 (IndexedDB,Web SQL,Cookie, 应用程序缓存, Web Storage) 中的数据进行确认及编辑;
Audits: 分析页面加载的过程, 进而提供减少页面加载时间, 提升响应速度的方案;
Console: 显示各种警告与错误信息, 并且提供了 shell 用来和文档, 开发者工具交互.
强大的 Chrome 开发者工具提供了很棒的提示功能, 当我们把鼠标悬停在某些项时, 会显示一些很有用的提示信息, 有时候我们可以得到意想不到的收获.
此外, 开发者工具还提供了 Emulation 功能, 做移动开发时特别有用.
下面先详细研究一下 8 大工具的使用方法.
Elements
Elements 工具像一把手术刀一样 "解剖" 了当前页面, 我们看到的 Elements 页面一般像这样子:
图中标记为 1 的红色区块为页面 HTML 文件, HTML 中的每个元素比如 < body>,<p > 都是一个 DOM 节点, 所有的 DOM 节点组成了 DOM 树. 我们完全可以把红色区块 1 当做是 DOM 树, 把 HTML 元素标签看做 DOM 节点.
当我们在这里选中某一 DOM 对象时, 网页中相应元素也会被阴影覆盖. 我们可以对 DOM 对象进行修改, 修改后结果会在页面实时显示出来. 此外, 还可以用 Command + f 搜索 DOM 树中指定的内容, 或者是以 HTML 形式更改页面元素, 如下图:
选中 DOM 对象之后右键即可以看到一些辅助的功能, 如图中标记为 2 的区块所示:
Add Attribute: 在标签中增加新的属性;
Force Element State: 有时候我们为页面元素添加一些动态的样式, 比如当鼠标悬停在元素上时的样式, 这种动态样式很难调试.
我们可以使用, 是的.
真的是很好用. 要多多使用才有意义.
Force Element State 强制元素状态, 便于调试, 如下图:
Edit as HTML: 以 HTML 形式更改页面元素;
Copy XPath: 复制 XPath;
Delete Node: 删除 DOM 节点;
Break On: 设置 DOM 断点.
图中被标记为 3 的蓝色区块显示当前标签的路径: 从 html 开始一直到当前位置, 我们单击路径中任何一个标签, 即可以跳转到相应标签内容中去.
图中标记为 4 的蓝色区块实时显示当前选中标签的 CSS 样式, 属性等, 一共有以下 5 小部分:
Styles: 显示用户定义的样式, 比如请求的 default.css 中的样式, 和通过 Javasript 生成的样式, 还有开发者工具添加的样式;
Computed: 显示开发者工具计算好的元素样式;
Event Listeners: 显示当前 HTML DOM 节点和其祖先节点的所有 JavaScript 事件监听器, 这里的监听脚本可以来自 Chrome 的插件. 可以点击右边小漏斗形状 (filter) 选择只显示当前节点的事件监听器.
DOM Breakpoints: 列出所有的 DOM 断点;
Properties: 超级全面地列出当前选中内容的属性, 不过基本很少用到.
实际应用中我们经常会用到 Styles, 如下图:
图中标记为 1 的 + 号为 New style rule, 可以为当前标签添加新的选择器, 新建立的样式为 inspector-stylesheet. 此外, 也可以直接在原有的样式上增加, 修改, 禁用样式属性, 如图中标记 2 显示.
在 New style rule 右边为 Toggle Element State, 选择后会出现标记 3 显示的选择框, 如果选中: hover 后, 即可以看到鼠标悬停在页面元素上时的 CSS 样式了, 作用类似于前面的 Force Element Satte, 更多内容可以看: hover state in Chrome Developer Tools .
更强大的是, 开发者工具以直观的图形展示了盒子模型的 margin,border,padding 部分, 如标记 5 所示.
下面动态图给出了盒子模型的一个示例:
Network
有时候我们的网页加载的很慢, 而相同网速下, 其他网页加载速度并不慢.
这时候就得考虑优化网页, 优化前我们必须知道加载速度的瓶颈在哪里, 这个时候可以考虑使用 Network 工具.
下图为我的博客首页加载时的 Network 情况:
请求的每个资源在 Network 表格中显示为一行, 每个资源都有许多列的内容(如红色区块 1), 不过默认情况下不是所有列都显示出来.
Name/Path: 资源名称以及 URL 路径;
Method: HTTP 请求方法;
Status/Text: HTTP 状态码 / 文字解释;
Type: 请求资源的 MIME 类型;
Initiator 解释请求是怎么发起的, 有四种可能的值:
Parser: 请求是由页面的 HTML 解析时发送的;
Redirect: 请求是由页面重定向发送的;
Script: 请求是由 script 脚本处理发送的;
Other: 请求是由其他过程发送的, 比如页面里的 link 链接点击, 在地址栏输入 URL 地址.
Size/Content: Size 是响应头部和响应体结合起来的大小, Content 是请求内容解码后的大小.
进一步了解可以看这里 Chrome Dev Tools - "Size" vs "Content";
Time/Latency: Time 是从请求开始到接收到最后一个字节的总时长, Latency 是从请求开始到接收到第一个字节的时间;
Timeline: 显示网络请求的可视化瀑布流, 鼠标悬停在某一个时间线上, 可以显示整个请求各部分花费的时间.
以上是默认显示的列, 不过我们可以在瀑布流的顶部右键, 这样就可以选择显示或者隐藏更多的列, 比如 Cache-Control, Connection, Cookies, Domain 等.
我们可以按照上面任意一项来给资源请求排序, 只需要单击相应的名字即可.
Timeline 排序比较复杂, 单击 Timeline 后, 需要选择根据 Start Time,Response Time,End Time,Duration,Latency 中的一项来排序.
红色区块 2 中, 一共有 6 个小功能:
Record Network Log: 红色表示此时正在记录资源请求信息;
Clear: 清空所有的资源请求信息;
Filter: 过滤资源请求信息;
Use small resource raws: 每一行显示更少的内容;
Perserve Log: 再次记录请求的信息时不擦出之前的资源信息;
Disable cache: 不允许缓存的话, 所有资源均重新加载.
选择 Filter 后, 就会出现如红色区块 3 所显示的过滤条件, 当我们点击某一内容类型 (可以是 Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other) 后, 只显示该特定类型的资源.
在 XHR 请求中, 可以在一个请求上右键选择 "Replay XHR" 来重新运行一个 XHR 请求.
有时候我们需要把 Network 里面内容传给别人, 这时候可以在资源请求行的空白处右键然后选择 Save as HAR with Content 保存为一个 HAR 文件.
然后可以在一些第三方工具网站, 比如这里重现网络请求信息.
选定某一资源后, 我们还可以 Copy as cURL, 也就是复制网络请求作为 curl 命令的参数, 详细内容看 Copying requests as cURL commands
此外, 我们还可以查看网络请求的请求头, 响应头, 已经返回的内容等信息, 如下图:
资源的详细内容有以下几个:
HTTP request and response headers
Resource preview: 可行时进行资源预览;
HTTP response: 未处理过的资源内容;
Cookie names and values: HTTP 请求以及返回中传输的所有 Cookies;
WebSocket messages: 通过 WebSocket 发送和接收到的信息;
Resource network timing: 图形化显示资源加载过程中各阶段花费的时间.
补充解释
[XPath]
XPath 是一门在 XML 文档中查找信息的语言. XPath 用于在 XML 文档中通过元素和属性进行导航. 比如在图 2 中,
<a href="https://github.com/NUKnightLab/TimelineJS">这里</a>;
这里 a 标签的 Xpath 为:/html/body/div[2]/p[1]/a, 解读为: html 里面 body 标签的第二个 div 标签的第一个 p 标签下的 a 标签.
[HTML DOM 事件]
HTML DOM 允许我们在某一事件发生时执行特定的 JavaScript 脚本, 这里的事件可以是:
鼠标移到某元素之上;
窗口或框架被重新调整大小;
文本被选中;
用户在 HTML 元素上单击;
某个键盘按键被按下...
这里事件发生时执行的 javascript 脚本就是事件监听器.
[DOM 断点]
DOM 断点 (DOM Breakpoints) 可以监听某个 DOM 被修改情况, 在 Elements 中某个元素上右键可以设置三种不同情况的断点:
子节点修改
自身属性修改
自身节点被删除
设置后 DOM Breakpoints 列表中就会出现该 DOM 断点.
一旦监听的 DOM 被修改时, 断点就会定位到执行修改操作的代码, 这对于绑定了多个事件的 DOM 调试有很大的帮助.
[XMLHttpRequest]
XMLHttpRequest 是一个浏览器接口, 使得 Javascript 可以进行 HTTP(S)通信. XMLHttpRequest 对象用于在后台与服务器交换数据, 这样就可以
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
更多关于 XHR 的内容可以看阮一峰老师的 XMLHttpRequest Level 2 使用指南.
[WebSocket]
WebSocket 规范定义了一种 API, 可在网络浏览器和服务器之间建立 "套接字" 连接. 简单地说: 客户端和服务器之间存在持久的连接, 而且双方都可以随时开始发送数据. 这样就解决了长期以来只能由客户端发起请求才能从服务器获取信息这一问题.
更多关于 WebSocket 的内容可以看 WebSockets 简介: 将套接字引入网络
[本文环境]
tips: 这篇文章是基于以下环境中的 chrome 来进行示范说明的.
. 操作系统: OS X 10.9.4
. Chrome 版本: Version 37.0.2062.120
参考:
- Chrome DevTools Overview https://developer.chrome.com/devtools
- Introduction to Chrome Developer Tools
- Chrome Dev Tools: Networking and the Console
来源: http://www.qdfuns.com/article/15097/dd942a40f9186e414f8f606315bc80e9.html