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

一、WebStorm 配置

1.1 準備工作

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

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

1.2 修改默認瀏覽器配置

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

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

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

1.3.1 設置服務器調(diào)試端口

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

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

1.3.2 選擇刪除斷點的方法

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

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

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

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

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

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

選項說明Name為運行配置指定名稱，以便在編輯或運行時快速識別它。Store as project file使用運行配置設置保存文件，以便與其他團隊成員共享。

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

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

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

2.2 項目的啟動

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

2.3 開始調(diào)試

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

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

點擊WebStorm右上角的綠色蟲子圖標（或使用快捷鍵Shift+F9）來啟動調(diào)試會話。此時，你的瀏覽器應該會自動打開并加載你的Vue項目。

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

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

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

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

當你完成調(diào)試后，可以點擊調(diào)試視圖中的紅色停止按鈕來結束調(diào)試會話。

三、附錄

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

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

3.1.1 導航到源代碼

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

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

3.1.2 過濾消息

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

3.2 重新加載當前頁面

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

相關問答FAQs：

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

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

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

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

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

• 打開您要調(diào)試的Vue源碼文件。
• 在源碼文件中找到您要設置斷點的位置，并在該行代碼的左側(cè)點擊鼠標左鍵，以設置一個紅色的斷點。
• 點擊調(diào)試面板中的綠色的播放按鈕，或者按下F9鍵，以啟動調(diào)試會話。
• 當您的應用程序運行到斷點位置時，調(diào)試會自動停止，并且您可以通過調(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)試過程中，當您的代碼執(zhí)行到一個函數(shù)時，調(diào)試會自動停止，并在“調(diào)用堆棧”窗口中顯示該函數(shù)及其調(diào)用關系。
• 您可以通過點擊“調(diào)用堆棧”窗口中的函數(shù)名稱，來跳轉(zhuǎn)到該函數(shù)的定義位置。
• 您還可以通過在“調(diào)用堆棧”窗口中右鍵點擊某個函數(shù)，并選擇“Evaluate Expression”選項，來在調(diào)試過程中評估某個表達式的值。

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

總結

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

最新評論