瀏覽器開發(fā)工具的使用—

瀏覽器開發(fā)工具的使用——Sources面板

當前位置：點晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2025年5月14日 11:40 本文熱度 55

?? 面板介紹

Sources面板界面通常包含左、中、右三個區(qū)塊，下面將分別介紹各個區(qū)塊的功能。

網(wǎng)頁（Page）

顯示當前頁面已經(jīng)加載的靜態(tài)資源，包含html、JS、CSS、圖片、字體等，按照域名和路徑聚合成一個樹形結(jié)構(gòu)展示。點擊文件名可以在中間區(qū)塊查看文件內(nèi)容以及文件信息等。對于html/css/js文件，會自動格式化方便查看；圖片文件會顯示圖片尺寸和大小等。

除此之外，還會展示已加載的瀏覽器擴展資源（如上圖中的CodeArts API）；如果頁面有Web Worker運行，還會在與top同一層級顯示其他線程的JS代碼。

根據(jù)顯示的資源路徑，我們通常可以用來排查一些靜態(tài)資源404的問題。

工作區(qū)（Workspace）

可添加本地工程源碼，與網(wǎng)頁上代碼進行關(guān)聯(lián)，在調(diào)試頁面修改的內(nèi)容會自動同步到本地文件中。

點擊“添加文件夾”后，選擇本地工程源碼的根目錄，點擊“允許”DevTools獲取對該文件夾完整訪問權(quán)限，已成功建立關(guān)聯(lián)的文件圖標中會顯示一個綠色的標識。

建立關(guān)聯(lián)之后，可直接在調(diào)試頁面修改文件內(nèi)容，也可新增/刪除文件等，按Ctrl+S保存后，修改的內(nèi)容會同步寫入到本地文件中。

如果不想繼續(xù)使用該功能，在根目錄右鍵選擇“從工作區(qū)移除”即可。

替換（Overrides）

可以用本地的內(nèi)容替換原本網(wǎng)絡(luò)請求（包括js、css、數(shù)據(jù)請求等）的內(nèi)容，實現(xiàn)不借助代理工具就可以完成簡單的mock調(diào)試等。可按照如下步驟操作：

本地創(chuàng)建一個用于保存替換內(nèi)容的文件夾（如：mock），在替換頁面選擇“選擇放置替換項的文件夾”，選擇已創(chuàng)建好的mock文件夾，點擊“允許”DevTools獲取對該文件夾完整訪問權(quán)限。
在網(wǎng)絡(luò)頁面選擇一個請求，右鍵選擇“替換內(nèi)容”，會自動幫我們在本地創(chuàng)建出一個文件，該文件圖標上會出現(xiàn)一個紫色的標識，并且網(wǎng)絡(luò)面板圖標也會出現(xiàn)黃色警告標識請求有修改。

修改文件內(nèi)容后保存，后續(xù)的請求結(jié)果會以本地的內(nèi)容替換，被替換的請求也會標識出來。

不想繼續(xù)使用替換，可以去掉“啟動本地替換”的勾選，或者直接清除配置。

內(nèi)容腳本（Content scripts）

瀏覽器擴展的js腳本，用來調(diào)試已安裝的瀏覽器擴展。

代碼片段（Snippets）

可以將一些常用的可運行代碼片段持久化保存，方便下次快速運行。

點擊添加“新代碼段”，可以為這段代碼命名，編輯內(nèi)容后按Ctrl+S保存，在代碼片段名右擊選擇“運行”。

?? 斷點調(diào)試

調(diào)試首先需要設(shè)置斷點，讓程序運行到指定的地方暫停，分析此時的數(shù)據(jù)是否符合預(yù)期，從而排查問題。

代碼行斷點

普通斷點：調(diào)試中最常用的斷點。

可以通過代碼添加debugger語句（調(diào)試完還要手動移除，不推薦）；或者在文件內(nèi)容行號點擊鼠標左鍵添加藍色的斷點標記，再次點擊可取消。

條件斷點：條件斷點只有當設(shè)置的條件滿足時才會暫停。

行號右擊選擇“添加條件斷點”，輸入進入斷點的條件，然后按回車生效，會生成一個橙色的斷點標記。

日志斷點：運行到日志斷點不會暫停，會運行設(shè)定好的打印語句。

行號右擊選擇“添加日志點”，按照console.log格式輸入打印語句，然后按回車生效，會生成一個紫紅色的斷點標記。

異常斷點

設(shè)置異常斷點可以快速定位到產(chǎn)生異常的位置。

遇到未捕獲的異常時暫停

對于如Angular框架有全局異常捕獲無法進入斷點。

在遇到異常時暫停

XHR/提取斷點

