前言

在日常開發(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?；蛘?，在從主菜單中選擇 Run | Edit Configurations ，會自動打開 Edit Configurations 對話框。

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

接下來我們可以開始調(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文件，可以通過左側的導航欄找到你的項目文件，或者直接在編輯器中通過文件路徑打開。

• 根據(jù)需要在 JavaScript 代碼行左側點擊，之后就會看到一個紅色的圓圈，這就是斷點。當代碼執(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，如下圖所示。

總結

關于使用 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ā)效率，希望本文對你有所幫助！

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

最新評論