我强烈感觉到至少有一半人会这么想:HTML/CSS甚至算不上一门编程语言。不过前端开发中,HTML/CSS方面Debug技巧不足导致的问题非常多。
并不是每一个开发者都知道他眼前早就有一个非常强大的Debugger,可以帮助他追踪和消除bug。这个Debugger就是他自己的谷歌浏览器。在之前一篇博客中,我主要介绍了Console。在这篇,我将专注于Elements标签。这篇文章将会包含:
将你的浏览器变为IDE-可动态编辑的HTML/CSSHTML断点改变元素状态搜索特定的元素通过实例来练习新的技巧理解元素样式?understandingstylesintheElementstab基本介绍的差不多了。接下来给你展示新的技巧。
快速进入Element标签的两个方法对着页面任何元素(Elements)点击右键,选择“检查”使用Ctrl+Shift+I(Mac:Cmd+Opt+I)打开开发者面板,选择元素(Elements)标签。元素(Elements)标签的左侧DOM树首先,DOM树元素可以被进一步检查(inspected)。点击左侧的三角来展开