Debug前端HTML/CSS

译者按： 关于使用 Chrome 开发者工具非常全面的介绍，值得一读！

本文采用意译，版权归原作者所有



我强烈感觉到至少有一半人会这么想：“HTML/CSS 甚至算不上一门编程语言”。不过，前端开发中，HTML/CSS 方面 Debug 技巧不足导致的问题非常多。

并不是每一个开发者都知道他眼前早就有一个非常强大的 Debugger，可以帮助他追踪和消除 bug。这个 Debugger 就是他自己的谷歌浏览器。在之前一篇博客中，我主要介绍了Console。在这篇，我将专注于 Elements 标签。

这篇文章将会包含：

  • 将你的浏览器变为 IDE-可动态编辑的 HTML/CSS
  • HTML 断点
  • 改变元素状态
  • 搜索特定的元素
  • 通过实例来练习新的技巧
  • 理解元素样式

好啦，基本介绍的差不多了。接下来给你展示新的技巧。

快速进入 Element 标签的两个方法

  • 对着页面任何元素(Elements)点击右键，选择“检查”
  • 使用 Ctrl+Shift+I(Mac:Cmd+Opt+I)打开开发者面板，选择元素(Elements)标签。

元素(Elements)标签的左侧

DOM 树



首先，DOM 树元素可以被进一步检查(inspected)。点击左侧的三角来展开查看更多的元素。

点击鼠标右键，会有更多的选择：

  • Add attribute - 对选中的元素添加新的属性
  • Edit attribute - 编辑某个属性，当你鼠标在某个属性上方点击右键时方才显示。
  • Edit as HTML —  你可以编辑整个 HTML；如果你想把元素的一部分拷贝使用，这样操作也很方便。

