快捷導(dǎo)航

webStorm?debug?vue項(xiàng)目的兩種方案圖文詳解

更新時(shí)間：2024年07月16日 10:04:28 作者：小廠程序員DHJ

WebStorm作為一款功能強(qiáng)大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開發(fā)和調(diào)試Vue應(yīng)用,這篇文章主要給大家介紹了關(guān)于webStorm?debug?vue項(xiàng)目的兩種方案,需要的朋友可以參考下

一、前言

本文將介紹通過webstorm對vue項(xiàng)目進(jìn)行debugger調(diào)試的兩種方案。

但是，不管通過那種方案，都無法達(dá)到類似后端idea調(diào)試的體驗(yàn)，感覺十分難受，不過，比起用console.log還是好一些。如果各位有更好的方案，還望賜教。

二、debug的兩種方案

方案1：在瀏覽器的控制臺進(jìn)行調(diào)試

1.1 只需要在你的vue.config.js文件中添加如下代碼即可，然后啟動項(xiàng)目

module.exports = {
  configureWebpack: {
    // 指定 Webpack 在構(gòu)建過程中生成 source map 文件，以便于調(diào)試代碼
    devtool: "source-map",
  },
}

1.2 啟動項(xiàng)目，打開瀏覽器控制臺

1.3 搜索（Ctrl+P）你想要打斷點(diǎn)的vue文件，例如：我這里是login.vue

1.4 找到需打斷點(diǎn)的行，點(diǎn)擊行號即可打斷點(diǎn)，然后進(jìn)行觸發(fā)即可。

方案2：直接在webstorm中進(jìn)行調(diào)試（debug啟動server）

2.1 修改webstorm的調(diào)試器配置

2.2 配置一下webstorm瀏覽器信息

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

2.3 先啟動項(xiàng)目，拿到項(xiàng)目的訪問地址，如 http://localhost:8082/

2.4 配置啟動信息

2.5 直接以debug方式啟動npm的server服務(wù)，webstorm會打開新的瀏覽器頁面，直接在webstorm斷點(diǎn)調(diào)試。

三、總結(jié)說明

總的來說，方案2的操作，實(shí)際上會讓webstorm打開兩個(gè)端口，一個(gè)是服務(wù)端口（對應(yīng)我這里的serve服務(wù)），另外一個(gè)就是debug端口（對應(yīng)我這里的serve JavaScript），通過debug端口瀏覽器和webstorm之間交互用戶debugger動作，以便知道用戶干了什么。

所以，如果你的操作失敗了或者遇到了其他情況，你可以檢查一下，你的項(xiàng)目服務(wù)（serve）和debug服務(wù)（serve JavaScript）是否都正確啟動了。

到此這篇關(guān)于webStorm debug vue項(xiàng)目兩種方案的文章就介紹到這了,更多相關(guān)webStorm debug vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: