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 — 在子节点被修改的时