在日常開發(fā)和各種教程中，最常見的 debug 方式就是在代碼中插入 console.log 語句，然后在 Chrome 控制臺(tái)中查看日志。顯而易見，插入console.log 的效率不高，那是否有更高效的 debug 方式呢？斷點(diǎn)調(diào)試允許開發(fā)者在代碼的特定行暫停執(zhí)行，實(shí)時(shí)查看和修改變量的值。但是整個(gè)使用過程，我們必須在 Chrome 中打點(diǎn)調(diào)試，然后回到 IDE 中對(duì)代碼進(jìn)行修改。這個(gè)過程相對(duì)繁瑣，那么我們是否可以直接在本地IDE中去打斷點(diǎn)呢？答案是肯定的，因?yàn)槲冶救耸?Jetbrains 的忠實(shí)粉絲，因此本文將主要介紹如何使用 Webstorm 來進(jìn)行斷點(diǎn)調(diào)試。另外，WebStorm 支持多種調(diào)試工具，包括瀏覽器的開發(fā)者工具，但本文主要講解的是使用 WebStorm 自帶的調(diào)試功能。

一、WebStorm 配置

1.1 準(zhǔn)備工作

WebStorm 為 JavaScript 代碼提供內(nèi)置調(diào)試器，可用于在 Web 瀏覽器或 IDE 的內(nèi)置瀏覽器中預(yù)覽和調(diào)試應(yīng)用程序。此服務(wù)器始終運(yùn)行，不需要任何手動(dòng)配置。首先，要確保在 WebStorm 中啟用了 JavaScript Debugger 插件。打開設(shè)置，然后選擇 Plugins（插件），單擊 Installed 選項(xiàng)卡。在搜索字段中，輸入 JavaScript Debugger。

注意：僅在 Google Chrome 和其他基于 Chromium 的瀏覽器中支持 JavaScript 代碼的調(diào)試。

1.2 修改默認(rèn)瀏覽器配置

首先，必須修改需改瀏覽器默認(rèn)配置，才能自動(dòng)打開谷歌瀏覽器進(jìn)行調(diào)試。另外，綠色箭頭所指的選項(xiàng)必須要添加，否則調(diào)試時(shí)自動(dòng)打開的頁面是about:blank。

--remote-allow-origins=* --remote-debugging-port

1.3 配置 JavaScript 調(diào)試器

1.3.1 設(shè)置服務(wù)器調(diào)試端口

打開設(shè)置，然后選擇 Build, Execution, Deployment | Debugger。在 Built-in server （內(nèi)置服務(wù)器） 區(qū)域中，指定內(nèi)置 Web 服務(wù)器運(yùn)行的端口。默認(rèn)情況下，此端口設(shè)置為默認(rèn) WebStorm 端口 63342，WebStorm 通過該端口接受來自服務(wù)的連接。也可以將端口號(hào)設(shè)置為從 1024 開始的任何其他值，但非必要無需修改它。若非要修改，不要改為8080等影響正常業(yè)務(wù)的端口。如果啟動(dòng)時(shí)指定的這個(gè)端口被占用，則會(huì)自動(dòng)將端口號(hào)加1再啟動(dòng)。

通過分別清除 Can accept external connections 或 Allow unsigned requests 復(fù)選框，禁止從其他計(jì)算機(jī)或 WebStorm 外部對(duì)內(nèi)置服務(wù)器上文件的調(diào)用。

1.3.2 選擇刪除斷點(diǎn)的方法

默認(rèn)情況下，我們可以通過單擊鼠標(biāo)左鍵來切換斷點(diǎn)。若是想要更改此行為，請(qǐng)打開設(shè)置并導(dǎo)航到 Build, Execution, Deployment | Debugger。在 Remove breakpoint 區(qū)域中，選擇相應(yīng)的選項(xiàng)。

二、調(diào)試本地應(yīng)用程序

如果應(yīng)用程序在本地以開發(fā)模式運(yùn)行，則可以從內(nèi)置的 Run tool 窗口或 Debug tool窗口開始調(diào)試，如下圖所示。

2.1 配置調(diào)試環(huán)境

當(dāng)我們使用本地 Web 服務(wù)器或 Web 服務(wù)器位于遠(yuǎn)程主機(jī)上時(shí)，需要?jiǎng)?chuàng)建 Run/Debug 配置以啟動(dòng) JavaScript 調(diào)試器。為此，請(qǐng)單擊 WebStorm 窗口右上角的列表，然后選擇 Edit Configurations?；蛘撸趶闹鞑藛沃羞x擇 Run | Edit Configurations ，會(huì)自動(dòng)打開 Edit Configurations 對(duì)話框。

在彈出的 Run/Debug Configurations 對(duì)話框中，單擊工具欄上的 ? 號(hào)，然后從列表中選擇 JavaScript Debug。在配置窗口中，選擇“Browser”作為調(diào)試類型，并選擇要使用的瀏覽器（如Chrome、Firefox等），指定運(yùn)行應(yīng)用程序的 URL 地址，點(diǎn)擊“OK”保存配置設(shè)置。

選項(xiàng)說明Name為運(yùn)行配置指定名稱，以便在編輯或運(yùn)行時(shí)快速識(shí)別它。Store as project file使用運(yùn)行配置設(shè)置保存文件，以便與其他團(tuán)隊(duì)成員共享。

默認(rèn)情況下，處于禁用狀態(tài)，運(yùn)行配置存儲(chǔ)在 .idea/workspace.xml 中。URL指定引用要調(diào)試的應(yīng)用程序的 URL 地址Browser列表中選擇將調(diào)試應(yīng)用程序的瀏覽器Ensure breakpoints are detected when loading scripts選中此復(fù)選框可確保立即命中頁面加載時(shí)執(zhí)行的代碼中的斷點(diǎn)。

請(qǐng)注意，這可能會(huì)減慢初始頁面加載速度。Remote URLs of local files選擇所需的本地文件或目錄、遠(yuǎn)程URL 地址Before launch指定在啟動(dòng)選定的運(yùn)行/調(diào)試配置之前要執(zhí)行的任務(wù)Show this page選中此復(fù)選框可在啟動(dòng) run/debug 之前顯示 run/debug configuration 設(shè)置Activate tool window啟動(dòng) run/debug 配置時(shí)打開 Run 或 Debug tool 窗口。

接下來我們可以開始調(diào)試了。從 WebStorm 窗口右上角的列表中選擇新創(chuàng)建的配置，然后單擊 Debug 按鈕。

2.2 項(xiàng)目的啟動(dòng)

使用 WebStorm 打開項(xiàng)目文件夾，然后在項(xiàng)目目錄中找到并打開package.json 文件，其通常位于項(xiàng)目根目錄中。在 package.json 文件中，找到 scripts 部分，這部分包含了項(xiàng)目的各種命令腳本，包括啟動(dòng)腳本。啟動(dòng)腳本通常命名為 start 或 dev，點(diǎn)擊啟動(dòng)腳本前的綠色箭頭，然后點(diǎn)擊Run 'dev' 啟動(dòng)開發(fā)服務(wù)器。或者可以通過 npm run dev 或者 npm run serve 運(yùn)行需要調(diào)試的項(xiàng)目，成功運(yùn)行后，會(huì)提示項(xiàng)目訪問URL，這個(gè)要和前文提到的配置項(xiàng)里面URL保持一致。

2.3 開始調(diào)試

在WebStorm中打開你想要調(diào)試的Vue文件，可以通過左側(cè)的導(dǎo)航欄找到你的項(xiàng)目文件，或者直接在編輯器中通過文件路徑打開。

根據(jù)需要在 JavaScript 代碼行左側(cè)點(diǎn)擊，之后就會(huì)看到一個(gè)紅色的圓圈，這就是斷點(diǎn)。當(dāng)代碼執(zhí)行到這里時(shí)，它會(huì)暫停，允許你查看和修改變量值、調(diào)用棧等信息。

點(diǎn)擊WebStorm右上角的綠色蟲子圖標(biāo)（或使用快捷鍵Shift+F9）來啟動(dòng)調(diào)試會(huì)話。此時(shí)，你的瀏覽器應(yīng)該會(huì)自動(dòng)打開并加載你的Vue項(xiàng)目。

