ChromeDevTools如何調(diào)試JavaScript-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“Chrome DevTools如何調(diào)試JavaScript”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Chrome DevTools如何調(diào)試JavaScript”吧!

目前成都創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、克州網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

Java的特點(diǎn)有哪些

Java的特點(diǎn)有哪些 1.Java語言作為靜態(tài)面向?qū)ο缶幊陶Z言的代表，實(shí)現(xiàn)了面向?qū)ο罄碚?，允許程序員以優(yōu)雅的思維方式進(jìn)行復(fù)雜的編程。 2.Java具有簡單性、面向?qū)ο?、分布式、安全性、平臺獨(dú)立與可移植性、動態(tài)性等特點(diǎn)。 3.使用Java可以編寫桌面應(yīng)用程序、Web應(yīng)用程序、分布式系統(tǒng)和嵌入式系統(tǒng)應(yīng)用程序等。

由淺入深說一說怎么樣在 Chrome DevTools 中調(diào)試 JavaScript。

一、案發(fā)現(xiàn)場

為了方便理解，我寫了一個小demo。

點(diǎn)擊打開demo；

在num1中輸入6；

在num2中輸入9；

點(diǎn)擊 num1+num2，按鈕下方的標(biāo)簽顯示 69，結(jié)果應(yīng)為 15，這就是我們需要斷點(diǎn)調(diào)試找出的 BUG 。

二、熟悉一下 Sources 面板

DevTools 可為更改 CSS、分析頁面加載性能和監(jiān)控網(wǎng)絡(luò)請求等不同的任務(wù)提供許多不同的工具。 我們就在 Sources 面板中調(diào)試 JavaScript。

通過按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打開 DevTools。 此快捷方式可打開 Console 面板。點(diǎn)擊 Sources 面板。

Sources 面板包含 3 個部分：

文件預(yù)覽 窗口。 此處列出頁面請求的每個文件。

代碼編輯 窗口。 在 文件預(yù)覽 窗口中選擇文件后，此處會顯示該文件的具體內(nèi)容。

JavaScript 調(diào)試 窗口。 包含檢查頁面 JavaScript 的各種工具。 如果 DevTools 窗口布局較窄，此窗口會顯示在 代碼編輯 窗口下方。

三、使用斷點(diǎn)暫停代碼

調(diào)試上面這種問題的常用方法是將多個 console.log() 語句插入代碼，以便在執(zhí)行腳本的時候檢查相關(guān)變量的值。

雖然 console.log() 方法可以完成任務(wù)，但斷點(diǎn)可以更快完成此任務(wù)。 斷點(diǎn)可在執(zhí)行代碼的過程中暫停代碼，并在此時及時檢查所有相關(guān)變量的值。 與 console.log() 方法相比，斷點(diǎn)具有一些優(yōu)勢：

1. 使用 console.log()，需要手動打開源代碼，查找相關(guān)代碼，插入 console.log() 語句，然后重新加載此頁面，才能在控制臺中看到這些消息。 使用斷點(diǎn)，無需了解代碼結(jié)構(gòu)即可暫停相關(guān)代碼。

2. 在 console.log()語句中，您需要明確指定要檢查的每個值。 使用斷點(diǎn)，DevTools 會在暫停時及時顯示所有變量值。簡言之，與 console.log() 方法相比，斷點(diǎn)可以更快地查找和修正 BUG 。

接下來我們開始思考一開始拋出的程序的運(yùn)作方式，我們可以根據(jù)經(jīng)驗(yàn)推測出，我們在點(diǎn)擊num1+num2按鈕的時候觸發(fā)的 click 事件肯定和 6+9=69 計(jì)算不正確有關(guān)系。 因此，我們可能需要在 click 偵聽器運(yùn)行的時候暫停代碼。
Event Listener Breakpoints 可以完成此任務(wù)：

在 JavaScript 調(diào)試 窗口中，點(diǎn)擊 Event Listener Breakpoints 前面的展開按鈕。 可以看見 Animation、Canvas、Clipboard 等一系列事件；

在頁面輸入框中輸入num1和num2的值；

展開 Mouse 事件，每個事件旁都有一個復(fù)選框。勾選 click 復(fù)選框。 DevTools 現(xiàn)在可以在任何 click 事件偵聽器運(yùn)行時自動暫停。

點(diǎn)擊頁面中的num1+num2按鈕。此時頁面如下圖：

這是因?yàn)槲已b的瀏覽器插件導(dǎo)致的定位不準(zhǔn)，最好在無痕模式進(jìn)行操作。不過也不影響，我們點(diǎn)擊一下最左邊頁面上的藍(lán)色按鈕，再點(diǎn)擊中間的打括號（格式化代碼），就可以定位準(zhǔn)確并且格式化好代碼：

四、檢查變量的值

1. Scope窗口

