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

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

• 類型：主頁(yè)瀏覽
• 大小：43MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2016-05-17

查看詳情

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

實(shí)例一：百度首頁(yè)

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

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

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

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

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

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

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

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

實(shí)例二：新浪首頁(yè)

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

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

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

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

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

最新評(píng)論