Chrome开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序。其实其他浏览器也有类似工具,比如Firefox下的firebug。

打开工具

Mac版:

  1. 可以直接在页面上点击右键,然后选择检查
  2. 从右上角菜单中选择“工具>更多工具>开发者工具“。
  3. 用快捷键 Command+Option + I 打开

Win版:

  1. 可以直接在页面上点击右键,然后选择检查
  2. 从右上角菜单中选择“工具>更多工具>开发者工具“。
  3. 用快捷键 F12
  4. 用快捷键 Ctrl+Shift+I


工具列表

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用来和文档、开发者工具交互。

Elements

Elements工具像一把手术刀一样“解剖”了当前页面,我们看到的Elements页面一般像这样子:

1.红色区块

红色区块为页面HTML文件,HTML中的每个元素比如<body><p>都是一个DOM节点,所有的DOM节点组成了DOM树。我们完全可以把红色区块1当做是DOM树,把HTML元素标签看做DOM节点。

2.黄色区块

当我们在这里选中某一DOM对象时,网页中相应元素也会被阴影覆盖,右键即可以看到一些辅助的功能,如图中标记为2的区块所示。我们可以对DOM对象进行修改,修改后结果会在页面实时显示出来。此外,还可以用 Command + f搜索DOM树中指定的内容,或者是以HTML形式更改页面元素

  • Add Attribute: 在标签中增加新的属性;
  • Force Element State: 有时候我们为页面元素添加一些动态的样式,比如当鼠标悬停在元素上时的样式, 这种动态样式很难调试。我们可以使用Force Element State强制元素状态,便于调试。
  • Edit as HTML: 以HTML形式更改页面元素;
  • Copy XPath: 复制XPath;
  • Delete Node: 删除DOM节点;
  • Break On: 设置DOM 断点。

DOM 断点(DOM Breakpoints)可以监听某个DOM被修改情况,在Elements中某个元素上右键可以设置三种不同情况的断点:

  • 子节点修改
  • 自身属性修改
  • 自身节点被删除

设置后 DOM Breakpoints 列表中就会出现该DOM断点。一旦监听的DOM被修改时,断点就会定位到执行修改操作的代码,这对于绑定了多个事件的 DOM 调试有很大的帮助。

3.蓝色区块

图中被标记为3的蓝色区块显示当前标签的路径:从html开始一直到当前位置,我们单击路径中任何一个标签,即可以跳转到相应标签内容中去。

4.蓝色区块

图中标记为4的蓝色区块实时显示当前选中标签的CSS样式、属性等,一共有以下5小部分:

  • Styles: 显示用户定义的样式,比如请求的default.css中的样式,和通过Javasript生成的样式,还有 开发者工具添加的样式;
  • Computed: 显示开发者工具计算好的元素样式;
  • Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器,这里的监听脚本可以来自Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。
  • DOM Breakpoints: 列出所有的DOM 断点;
  • Properties: 超级全面地列出当前选中内容的属性,不过基本很少用到。

实际上用的最多的是Style,如下图:

  1. 图中标记为1的+号为New style rule,可以为当前标签添加新的选择器,新建立的样式为inspector-stylesheet。此外,也可以直接在原有的样式上增加、修改、禁用样式属性,如图中标记2显示。

  2. 在New style rule右边为Toggle Element State,选择后会出现标记3显示的选择框,如果选中:hover后,即可以看到鼠标悬停在页面元素上时的CSS样式了,作用类似于前面的Force Element Satte 。

  3. 以直观的图形展示了盒子模型的margin、border、padding部分,如标记5所示。

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是请求内容解码后的大小。
  • 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文件。然后可以在一些第三方工具网站,比如这里重现网络请求信息。

此外,我们还可以查看网络请求的请求头,响应头,已经返回的内容等信息,如下图:

使用技巧

  1. 展开所有子节点

    选择”Elements”面板,选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键,可以展开所有子节点

  2. 改变开发者工具位置

    CMD + Shift + D设置开发者工具有三个选项:1.不在窗口中显示开发者工具2.在窗口右侧显示开发者工具3.在窗口底部显示开发者工具

  3. 通过CSS选择器搜索DOM元素

    CMD + F / CTRL + F和输入你需要的类名或ID名,可以搜索到相应的选择器。

  4. 多个光标

    移动光标按住CMD + 点击可以添加多个光标,你也可以使用CMD + U撤销你选择的最后一个光标。

  5. 复制图片的Data URI

    选择”Network”面板,在“Resources”面板选择你的图片,在图片上右击,选择“Copy Image as Data URI”选项

  6. 通过拖拽选择多列

    选择“Sources”面板,在“Sources”面板编辑器中选择你需要的文件,按住Alt并拖动鼠标

  7. 使用$0获取当前元素

    选择“Elements”面板,在”Element”面板中选择DOM元素,点击”Console”并输入$0可以获取当前元素

  8. Network Filmstrip
    “Film Strip”显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。选择“Network”面板,点击“录制”图标,重新加载页面。

  9. Workspaces

    选择“Sources”面板,在Sources面板中右击并选择“Add Folder to Workspaces”,选择你的文件和右击,并选择Map to Network Resources,修改你的文件代码和查看

  10. Console原生支持类jQuery的选择器

    选择“Console”面板,可以用$加上熟悉的css选择器来选择DOM节点

  11. keys和values前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组