WebStorm打断点调试Vue项目--方法/实例

梦里梦外; 2023-10-02 16:14 55阅读 0赞

原文网址：[WebStorm打断点调试Vue项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][WebStorm_Vue_--_IT_-CSDN]

## 简介 ##

本文介绍如何通过在WebStorm里打断点来调试Vue项目。

## WebStrom配置 ##

### **1.设置调试端口** ###

File=> Settings=> Build,Execution,Deployment=> Debugger=> Build-in Server=> Port

*  默认是：63342
 *  非必要无需修改它。若非要修改，不要改为8080等影响正常业务的端口。
 *  如果启动时指定的这个端口被占用，则会自动将端口号加1再启动

![f4983950026d4d0ca38e790515dc8f0f.png][]

### 2.设置debug ###

**法1：快速配置**

1.  使用npm启动项目
2.  按住Shift+Ctrl，鼠标点击项目的url。
    
    1.  此时会自动启动调试

![3892b72cebf34cdfa8b2a0fd1caa6445.png][]

**法2：手动配置**

Run=> Edit Configurations=> "+"号 => JavaScript Debug=> 指定项目的url  
例：http://localhost:8080

![a246aeaa2cca438c9d53fddd33bef117.png][]

## 测试 ##

### 测试1：自动配置debug ###

#### **1.使用npm启动项目** ####

![ffb4ceb9f38a47f8b8fb49919628b170.png][]

#### **2.自动生成debug配置** ####

**按住Shift+Ctrl，鼠标点击项目的url**

点击之后，会自动生成一个调试的环境，浏览器会自动新建页面并跳到项目的页面。

**生成的调试环境图片**

![797477ea55c346518aaa42dffd9ed77e.png][]

**浏览器自动新建的页面**

（我项目里边将“/”这个根路径重定向为了blogs）

![6fb0c78dcf9c403dbf9e38e8d5bfb7a6.png][]

**查看WebStorm自动生成的调试配置**

Run=> Edit Configurations 下图箭头所指的配置就是WebStorm自动生成的

![6c3d887c361a4b9fbb6174916164500a.png][]

#### 3.打断点调试 ####

在WebStorm里打个断点。（本处我在登录接口处打断点）

![1d5bd6c515d04f0684a60d195487ec35.png][]

在浏览器里进行登录，则会跳到断点处

![5763b86e8ecd4d7ea88e9263a82e2deb.png][]

### 测试2：手动配置debug ###

#### 1.手动配置debug环境 ####

Run=> Edit Configurations=> "+"号 => JavaScript Debug=> 指定项目的url

![4bc4b89ef01b48168d21b9c270949af1.png][]

![0ca8c9c06d7d4ef2beef2063a70746c3.png][]

#### **2.使用npm启动项目** ####

![ffb4ceb9f38a47f8b8fb49919628b170.png][]

#### **3.启动debug环境** ####

![68beecb1a1844eee82f28c5812cae443.png][]

**启动结果**

![7f0f6682c65a4592b03408493527eb41.png][]

**浏览器自动新建的页面**

（我项目里边将“/”这个根路径重定向为了blogs）

![6fb0c78dcf9c403dbf9e38e8d5bfb7a6.png][]

#### 4.打断点调试 ####

在WebStorm里打个断点。（本处我在登录接口处打断点）

![1d5bd6c515d04f0684a60d195487ec35.png][]

在浏览器里进行登录，则会跳到断点处

![5763b86e8ecd4d7ea88e9263a82e2deb.png][]

[WebStorm_Vue_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121452651
[f4983950026d4d0ca38e790515dc8f0f.png]: https://img-blog.csdnimg.cn/f4983950026d4d0ca38e790515dc8f0f.png
[3892b72cebf34cdfa8b2a0fd1caa6445.png]: https://img-blog.csdnimg.cn/3892b72cebf34cdfa8b2a0fd1caa6445.png
[a246aeaa2cca438c9d53fddd33bef117.png]: https://img-blog.csdnimg.cn/a246aeaa2cca438c9d53fddd33bef117.png
[ffb4ceb9f38a47f8b8fb49919628b170.png]: https://img-blog.csdnimg.cn/ffb4ceb9f38a47f8b8fb49919628b170.png
[797477ea55c346518aaa42dffd9ed77e.png]: https://img-blog.csdnimg.cn/797477ea55c346518aaa42dffd9ed77e.png
[6fb0c78dcf9c403dbf9e38e8d5bfb7a6.png]: https://img-blog.csdnimg.cn/6fb0c78dcf9c403dbf9e38e8d5bfb7a6.png
[6c3d887c361a4b9fbb6174916164500a.png]: https://img-blog.csdnimg.cn/6c3d887c361a4b9fbb6174916164500a.png
[1d5bd6c515d04f0684a60d195487ec35.png]: https://img-blog.csdnimg.cn/1d5bd6c515d04f0684a60d195487ec35.png
[5763b86e8ecd4d7ea88e9263a82e2deb.png]: https://img-blog.csdnimg.cn/5763b86e8ecd4d7ea88e9263a82e2deb.png
[4bc4b89ef01b48168d21b9c270949af1.png]: https://img-blog.csdnimg.cn/4bc4b89ef01b48168d21b9c270949af1.png
[0ca8c9c06d7d4ef2beef2063a70746c3.png]: https://img-blog.csdnimg.cn/0ca8c9c06d7d4ef2beef2063a70746c3.png
[68beecb1a1844eee82f28c5812cae443.png]: https://img-blog.csdnimg.cn/68beecb1a1844eee82f28c5812cae443.png
[7f0f6682c65a4592b03408493527eb41.png]: https://img-blog.csdnimg.cn/7f0f6682c65a4592b03408493527eb41.png