前言

在日常開(kāi)發(fā)和各種教程中，最常見(jiàn)的 debug 方式就是在代碼中插入 console.log 語(yǔ)句，然后在 Chrome 控制臺(tái)中查看日志。顯而易見(jiàn)，插入console.log 的效率不高，那是否有更高效的 debug 方式呢？斷點(diǎn)調(diào)試允許開(kāi)發(fā)者在代碼的特定行暫停執(zhí)行，實(shí)時(shí)查看和修改變量的值。但是整個(gè)使用過(guò)程，我們必須在 Chrome 中打點(diǎn)調(diào)試，然后回到 IDE 中對(duì)代碼進(jìn)行修改。這個(gè)過(guò)程相對(duì)繁瑣，那么我們是否可以直接在本地IDE中去打斷點(diǎn)呢？答案是肯定的，因?yàn)槲冶救耸?Jetbrains 的忠實(shí)粉絲，因此本文將主要介紹如何使用 Webstorm 來(lái)進(jìn)行斷點(diǎn)調(diào)試。另外，WebStorm 支持多種調(diào)試工具，包括瀏覽器的開(kāi)發(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 插件。打開(kāi)設(shè)置，然后選擇 Plugins（插件），單擊 Installed 選項(xiàng)卡。在搜索字段中，輸入 JavaScript Debugger。

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

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

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

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

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

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

打開(kāi)設(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 通過(guò)該端口接受來(lái)自服務(wù)的連接。也可以將端口號(hào)設(shè)置為從 1024 開(kāi)始的任何其他值，但非必要無(wú)需修改它。若非要修改，不要改為8080等影響正常業(yè)務(wù)的端口。如果啟動(dòng)時(shí)指定的這個(gè)端口被占用，則會(huì)自動(dòng)將端口號(hào)加1再啟動(dòng)。

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

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

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

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

如果應(yīng)用程序在本地以開(kāi)發(fā)模式運(yùn)行，則可以從內(nèi)置的 Run tool 窗口或 Debug tool窗口開(kāi)始調(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。或者，在從主菜單中選擇 Run | Edit Configurations ，會(huì)自動(dòng)打開(kāi) 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è)置。

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

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

使用 WebStorm 打開(kāi)項(xiàng)目文件夾，然后在項(xiàng)目目錄中找到并打開(kāi)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)開(kāi)發(fā)服務(wù)器?；蛘呖梢酝ㄟ^(guò) npm run dev 或者 npm run serve 運(yùn)行需要調(diào)試的項(xiàng)目，成功運(yùn)行后，會(huì)提示項(xiàng)目訪問(wèn)URL，這個(gè)要和前文提到的配置項(xiàng)里面URL保持一致。

2.3 開(kāi)始調(diào)試

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

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

  

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

  

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

  

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

  操作按鈕	說(shuō)明
  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)試過(guò)程中修改了變量值或代碼，你可以使用“Update Application on Save”功能來(lái)實(shí)時(shí)刷新瀏覽器中的應(yīng)用。這個(gè)功能可以確保你的修改立即生效，而無(wú)需手動(dòng)刷新頁(yè)面。

• 當(dāng)你完成調(diào)試后，可以點(diǎn)擊調(diào)試視圖中的紅色停止按鈕來(lái)結(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 頁(yè)面時(shí)，它不可用。

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

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

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

3.1.2 過(guò)濾消息

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

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

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

總結(jié)

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

到此這篇關(guān)于WebStorm如何調(diào)試Vue項(xiàng)目的文章就介紹到這了,更多相關(guān)WebStorm調(diào)試Vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！