你的 JavaScript 是否曾經(jīng)無(wú)法正確執行，并且你很難找出原因？你的 CSS 是否曾經(jīng)表現得很奇怪，并且你很難找出原因或讓它按預期顯示？調試是編程的基本組成部分，也是所有軟件開(kāi)發(fā)人員的基本技能。
當你構建網(wǎng)站和應用程序時(shí)，你很快就會(huì )意識到調試會(huì )占用大量時(shí)間。因此，學(xué)習任何可以幫助你更有效地對 Web 應用程序進(jìn)行故障排除的工具的基礎知識和高級功能將使你成為更好的調試器。
要成為更好的調試器，你必須熟悉使調試更容易的正確工具。本文重點(diǎn)介紹使用 Chrome DevTools 更輕松地對 Web 應用程序進(jìn)行故障排除的一些最佳做法、關(guān)鍵功能和提示。
谷歌瀏覽器可能是開(kāi)發(fā)人員中使用最廣泛和最受歡迎的網(wǎng)絡(luò )瀏覽器，因為它與眾不同。它已逐漸成為大多數開(kāi)發(fā)人員測試和調試其網(wǎng)站和 Web 應用程序的首選 Web 瀏覽器。Google Chrome 為開(kāi)發(fā)人員提供了使用瀏覽器中的內置開(kāi)發(fā)人員工具（又名 DevTools）調試大多數 Web 應用程序的能力，而無(wú)需第三方調試工具。
Google Chrome 的開(kāi)發(fā)人員工具中有多種功能和工具可供開(kāi)發(fā)人員直接在瀏覽器中編輯代碼、測試和添加斷點(diǎn)以檢測問(wèn)題，并更有效地調試代碼。
要訪(fǎng)問(wèn) DevTools，請按 Control + Shift + C（在 Windows 或 Linux 上）和 Command + Option + C（在 Mac 上）。此外，你可以右鍵單擊網(wǎng)頁(yè)的任何部分，選擇“檢查元素”，或通過(guò)選項菜單訪(fǎng)問(wèn)它。
每個(gè)小組的職責的簡(jiǎn)要總結：
Elements：在這里可以檢查和編輯 DOM 節點(diǎn)和樣式屬性。
Console：可以通過(guò)控制臺查看和運行 JavaScript 代碼。
Sources：源代碼可在此處獲得。你可以調試 JavaScript 代碼并添加斷點(diǎn)等。
Network：調試網(wǎng)絡(luò )相關(guān)的活動(dòng)。你可以查看和監控網(wǎng)絡(luò )。
Performance：分析速度并優(yōu)化性能。
Memory：通過(guò)跟蹤內存使用情況來(lái)修復與內存相關(guān)的問(wèn)題。
Application：可以查看sessionStorage、localStorage、IndexDB、cookies，以及其他應用相關(guān)的數據文件。
Security：調試證書(shū)問(wèn)題和其他安全問(wèn)題。
Lighthouse：讓你審核應用程序的性能、可訪(fǎng)問(wèn)性、SEO 等。
Chrome 中提供了一些控制臺實(shí)用程序 API，它們?yōu)槌Ｒ?jiàn)的調試任務(wù)提供了方便的功能。顧名思義，monitor() 函數是此類(lèi)控制臺函數之一，用于監視特定函數以了解何時(shí)調用該函數以及在調用該函數時(shí)將哪些參數傳遞給該函數。
目標函數必須作為參數傳遞給 monitor() 函數，以便它觀(guān)察任何調用的指定函數。一旦被調用，就會(huì )立即將一條消息記錄到控制臺，其中包含函數名稱(chēng)及其參數，表明該函數已被調用。
unmonitor()功能將取消對該功能的監控。此函數用于監視 DOM 中的對象是否有特定事件或事件。當在指定對象上觸發(fā)此事件時(shí)，該函數立即將事件和對象輸出到控制臺。
當指定對象上發(fā)生任何指定事件時(shí)，Event 對象將被記錄到控制臺。要監視的事件可以是特定事件、事件數組或映射到預定義集合的通用事件“類(lèi)型”。
此函數接收應監控的對象和特定事件，即monitorEvents(object [, events]). 例如，要監視窗口對象的任何調整大小事件：
monitorEvents(window, "resize");
輸出：
unmonitorEvents(object[, events])，或對象 ie 上的所有事件unmonitorEvents(window)。要了解有關(guān)此功能的更多信息，請訪(fǎng)問(wèn)文檔。
從數據庫或外部 API 獲取數據時(shí)，它通常以對象數組的形式出現。想象一下，你正試圖在你的 chrome 控制臺中預覽或讀取此返回的數據，以找出在你的應用程序中不起作用的內容。該console.log()函數通常將其顯示為難以閱讀或分類(lèi)的文本輸出。
你顯然希望以更易于閱讀的有條理的方式查看所有項目、屬性及其相關(guān)屬性。你可以在 chrome 控制臺中使用table()函數即 table(data) 來(lái)完成此操作。這種方法以更人性化、更易于閱讀和理解的表格格式打印和組織信息。
例如：
const users = [
{ first: "zhang", last: "san"},
{ first: "li", last: "si", birthday: "19990919" },
{ first: "wang", last: "wu",},];table(users);
使用作為參數傳遞給它的 DOM 對象調用 getEventListener 函數會(huì )返回在該特定對象上注冊的所有事件。返回的值是一個(gè)對象，其中包含每個(gè)注冊的事件類(lèi)型（如點(diǎn)擊、按鍵等）的數組。每個(gè)成員數組都包含該事件類(lèi)型的所有事件，并且可以擴展以探索它們各自的屬性，例如它們觸發(fā)的關(guān)聯(lián)函數。
為了修復不符合預期的頁(yè)面、功能或組件，你通常會(huì )添加一個(gè)“調試器”；聲明函數聲明以激活調試器并嘗試了解它有什么問(wèn)題。
但是，這需要你手動(dòng)進(jìn)入源代碼以添加這些調試器語(yǔ)句。Chrome 允許你直接從控制臺執行此操作，而無(wú)需使用 debug() 函數訪(fǎng)問(wèn)你的源代碼。只需在控制臺中調用它并將函數的名稱(chēng)傳遞給它，它就會(huì )自動(dòng)將調試器注入到函數中，讓你可以單步調試代碼。
debug(functionReference)會(huì )增加一個(gè)調試器；引用函數聲明的第一行上的語(yǔ)句。DevTools 還提供斷點(diǎn)，讓你逐行執行代碼。你可以通過(guò)單擊“源”面板中的行號來(lái)添加它們。左鍵單擊會(huì )自動(dòng)添加斷點(diǎn)，而右鍵單擊數字可以設置條件斷點(diǎn)，這對于調試循環(huán)非常有用。
借助 Chrome 新添加的 DevTools Restart Frame 功能，你可以在調試函數時(shí)遇到斷點(diǎn)后重新運行前面的代碼。這意味著(zhù)你可以在函數中某處暫停后立即重新運行前面的代碼。
因此，你可以在當前調用堆棧中穿越時(shí)間（盡管在有限的范圍內）。
注意：當你使用 Restart Frame Chrome 時(shí)，狀態(tài)不會(huì )恢復。執行指針簡(jiǎn)單地移動(dòng)到函數的頂部。
有時(shí)你可能需要在有條件或動(dòng)態(tài)更改的 DOM 元素上放置斷點(diǎn)或調試器。
你可以通過(guò)右鍵單擊目標 DOM 元素并選擇“中斷”->“屬性修改”來(lái)輕松修改 DOM 元素。此外，你還可以嘗試其他一些選項。
在調試時(shí)，你可能經(jīng)常需要一遍又一遍地執行同一行代碼，直到你完成故障排除。但是，這會(huì )導致你進(jìn)行大量重復輸入或不斷地從你最喜歡的代碼編輯器復制并粘貼到你的 Chrome 瀏覽器控制臺。
Google Chrome DevTools 有一個(gè)代碼片段功能，允許你保存代碼片段，以便在需要時(shí)使用。片段是一段 JavaScript 源代碼，你可以保存并重復使用以進(jìn)行調試。創(chuàng )建的代碼片段可以在任何時(shí)候在任何網(wǎng)站上的每個(gè)調試會(huì )話(huà)中通過(guò)單擊按鈕來(lái)執行，因為它會(huì )永久保存，直到手動(dòng)刪除。這可以節省你在每個(gè)頁(yè)面測試中輸入重復信息的時(shí)間。
在 Chrome 中創(chuàng )建代碼片段：
1.打開(kāi) DevTools 窗口并單擊選項卡面板中的“Sources”。
2.單擊>>符號，選擇“snippets”，然后選擇 New snippet。
3.給它一個(gè)名字并寫(xiě)下你的代碼片段。
4.保存文件。
5.現在，你可以通過(guò)右鍵單擊片段文件名并選擇“運行”在任何網(wǎng)頁(yè)上執行代碼。
console.log('Hello,嘎嘎');document.body.innerHTML = '';var p = document.createElement('p');p.textContent= 'Hello,嘎嘎';document.body.appendChild(p);毫無(wú)疑問(wèn)，Chrome DevTools 是對開(kāi)發(fā)者工具箱的極好補充。在這篇文章中，我們研究了如何通過(guò)使用 Google Chrome 的 DevTools 直接在瀏覽器中進(jìn)行調試來(lái)提高調試技能。希望這將使你能夠更高效地對 Web 應用程序和組件進(jìn)行故障排除。
盡管如此，這只是 Google Chrome 的 DevTools 中提供的眾多功能的一小部分。你還使用哪些其他工具和技巧？可以在下面的評論區告訴我。
聯(lián)系客服