當(dāng)你的Vue應(yīng)用加載到包含斷點(diǎn)的代碼行時(shí)，代碼執(zhí)行會(huì)暫停。此時(shí)，你可以看到WebStorm的調(diào)試視圖已經(jīng)打開，顯示了當(dāng)前的調(diào)用棧、變量值等信息。

在調(diào)試視圖中，你可以執(zhí)行各種調(diào)試操作，如下所示，這些操作可以幫助你更好地理解代碼的執(zhí)行流程。

操作按鈕說明Rerun重新運(yùn)行當(dāng)前的調(diào)試會(huì)話，允許在不關(guān)閉調(diào)試器的情況下重新啟動(dòng)調(diào)試會(huì)話。Resume Program繼續(xù)運(yùn)行程序，直到遇到下一個(gè)斷點(diǎn)或程序結(jié)束。Pause Program暫停程序的執(zhí)行，這在查看當(dāng)前程序執(zhí)行狀態(tài)時(shí)非常有用。Step Over逐行執(zhí)行當(dāng)前函數(shù)，不進(jìn)入函數(shù)內(nèi)部。Step Into進(jìn)入當(dāng)前行中調(diào)用的函數(shù)。Step Out從當(dāng)前函數(shù)返回到調(diào)用它的函數(shù)。Restart重新啟動(dòng)調(diào)試會(huì)話。View Breakpoints查看和管理所有斷點(diǎn)。Mute Breakpoints靜音所有斷點(diǎn)。程序?qū)⒗^續(xù)運(yùn)行，不會(huì)在任何斷點(diǎn)處暫停

如果你在調(diào)試過程中修改了變量值或代碼，你可以使用“Update Application on Save”功能來實(shí)時(shí)刷新瀏覽器中的應(yīng)用。這個(gè)功能可以確保你的修改立即生效，而無需手動(dòng)刷新頁面。

當(dāng)你完成調(diào)試后，可以點(diǎn)擊調(diào)試視圖中的紅色停止按鈕來結(jié)束調(diào)試會(huì)話。

三、附錄

3.1 調(diào)試器控制臺(tái)

交互式 Console 窗格顯示堆棧跟蹤和代碼中記錄的所有內(nèi)容，而且僅會(huì)在我們調(diào)試應(yīng)用程序或調(diào)試測(cè)試時(shí)顯示，當(dāng)我們正在運(yùn)行應(yīng)用程序或預(yù)覽 Web 頁面時(shí)，它不可用。

3.1.1 導(dǎo)航到源代碼

在使用 console.* 輸出的每一行，WebStorm 都會(huì)顯示文件的名稱和調(diào)用它的行，單擊此鏈接跳轉(zhuǎn)到源代碼中的調(diào)用。

控制臺(tái)還顯示堆棧跟蹤，單擊報(bào)告的問題旁邊的鏈接可跳轉(zhuǎn)到發(fā)生此問題的代碼行。

3.1.2 過濾消息

Console 選項(xiàng)卡以樹狀視圖顯示對(duì)象，默認(rèn)情況下，堆棧跟蹤處于折疊狀態(tài)。Warnings、errors 和 info 消息具有不同的圖標(biāo)和背景顏色，使其更容易被注意到。

3.2 重新加載當(dāng)前頁面

除了通過單擊 Debug 工具窗口中的 Rerun 按鈕重新啟動(dòng)應(yīng)用程序外，我們還可以使用 Reload in Browser 操作重新加載當(dāng)前導(dǎo)航的頁面。要重新加載當(dāng)前頁面，請(qǐng)單擊工具欄上的 :，然后選擇 Reload in Browser，如下圖所示。

相關(guān)問答FAQs：

1. 如何在WebStorm中設(shè)置Vue源碼的調(diào)試環(huán)境？

要在WebStorm中調(diào)試Vue源碼，您需要進(jìn)行以下設(shè)置：

• 首先，確保您已經(jīng)安裝了WebStorm，并且已經(jīng)將Vue源碼作為項(xiàng)目導(dǎo)入到WebStorm中。
• 打開WebStorm的調(diào)試面板，可以通過點(diǎn)擊頂部工具欄上的調(diào)試按鈕，或者按下快捷鍵Ctrl + Shift + D（Windows/Linux）或Cmd + Shift + D（Mac）來打開。
• 在調(diào)試面板中，點(diǎn)擊左上角的加號(hào)（+）按鈕，然后選擇“JavaScript Debug”作為調(diào)試配置類型。
• 在“Name”字段中，可以輸入一個(gè)適當(dāng)?shù)拿Q，以便于識(shí)別該調(diào)試配置。
• 在“URL”字段中，輸入您要調(diào)試的Vue源碼文件的URL。例如，如果您的Vue源碼文件是在本地的src目錄下的main.js文件中，那么URL應(yīng)該是http://localhost:8080/src/main.js。
• 確保“Remote URL”復(fù)選框被選中，這樣WebStorm才能正確地連接到您的本地服務(wù)器。
• 點(diǎn)擊“OK”按鈕保存配置。

2. 如何在WebStorm中設(shè)置斷點(diǎn)并調(diào)試Vue源碼？

設(shè)置了調(diào)試環(huán)境后，您可以按照以下步驟在WebStorm中設(shè)置斷點(diǎn)并開始調(diào)試Vue源碼：

• 打開您要調(diào)試的Vue源碼文件。
• 在源碼文件中找到您要設(shè)置斷點(diǎn)的位置，并在該行代碼的左側(cè)點(diǎn)擊鼠標(biāo)左鍵，以設(shè)置一個(gè)紅色的斷點(diǎn)。
• 點(diǎn)擊調(diào)試面板中的綠色的播放按鈕，或者按下F9鍵，以啟動(dòng)調(diào)試會(huì)話。
• 當(dāng)您的應(yīng)用程序運(yùn)行到斷點(diǎn)位置時(shí)，調(diào)試會(huì)自動(dòng)停止，并且您可以通過調(diào)試面板中的控制按鈕（如暫停、繼續(xù)、單步執(zhí)行等）來控制調(diào)試過程。
• 您可以使用調(diào)試面板中的變量窗口來查看和修改變量的值，以便更好地理解代碼的執(zhí)行過程。

3. 如何在WebStorm中跟蹤Vue源碼的函數(shù)調(diào)用堆棧？

在WebStorm中，您可以使用調(diào)試面板中的“調(diào)用堆棧”窗口來跟蹤Vue源碼的函數(shù)調(diào)用堆棧，以便更好地理解代碼的執(zhí)行流程。

• 在調(diào)試過程中，當(dāng)您的代碼執(zhí)行到一個(gè)函數(shù)時(shí)，調(diào)試會(huì)自動(dòng)停止，并在“調(diào)用堆棧”窗口中顯示該函數(shù)及其調(diào)用關(guān)系。
• 您可以通過點(diǎn)擊“調(diào)用堆棧”窗口中的函數(shù)名稱，來跳轉(zhuǎn)到該函數(shù)的定義位置。
• 您還可以通過在“調(diào)用堆棧”窗口中右鍵點(diǎn)擊某個(gè)函數(shù)，并選擇“Evaluate Expression”選項(xiàng)，來在調(diào)試過程中評(píng)估某個(gè)表達(dá)式的值。

通過使用上述的調(diào)試功能，您可以更好地理解Vue源碼的執(zhí)行過程，快速定位問題，并進(jìn)行調(diào)試和修復(fù)。

總結(jié)

關(guān)于使用 WebStorm 如何調(diào)試 Vue 代碼就介紹到這了，相信你已經(jīng)掌握了使用 WebStorm 調(diào)試 Vue 代碼的基本方法。WebStorm 作為一款功能強(qiáng)大的IDE，提供了豐富的調(diào)試功能和技巧，可以幫助你更高效地開發(fā)和調(diào)試 Vue 應(yīng)用。當(dāng)然，除了 WebStorm 外，還有很多其他的調(diào)試工具和技術(shù)可以使用，如Chrome DevTools、Visual Studio Code等。你可以根據(jù)自己的需求和喜好選擇合適的工具來提高開發(fā)效率，希望本文對(duì)你有所幫助！

最新評(píng)論