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

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

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

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


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

5、CSS調(diào)試中，還有盒子模型的形象視圖。在右側(cè)折疊面板中可以打開，實(shí)現(xiàn)對margin,padding等的定位計(jì)算。

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