靠譜的軟件下載站
當前位置:  IEfans/瀏覽器技巧/谷歌瀏覽器自帶的調試工具使用方法

谷歌瀏覽器自帶的調試工具使用方法

瀏覽器技巧 秩名 2018-02-12 閱讀(414)

Google谷歌瀏覽器本身就自帶有調試工具,但是很多用戶還是不太了解怎么使用,那么下面小編就手把手的教大家,如何使用Google谷歌瀏覽器自帶的調試工具的具體方法步驟,這是前端調試JS與CSS樣式必備,還不清楚的用戶一起來學習下吧。

1.jpg

實例一:百度首頁

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

2.jpg

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

3.jpg

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

4.jpg

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

5.jpg

6.png

7.jpg

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

8.png

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

9.jpg

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

10.jpg

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

11.jpg

實例二:新浪首頁

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

12.jpg

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

13.jpg

3. 鼠標右鍵需要修改的地方,在彈出的選項選擇”檢查“;

14.jpg

4. 可以看到需要改動的地方,對應區域的CSS樣式都在右側區域顯示,此時在右邊的代碼就可以進行調。

標簽:谷歌瀏覽器谷歌瀏覽器

Copyright © 1998-2017 www.hdssxe.live All Rights Reserved 湘ICP備13012168號-17
广东11选550期走势