Copy:

  • Copy outerHTML —  将整个标签及其内容拷贝。
  • Copy selector —  拷贝 CSS 选择器(div > span > #id)
  • Copy XPath —  拷贝 XPath //*[@id=”answer11208745–20”]/div/div[3]/time, 更多请查看文末拓展阅读
  • Cut element —  剪切元素
  • Copy element —  拷贝元素
  • Hide element —  通过添加display:none来临时性地隐藏元素；(cmd+H/Ctrl+H)
  • Delete element —  删除元素，可以使用 cmd+z 来取消删除
  • Expand all — 将所有节点展开
  • Collapse all —  将所有节点折叠
  • :active —  将元素设置为 active 状态*
  • :hover —  将元素设置为 hover 状态*
  • :focus —  将元素设置为 focus 状态*
  • :visited —  将元素设置为已访问状态*
  • Scroll into view —  将网页快速滑动到元素所在位置

Break on:

  • subtree modification —  在子节点被修改的时候中断执行 **
  • attribute modification —  在属性被修改的时候中断执行 **
  • node removal **
  • 在右侧的样式(styles)中检查效果
    ** 在右侧(DOM breakpoints)可以查看设置的断点

断点实战

不实战一下，理解起来可能有点困难，特别是如果你还从未使用过它们。接下来我创建一个简单的例子交给你来玩。

所有的步骤都在 HTML 文件中。如果 debugger 在 jQuery 中中断暂停，你可以将 jQuery 屏蔽(如下图所示)。



点击查看示例

元素快速定位



点击该图标，然后在页面上选中元素，DOM tree 就会快速定位到该元素的源代码位置。

源代码



If you click on the source file like styles, fonts, js files, there will be some additional options.

如果你点击样式(style)，fonts，js 文件，会有一些额外的选项。

捕获节点截图

一个很酷的技巧就是你可以将选中的节点生成一张 png 图片。

  • 点击鼠标左键选中元素
  • 使用 Cmd+Shift+P/Ctrl+Shift+P 打开命令输入窗口
  • 输入node screenshot
  • 选中 Capture node screenshot

将会生成一张 PNG 图片。

通过字符串、CSS 选择器、XPath 快速查找



当元素标签打开，输入 Cmd/Ctrl+f，将会打开一个输入窗口。

直接编辑源文件

在 Chrome 开发者面板可以直接编辑源文件并保存，不用刷新页面。



  • 打开 source 标签，选中并打开你想要编辑的文件并编辑
  • 然后右键，如上图所示
  • 在 Windows 下，你可以点击整个文件夹(左侧蓝色的图标)，然后选择Add folder to workspace
  • 在 MacOS 下，你可以将整个文件夹拖动到你本地的目录。你也可以右键选择Add folder to workspace
  • 接下来你所有的更改都会自动反应到对应的本地代码。

Fundebug是可以复现用户行为的 JavaScript 错误监控平台，支持各种框架，可以帮助您第一时间发现 BUG！

元素(elements)标签的右侧区域

样式(styles)

当你选中某个元素，对应的样式以及其他一些属性会在右侧显示出来。



  • :hov - 当你展开:hov，其提供的选项可以让你激活元素的不同状态，比如 hover, focus。在 DOM tree 上也可以直接对元素进行这样的操作。
  • .cls - 对选中的元素添加 class
  • + - 添加新的 style 到该元素

在 Styles 标签，你可以找到对应元素适配的所有的 style。



一些标记的含义



黄色的警告标识表面样式的名字或则值格式不正确。比如上图widd是一个错误的属性名。



被划掉意味着被其它样式覆盖，比如另一个样式使用了important关键字。



灰色背景的样式文件是有效但不可编辑。这些样式文件来自于浏览器。



右侧有该样式所在的文件，点击即可查看该文件。

样式的计算结果(Computed Styles)



最上方的矩形框可视化地展示了 padding, border 和 margin 的效果以及其值。

对于非静态定位的元素，top、right、bottom、left 属性会显示出来。所有的值都可以左键双击，然后修改。

下面是所有适用的样式规则。每一条都可以展开查看，并且右侧有对应的原文件的位置。



所有计算好的样式不可编辑，不过你可以点击灰色的箭头进入对应的样式来进行编辑。

Event Listeners



在该标签页可以看到所有的事件监听函数。

  • 位于左侧的刷新按钮 —  刷新所有监听事件
  • 父元素(Ancestors)选择框 —  显示/隐藏所有元素的父元素的监听函数

All/Blocking/Passive 下拉菜单，你可以选择一个:

  • Passive events listeners —  一个新的 web 标准，在 Chrome51 发布的新特性，可以提升滑动的性能。Chrome Release Notes
  • Blocking —  典型的那些过时的事件监听.
  • Framework listeners —  检车来自框架的事件监听。当选中后，我们看到的 jQuery 不再是一个连接，而是具体函数调用的位置。

每天使用

当你在阅读不熟悉的代码的时候，事件监听标签非常有用。它帮助你快速定位该函数绑定到哪个元素。”Show function definition”可以跳转到函数的定义。



如果你使用for循环来添加元素，可能你不小心把多个事件绑定到同一个元素。那么通过查看事件监听可以帮你发现这个 bug。

记得选中Framework listeners来查看具体的绑定，而不是抽象的 jQuery。Fiddle 示例



属性



每一个被选中的 HTL 元素都是一个 DOM 对象。它具有相应的属性。属性标签显示选中的 DOM 对象的继承结构。

老实说，我并不怎么使用这个功能。我主要的使用场景是查看元素的属性，而不是使用console.log以及重新载入和刷新。如果你有什么更好地说那个场景，不妨分享一下。

Shapes and \$scope

Shapes 和\$scope 是额外的标签来自 Chrome 的插件。在接下来的文章我会详细介绍。

结束语

如果你想知道更多，可以查看命令菜单(Command Menu)，或则拓展阅读。

拓展阅读

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/

您的用户遇到BUG了吗？

体验Demo 免费使用