接下來小編將以百度首頁和新浪首頁為例，手把手教大家如何使用Google瀏覽器自帶的調試工具的具體方法步驟，這是前端調試JS與CSS樣式必備，還不知道chrome自帶調試工具使用方法的朋友跟著小編一起去看看吧！

軟件名稱：谷歌瀏覽器 GOOGLE Chrome 32位 v49.0.2623.75 Stable穩定安裝版(支持win2003)軟件大?。?3MB更新時間：2016-05-17

如何使用Google瀏覽器自帶的調試工具？

實例一：百度首頁

1、打開Google瀏覽器，打開任意一個網頁，這里以百度首頁為例

2、按下F12鍵，能看到會彈出如下圖所示的對話框

3、鼠標右鍵需要修改的地方

4、可以看到需要改動的地方，對應區域的CSS樣式都在右側區域顯示

5、鼠標左鍵單擊箭頭所指區域，可添加所需的樣式，并且可以實時的顯示出來，當不需要時，去掉勾選即可，也可以直接按刪除，制表符Tab可以自動補全屬性名稱

6、可以根據標簽的id或者class值獲取其屬性，當提示undefined時，就需要查看是否存在這個標簽值

7、下圖顯示的是進入網頁所需的文件，同樣的可以在里面直接修改，但不會保存到本地文件中

8、下面才是調試的重頭戲，以12306購票網為例，按下F12，打開需要調試的JS文件，在行開頭單擊鼠標左鍵，打下斷點，如下圖所示?？旖萱IF11是進入下一步，shift+F11跳出進入下一步，F8跳到下一個斷點，這樣就可以看到每一步程序運行所顯示的結果，此時可以用步驟6用到的方法來查看標簽的屬性

實例二：新浪首頁

1. 打開Chrome，打開任意一個網頁，下圖為新浪首頁：

2. 按下F12鍵，能看到會彈出如下圖所示的對話框

3. 鼠標右鍵需要修改的地方，在彈出的選項選擇”檢查“，如下圖：