網(wǎng)站的兼容性問(wèn)題是所有前端人員的一個(gè)苦惱，每次頁(yè)面調試會(huì )用多種的瀏覽器進(jìn)行調試，比如谷歌、火狐、ie6--ie9、google、360等等，很多的網(wǎng)頁(yè)制作人員都會(huì )經(jīng)常在我們常用的瀏覽器中進(jìn)行多次的調試，今天我們就來(lái)帶大家說(shuō)一下在谷歌瀏覽器，在谷歌不斷升級下，它的瀏覽器自帶開(kāi)發(fā)者工具，可以實(shí)現代碼修改并預覽。

1、先是啟動(dòng)谷歌瀏覽器的開(kāi)發(fā)者工具的方法。在瀏覽器右上角的選項中點(diǎn)擊，下拉菜單選工具——開(kāi)發(fā)者工具，快捷鍵CTRL+shift+I （配圖）

2、打開(kāi)開(kāi)發(fā)者工具后，在瀏覽器下方出現一個(gè)調試面板。左側是網(wǎng)頁(yè)HTML調試查看，右側是CSS代碼調試，還有一些JS，資源的折疊起來(lái)了。

3、谷歌瀏覽器調試的好處就是，可以實(shí)現元素定位，把鼠標放在指定的元素上，就可以在瀏覽器的上面視圖中加灰突出顯示所對應的元素。


4、右側的CSS代碼調試是一個(gè)不錯的工具，不僅可以查看對應的標簽的代碼，同時(shí)還可以實(shí)時(shí)更改代碼的值并在瀏覽器上方視圖中顯現變化。

5、CSS調試中，還有盒子模型的形象視圖。在右側折疊面板中可以打開(kāi)，實(shí)現對margin,padding等的定位計算。

http://www.ezekroy.com/jianzhanzhishi/8291.html 如何利用谷歌瀏覽器自帶工具進(jìn)行網(wǎng)頁(yè)調試