像 IE 8、Chrome 都自带有网页调试工具,在调试 HTML 和 CSS 时特别方便。也有一些插件具有类似功能,比如微软出品的用于 IE 的 IE Developer Toolbar 这款工具。
安装后,会在 IE 工具栏显示一个箭头图标,单击该图标,就会启动 IE Developer Toolbar。
如果要快速定位到某一个元素,Chrome 中的调试可以通过搜索来实现,然而 IE Developer Toolbar 还有更方便的,选择菜单“Find”下面的“Select Element by Click”,此时我们再单击页面中的某个区块,调试窗口中的 HTML 树就自动定位到该元素了。
另外,选择“Outline”下面的“DIV elements”,此时所有的 div 元素就被突显出来了。
在样式上右键,选择“Trace Style”,会跟踪到样式起作用的地方,这对复杂的样式覆盖中,找出到底哪个样式起了作用非常方便。