網站的兼容性問題是所有前端人員的一個苦惱，每次頁面調試會用多種的瀏覽器進行調試，比如谷歌、火狐、ie6--ie9、google、360等等，很多的網頁制作人員都會經常在我們常用的瀏覽器中進行多次的調試，今天我們就來帶大家說一下在谷歌瀏覽器，在谷歌不斷升級下，它的瀏覽器自帶開發者工具，可以實現代碼修改并預覽。

1、先是啟動谷歌瀏覽器的開發者工具的方法。在瀏覽器右上角的選項中點擊，下拉菜單選工具——開發者工具，快捷鍵CTRL+shift+I （配圖）

2、打開開發者工具后，在瀏覽器下方出現一個調試面板。左側是網頁HTML調試查看，右側是CSS代碼調試，還有一些JS，資源的折疊起來了。

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


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

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

http://www.bangwork.net/jianzhanzhishi/8291.html 如何利用谷歌瀏覽器自帶工具進行網頁調試