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

谷歌瀏覽器 GOOGLE Chrome 32位 v49.0.2623.75 Stable穩(wěn)定安裝版(支持win2003)

• 類型：主頁瀏覽
• 大?。?/span>43MB
• 語言：簡體中文
• 時間：2016-05-17

查看詳情

如何使用Google瀏覽器自帶的調(diào)試工具？

實例一：百度首頁

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

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

3、鼠標(biāo)右鍵需要修改的地方

4、可以看到需要改動的地方，對應(yīng)區(qū)域的CSS樣式都在右側(cè)區(qū)域顯示

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

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

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

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

實例二：新浪首頁

1. 打開Chrome，打開任意一個網(wǎng)頁，下圖為新浪首頁：

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

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

4. 可以看到需要改動的地方，對應(yīng)區(qū)域的CSS樣式都在右側(cè)區(qū)域顯示，此時在右邊的代碼就可以進(jìn)行調(diào)試了，如下圖：

教程結(jié)束，以上就是關(guān)于如何使用谷歌瀏覽器自帶的調(diào)試工具?chrome自帶調(diào)試工具使用方法實例，希望對大家有所幫助!更多精彩，盡在腳本之家網(wǎng)站！