网站的相容性问题是所有前端人员的一个苦恼,每次页面除错会用多种的浏览器进行除错,比如谷歌、火狐、 ie6–ie9 、 google 、 360 等等,很多的网页制作人员都会经常在我们常用的浏览器中进行多次的除错,今天我们就来带大家说一下在谷歌浏览器,在谷歌不断升级下,它的浏览器自带开发者工具,可以实现代码修改并预览。

1 、先是启动谷歌浏览器的开发者工具的方法。在浏览器右上角的选项中点选,下拉选单选工具——开发者工具,快捷键 CTRL+shift+I(配图)

2 、开启开发者工具后,在浏览器下方出现一个除错面板。左侧是网页 HTML 除错检视,右侧是 CSS 代码除错,还有一些 JS,资源的折叠起来了。

3 、谷歌浏览器除错的好处就是,可以实现元素定位,把滑鼠放在指定的元素上,就可以在浏览器的上面检视中加灰突出显示所对应的元素。

4 、右侧的 CSS 代码除错是一个不错的工具,不仅可以检视对应的标签的代码,同时还可以实时更改代码的值并在浏览器上方检视中显现变化。

5 、 CSS 除错中,还有盒子模型的形象检视。在右侧折叠面板中可以开启,实现对 margin,padding 等的定位计算。