公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

?? 面板介紹

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

網頁（Page）

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

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

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

工作區（Workspace）

可添加本地工程源碼，與網頁上代碼進行關聯，在調試頁面修改的內容會自動同步到本地文件中。

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

建立關聯之后，可直接在調試頁面修改文件內容，也可新增/刪除文件等，按Ctrl+S保存后，修改的內容會同步寫入到本地文件中。

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

替換（Overrides）

可以用本地的內容替換原本網絡請求（包括js、css、數據請求等）的內容，實現不借助代理工具就可以完成簡單的mock調試等。可按照如下步驟操作：

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

 修改文件內容后保存，后續的請求結果會以本地的內容替換，被替換的請求也會標識出來。

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

內容腳本（Content scripts）

瀏覽器擴展的js腳本，用來調試已安裝的瀏覽器擴展。

代碼片段（Snippets）

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

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

?? 斷點調試

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

代碼行斷點

1. 普通斷點：調試中最常用的斷點。

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

2. 條件斷點：條件斷點只有當設置的條件滿足時才會暫停。

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

3. 日志斷點：運行到日志斷點不會暫停，會運行設定好的打印語句。

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

異常斷點

設置異常斷點可以快速定位到產生異常的位置。

1. 遇到未捕獲的異常時暫停

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

1. 在遇到異常時暫停

XHR/提取斷點

網址中包含設定的內容時中斷，當指定的網絡請求發送前，會進入中斷狀態。

事件監聽器斷點

觸發對應事件后會進入暫停狀態，比如鼠標的click事件，定時器，剪貼板等。只有注冊了對應事件的監聽才會生效。

以定時器為例，可以快速定位到定時器觸發執行的位置。

DOM斷點

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

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

CSP違規斷點

當網頁嘗試加載或執行違反CSP策略的內容時，瀏覽器會自動暫停執行并觸發一個斷點。

調試

代碼運行至斷點處，進入中斷狀態，此時前端頁面顯示“已在調試程序中暫?！?，Sources面板中顯示“已在斷點暫?！?，并且調試頁面代碼跳轉至暫停的代碼行，并且此行黃色顯示。

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

同時在右側區塊，作用域和調用堆棧都顯示出了內容。

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

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

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

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

當暫停后查看數據沒有問題，需要繼續排查，開發工具在右側區塊頂部提供了一些操作按鈕，分別是：

1. 快捷鍵：F8 或 Ctrl + \?；謴痛a運行，直到進入下個斷點。
2. 快捷鍵：F10 或 Ctrl + '。跳過下一個函數調用，進入下一行。
3. 快捷鍵：F11 或 Ctrl + ;。進入下一個函數調用。
4. 快捷鍵：Shift + F11 或 Ctrl + Shift + ;。跳出當前函數。
5. 快捷鍵：F9。單步調試。遇到函數會進入函數中，F10的操作不會。
6. 快捷鍵：Ctrl + F8。停用斷點。不進入中斷狀態。

監視器：在每次暫停時，會獲取監視變量當前狀態下最新的值，便于快速發現非預期的變化。

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

?? 線上調試

線上部署的代碼經過構建之后被混淆和壓縮，同時為了安全不會將sourcemap文件發布至線上環境，因此線上環境的代碼即使經過格式化后也很難閱讀，難以直接調試。

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

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

2. 在線上對應的js文件文件內容區域，右鍵選擇“添加源代碼映射”，輸入復制的文件地址，然后點擊添加。

如果沒有此選項，需在設置中開啟JavaScript源代碼映射。

3. 添加成功后左側區塊會出現webpack的源碼目錄。點擊添加斷點時，就會自動跳轉至源代碼的對應的位置，然后可以像本地調試一樣調試代碼。

注意：即使是同一份代碼，可能會因為依賴版本不一致導致線上和本地構建出的文件hash不相同，即使可以成功加載sourcemap文件也會因為映射具有差異而失效。

?轉自https://juejin.cn/post/7502047502342996008