Chrome瀏覽器如何做調(diào)試

在前端開發(fā)中，Chrome瀏覽器是非常好用的調(diào)試工具，本文中，我們來看一下具體怎樣使用Chrome來進行調(diào)試工作。

首先，我用Chrome打開了一個本地的頁面：

打開頁面后，右鍵--》檢查，就可以打開調(diào)試后臺了。下面我們根據(jù)調(diào)試工具欄的顯示順序，逐一來了解一下：

1，是個小箭頭，點擊箭頭，會變成藍色，這時候?qū)⑹髽?biāo)懸浮在左側(cè)頁面上，就可以點中鼠標(biāo)懸停下方的元素：

2，是手機平板的圖標(biāo)，點中后，頁面會變成移動端的樣子，你可以根據(jù)自己的開發(fā)需求，來選擇什么樣的設(shè)備或者分辨率：

3，是Elements窗口，可以在這個窗口里看到頁面的文檔結(jié)構(gòu)：

4，是console窗口，是控制臺，在這里，可以配合js做調(diào)試，最常用的命令就是console.log()，使用它可以調(diào)試我們的js文件，打印出我們想要定位的數(shù)據(jù)、元素、錯誤原因等等：

5，Network窗口，這個窗口是查看http請求的，當(dāng)我們發(fā)起請求的時候，這里會看到具體請求的內(nèi)容，返回值得內(nèi)容，以及請求的狀態(tài)等相關(guān)信息（我本地頁面沒有請求接口，我們看下百度首頁的請求示例）：

6，Sources窗口，這個是項目資源窗口，它左側(cè)是項目目錄，我們可以看到當(dāng)前頁面都加載了哪些文件，而且在這個窗口下，找到j(luò)s文件，可以打斷點，配合js調(diào)試，更準(zhǔn)確的找到bug：

7，Application窗口，這里可以看到當(dāng)前頁面的緩存信息等，對于需要記錄某種狀態(tài)的時候，可能會用到頁面緩存，就可以到這里來查看：

8，就是最右側(cè)的窗口，這里會根據(jù)你選擇的窗口發(fā)生變化，比如選擇Elements的時候呢，會看到元素的樣式，選擇Sources窗口點中js文件時，能看到斷點操作區(qū)域啊，js相關(guān)內(nèi)容的信息提示啊什么的，這里的信息，取決于你使用什么功能~

以上就是Chrome瀏覽器調(diào)試功能的簡單介紹啦~

多使多看，孰能生巧。

其他

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。