日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

?? 面板介紹

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

網(wǎng)頁（Page）

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

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

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

工作區(qū)（Workspace）

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

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

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

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

替換（Overrides）

可以用本地的內(nèi)容替換原本網(wǎng)絡(luò)請求（包括js、css、數(shù)據(jù)請求等）的內(nèi)容，實(shí)現(xiàn)不借助代理工具就可以完成簡單的mock調(diào)試等?？砂凑杖缦虏襟E操作：

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

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

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

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

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

代碼片段（Snippets）

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

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

?? 斷點(diǎn)調(diào)試

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

代碼行斷點(diǎn)

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

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

2. 條件斷點(diǎn)：條件斷點(diǎn)只有當(dāng)設(shè)置的條件滿足時(shí)才會(huì)暫停。

行號右擊選擇“添加條件斷點(diǎn)”，輸入進(jìn)入斷點(diǎn)的條件，然后按回車生效，會(huì)生成一個(gè)橙色的斷點(diǎn)標(biāo)記。

3. 日志斷點(diǎn)：運(yùn)行到日志斷點(diǎn)不會(huì)暫停，會(huì)運(yùn)行設(shè)定好的打印語句。

行號右擊選擇“添加日志點(diǎn)”，按照console.log格式輸入打印語句，然后按回車生效，會(huì)生成一個(gè)紫紅色的斷點(diǎn)標(biāo)記。

異常斷點(diǎn)

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

1. 遇到未捕獲的異常時(shí)暫停

對于如Angular框架有全局異常捕獲無法進(jìn)入斷點(diǎn)。

1. 在遇到異常時(shí)暫停

XHR/提取斷點(diǎn)

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

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

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

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

DOM斷點(diǎn)

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

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

CSP違規(guī)斷點(diǎn)

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

調(diào)試

代碼運(yùn)行至斷點(diǎn)處，進(jìn)入中斷狀態(tài)，此時(shí)前端頁面顯示“已在調(diào)試程序中暫?！?，Sources面板中顯示“已在斷點(diǎn)暫?！保⑶艺{(diào)試頁面代碼跳轉(zhuǎn)至?xí)和５拇a行，并且此行黃色顯示。

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

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

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

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

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

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

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

1. 快捷鍵：F8 或 Ctrl + \。恢復(fù)代碼運(yùn)行，直到進(jìn)入下個(gè)斷點(diǎn)。
2. 快捷鍵：F10 或 Ctrl + '。跳過下一個(gè)函數(shù)調(diào)用，進(jìn)入下一行。
3. 快捷鍵：F11 或 Ctrl + ;。進(jìn)入下一個(gè)函數(shù)調(diào)用。
4. 快捷鍵：Shift + F11 或 Ctrl + Shift + ;。跳出當(dāng)前函數(shù)。
5. 快捷鍵：F9。單步調(diào)試。遇到函數(shù)會(huì)進(jìn)入函數(shù)中，F10的操作不會(huì)。
6. 快捷鍵：Ctrl + F8。停用斷點(diǎn)。不進(jìn)入中斷狀態(tài)。

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

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

?? 線上調(diào)試

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

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

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

2. 在線上對應(yīng)的js文件文件內(nèi)容區(qū)域，右鍵選擇“添加源代碼映射”，輸入復(fù)制的文件地址，然后點(diǎn)擊添加。

如果沒有此選項(xiàng)，需在設(shè)置中開啟JavaScript源代碼映射。

3. 添加成功后左側(cè)區(qū)塊會(huì)出現(xiàn)webpack的源碼目錄。點(diǎn)擊添加斷點(diǎn)時(shí)，就會(huì)自動(dòng)跳轉(zhuǎn)至源代碼的對應(yīng)的位置，然后可以像本地調(diào)試一樣調(diào)試代碼。

注意：即使是同一份代碼，可能會(huì)因?yàn)橐蕾嚢姹静灰恢聦?dǎo)致線上和本地構(gòu)建出的文件hash不相同，即使可以成功加載sourcemap文件也會(huì)因?yàn)橛成渚哂胁町惗А?/em>