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

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

實例一：百度首頁

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

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

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

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

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

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

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

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

實例二：新浪首頁

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

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

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

4. 可以看到需要改動的地方，對應區域的CSS樣式都在右側區域顯示，此時在右邊的代碼就可以進行調試了，如下圖：

教程結束，以上就是關于如何使用谷歌瀏覽器自帶的調試工具?chrome自帶調試工具使用方法實例，希望對大家有所幫助!更多精彩，盡在武林網網站！