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

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

2 、開啟開發者工具後，在瀏覽器下方出現一個除錯面板。左側是網頁 HTML 除錯檢視，右側是 CSS 程式碼除錯，還有一些 JS，資源的摺疊起來了。

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

4 、右側的 CSS 程式碼除錯是一個不錯的工具，不僅可以檢視對應的標籤的程式碼，同時還可以實時更改程式碼的值並在瀏覽器上方檢視中顯現變化。

5 、 CSS 除錯中，還有盒子模型的形象檢視。在右側摺疊面板中可以開啟，實現對 margin,padding 等的定位計算。