在某代碼行暫停時，Scope 窗格會顯示當(dāng)前定義的局部和全局變量，以及各變量值。 其中還會顯示閉包變量（如果適用）。 雙擊變量值可進(jìn)行編輯。 如果不在任何代碼行暫停，則 Scope 窗格為空。

2. Watch監(jiān)聽變量變化

Watch 標(biāo)簽可監(jiān)視變量值隨時間變化的情況。 并且，監(jiān)視不僅限于監(jiān)視變量。 我們可以將任何有效的 JavaScript 表達(dá)式存儲在監(jiān)視表達(dá)式中。 我們嘗試這樣：
- 點(diǎn)擊 Watch 標(biāo)簽。
- 點(diǎn)擊 右邊的 + 添加表達(dá)式。
- 輸入 typeof n。 按 Enter 鍵。（這里代碼是打包后的，n表示num1輸入框的值）
- DevTools 會顯示 typeof n: "string"。 冒號右側(cè)的值就是監(jiān)視表達(dá)式的結(jié)果。

3. 控制臺

控制臺除了查看 console.log() 消息以外，還可以使用控制臺對任意 JavaScript 語句求值。 對于調(diào)試，可以使用控制臺測試 BUG 的潛在解決方法:

在 Console 中，輸入 `parseInt(n) + parseInt(u)`。 此語句有效，因?yàn)槲覀儠谔囟ùa行暫停，其中 `n`（num1的值） 和 `u`（num2的值） 在范圍內(nèi)。

按 Enter 鍵。 DevTools 對語句求值并打印輸出 15，即我們預(yù)計(jì)demo頁面會產(chǎn)生的結(jié)果。

五、嘗試修改

上一步我們已找到解決 BUG 的方法。 接下來就是嘗試通過編輯代碼并重新運(yùn)行demo來使用修正方法。 我們可以在 代碼編輯 窗口直接修改代碼：

在 代碼編輯 窗口中，將代碼格式化關(guān)掉，然后修改代碼，將 n+u 換成 parseInt(n)+parseInt(u) 。

按 Command+S (Mac) 或 Control+S（Windows、Linux）以保存更改。

點(diǎn)擊 Deactivate breakpoints 取消激活斷點(diǎn)。 其將變?yōu)樗{(lán)色，表示處于活動狀態(tài)。 在完成此設(shè)置后，DevTools 會忽略您已設(shè)置的任何斷點(diǎn)。

點(diǎn)擊num1+num2按鈕，則會看見正確的結(jié)果啦！

Tips: 這樣做只能修正在瀏覽器中運(yùn)行的代碼， 不能為訪問您頁面的所有用戶修正代碼。 為此，我需要修改自己服務(wù)器上的代碼。

六、介紹其他幾種斷點(diǎn)

斷點(diǎn)類型	使用場景
代碼行	在確切的代碼區(qū)域中
條件代碼行	在確切的代碼區(qū)域中，且僅當(dāng)其他一些條件成立時
DOM	在更改或移除特定 DOM 節(jié)點(diǎn)或其子級的代碼中
XHR	當(dāng) XHR 網(wǎng)址包含字符串模式時
事件偵聽器	在觸發(fā) click 等事件后運(yùn)行的代碼中
異常	在引發(fā)已捕獲或未捕獲異常的代碼行中
函數(shù)	任何時候調(diào)用特定函數(shù)時

1. 代碼行斷點(diǎn)

直接點(diǎn)擊

這是使用最多的一種斷點(diǎn)方式，在知道需要檢查的確切代碼區(qū)域時，可以使用代碼行斷點(diǎn)。 DevTools 始終會在執(zhí)行此代碼行之前暫停。

debugger

在代碼中調(diào)用 debugger 可在該行暫停。 此操作相當(dāng)于使用代碼行斷點(diǎn)，只是此斷點(diǎn)是在代碼中設(shè)置，而不是在 DevTools 界面中設(shè)置。

console.log('a');
console.log('b');
debugger;
console.log('c');

條件代碼斷點(diǎn)
如果知道需要調(diào)查的確切代碼區(qū)域，但只想在其他一些條件成立時進(jìn)行暫停，則可使用條件代碼行斷點(diǎn)。若要設(shè)置條件代碼行斷點(diǎn)：

1. 點(diǎn)擊 Sources 標(biāo)簽。

2. 打開包含您想要中斷的代碼行的文件。

3. 轉(zhuǎn)至代碼行。

4. 代碼行的左側(cè)是行號列。

5. 右鍵點(diǎn)擊行號列。

6. 選擇 Add conditional breakpoint。

7. 代碼行下方將顯示一個對話框。

8. 在對話框中輸入條件。

9. 按Enter 鍵激活斷點(diǎn)。 行號列頂部將顯示一個橙色圖標(biāo)。

2. DOM更新斷點(diǎn)

如果想要暫停更改 DOM 節(jié)點(diǎn)或其子級的代碼，可以使用 DOM 更改斷點(diǎn)。若要設(shè)置 DOM 更改斷點(diǎn)：

• 點(diǎn)擊 Elements 標(biāo)簽。

• 轉(zhuǎn)至要設(shè)置斷點(diǎn)的元素。

• 右鍵點(diǎn)擊此元素。

• 將鼠標(biāo)指針懸停在Break on 上，然后選擇 Subtree modifications、Attribute modifications 或 Node removal。

Subtree

• modifications： 在移除或添加當(dāng)前所選節(jié)點(diǎn)的子級，或更改子級內(nèi)容時觸發(fā)這類斷點(diǎn)。在子級節(jié)點(diǎn)屬性發(fā)生變化或?qū)Ξ?dāng)前所選節(jié)點(diǎn)進(jìn)行任何更改時不會觸發(fā)這類斷點(diǎn)。

• Attributes modifications：在當(dāng)前所選節(jié)點(diǎn)上添加或移除屬性，或?qū)傩灾蛋l(fā)生變化時觸發(fā)這類斷點(diǎn)。

• Node Removal：在移除當(dāng)前選定的節(jié)點(diǎn)時會觸發(fā)。

4. XHR/Fetch斷點(diǎn)

如果想在 XHR 的請求網(wǎng)址包含指定字符串時中斷，可以使用 XHR 斷點(diǎn)。 DevTools 會在 XHR 調(diào)用 send() 的代碼行暫停。

注：此功能還可用于 Fetch 請求。

例如，在您發(fā)現(xiàn)您的頁面請求的是錯誤網(wǎng)址，并且您想要快速找到導(dǎo)致錯誤請求的 AJAX 或 Fetch 源代碼時，這類斷點(diǎn)很有用。

若要設(shè)置 XHR 斷點(diǎn)：

• 點(diǎn)擊 Sources 標(biāo)簽。

• 展開 XHR Breakpoints 窗格。

• 點(diǎn)擊 Add breakpoint。

• 輸入要對其設(shè)置斷點(diǎn)的字符串。 DevTools 會在 XHR 的請求網(wǎng)址的任意位置顯示此字符串時暫停。

• 按 Enter 鍵以確認(rèn)。

這樣就可以攔截包含getUserInfo字符串的請求，如果添加一個空的，則可以攔截所有請求！

5. 事件偵聽器斷點(diǎn)

如果想要暫停觸發(fā)事件后運(yùn)行的事件偵聽器代碼，可以使用事件偵聽器斷點(diǎn)。 您可以選擇 click 等特定事件或所有鼠標(biāo)事件等事件類別。

我們一開始使用的例子就是事件偵聽器斷點(diǎn)，這里就不演示了。

6. 異常斷點(diǎn)

如果想要在引發(fā)已捕獲或未捕獲異常的代碼行暫停，可以使用異常斷點(diǎn)。

• 點(diǎn)擊 Sources 標(biāo)簽。

• 點(diǎn)擊 Pause on exceptions 引發(fā)異常時暫停 {:.devtools-inline}。 啟用后，此按鈕變?yōu)樗{(lán)色。

• （可選）如果除未捕獲異常以外，還想在引發(fā)已捕獲異常時暫停，則勾選 Pause On Caught Exceptions 復(fù)選框。

7.函數(shù)斷點(diǎn)

如果想要在調(diào)用特定函數(shù)時暫停，可以調(diào)用 debug(functionName)，其中 functionName 是要調(diào)試的函數(shù)。 您可以將 debug() 插入您的代碼（如 console.log() 語句），也可以從 DevTools 控制臺中進(jìn)行調(diào)用。 debug() 相當(dāng)于在第一行函數(shù)中設(shè)置代碼行斷點(diǎn)。

function sum(a, b) {
 let result = a + b; // DevTools 會在此行暫停
 return result;
}
debug(sum); // 傳遞函數(shù)對象，而不是字符串。
sum();

如果想要調(diào)試的函數(shù)不在范圍內(nèi)，DevTools 會引發(fā) ReferenceError。

(function () {
 function hey() {
 console.log('hey');
 }
 function yo() {
 console.log('yo');
 }
 debug(yo); // 這行可以成功調(diào)用
 yo();
})();
debug(hey); // 這一行不能成功調(diào)用 hey() 不在作用域內(nèi)

如果是從 DevTools 控制臺中調(diào)用 debug()，則很難確保目標(biāo)函數(shù)在范圍內(nèi)。所以一般還不如直接使用代碼行斷點(diǎn)！

到此，相信大家對“Chrome DevTools如何調(diào)試JavaScript”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：ChromeDevTools如何調(diào)試JavaScript-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://muchs.cn/article44/ddsdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、移動網(wǎng)站建設(shè)、企業(yè)建站、營銷型網(wǎng)站建設(shè)、用戶體驗(yàn)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)