網(wǎng)址中包含設(shè)定的內(nèi)容時中斷，當指定的網(wǎng)絡(luò)請求發(fā)送前，會進入中斷狀態(tài)。

事件監(jiān)聽器斷點

觸發(fā)對應(yīng)事件后會進入暫停狀態(tài)，比如鼠標的click事件，定時器，剪貼板等。只有注冊了對應(yīng)事件的監(jiān)聽才會生效。

以定時器為例，可以快速定位到定時器觸發(fā)執(zhí)行的位置。

DOM斷點

可以在指定dom元素發(fā)生修改后進入中斷。

此斷點需要在元素（Element）面板中添加。找到指定元素，鼠標右鍵后選擇“發(fā)生中斷的條件”，可以勾選選擇“子樹修改”、“屬性修改”或“移除節(jié)點”，當勾選的條件滿足時就會進入中斷狀態(tài)。

CSP違規(guī)斷點

當網(wǎng)頁嘗試加載或執(zhí)行違反CSP策略的內(nèi)容時，瀏覽器會自動暫停執(zhí)行并觸發(fā)一個斷點。

調(diào)試

代碼運行至斷點處，進入中斷狀態(tài)，此時前端頁面顯示“已在調(diào)試程序中暫停”，Sources面板中顯示“已在斷點暫?！?，并且調(diào)試頁面代碼跳轉(zhuǎn)至暫停的代碼行，并且此行黃色顯示。

光標懸浮至變量可以看到當前變量的值，也可在控制臺中打印變量的值，或者執(zhí)行腳本修改變量的值。

同時在右側(cè)區(qū)塊，作用域和調(diào)用堆棧都顯示出了內(nèi)容。

作用域：可以看到暫停時當前位置可以訪問變量的值，包含當前代碼塊、本地、閉包、腳本等。通過查看各種變量的值判斷代碼執(zhí)行的結(jié)果是否符合預(yù)期。

調(diào)用堆棧：可以查看函數(shù)的調(diào)用鏈，用來查看當前的調(diào)用關(guān)系。選中某個函數(shù)右鍵選擇“重啟幀”可以回到開始調(diào)用該函數(shù)的狀態(tài)（列如異步場景等無法重啟）。

如果不關(guān)注第三方庫函數(shù)的調(diào)用，可以右鍵忽略指定的js腳本或者忽略全部第三方腳本，忽略后默認不會顯示在調(diào)用堆棧中，顯示更簡潔方便快速排查業(yè)務(wù)代碼問題。

忽略的腳本名稱將顯示為灰色，同時查看文件時會提示已加入忽略列表，右鍵腳本名稱可以從忽略列表中移除；忽略規(guī)則可以在設(shè)置中配置。

當暫停后查看數(shù)據(jù)沒有問題，需要繼續(xù)排查，開發(fā)工具在右側(cè)區(qū)塊頂部提供了一些操作按鈕，分別是：

快捷鍵：F8 或 Ctrl + \?；謴痛a運行，直到進入下個斷點。
快捷鍵：F10 或 Ctrl + '。跳過下一個函數(shù)調(diào)用，進入下一行。
快捷鍵：F11 或 Ctrl + ;。進入下一個函數(shù)調(diào)用。
快捷鍵：Shift + F11 或 Ctrl + Shift + ;。跳出當前函數(shù)。
快捷鍵：F9。單步調(diào)試。遇到函數(shù)會進入函數(shù)中，F10的操作不會。
快捷鍵：Ctrl + F8。停用斷點。不進入中斷狀態(tài)。

監(jiān)視器：在每次暫停時，會獲取監(jiān)視變量當前狀態(tài)下最新的值，便于快速發(fā)現(xiàn)非預(yù)期的變化。

點擊監(jiān)視器右側(cè)的“添加”按鈕，輸入變量名或者JS表達式，按下回車生效。已經(jīng)存在的監(jiān)視器可以點擊“刪除”按鈕刪除掉。

?? 線上調(diào)試

線上部署的代碼經(jīng)過構(gòu)建之后被混淆和壓縮，同時為了安全不會將sourcemap文件發(fā)布至線上環(huán)境，因此線上環(huán)境的代碼即使經(jīng)過格式化后也很難閱讀，難以直接調(diào)試。

可以按照如下步驟加載本地的sourcemap文件進行調(diào)試：

在本地使用與線上相同的源代碼運行構(gòu)建命令（需要在打包配置中開啟sourceMap: true），在產(chǎn)物目錄中找到與js文件同名的.map文件，比如js文件名為：main.6ef9f3836c78083e.js，需找到main.6ef9f3836c78083e.js.map文件，然后用瀏覽器打開后復制地址欄的鏈接。