WebStorm--调试

谁践踏了优雅 2022-12-23 00:39 443阅读 0赞

原文网址：[WebStorm--调试\_IT利刃出鞘的博客-CSDN博客\_webstorm调试][WebStorm--_IT_-CSDN_webstorm]

# 环境搭建 #

**其他网址**

> [WebStorm强大的调试JavaScript功能\_弃天笑的程序世界-CSDN博客][WebStorm_JavaScript_-CSDN]

**简介**

> Webstorm联合JetBrains IDE Support调试跟其他浏览器的调试相比的好处：
> 
> 1.  方便，不用去切换。
> 2.  他可以直接把一些参数类型、数值结果直接显示在代码上面。

**安装插件**

> **1.Chrome安装JetBrains IDE Support** 
> 
> [https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji][https_chrome.google.com_webstore_detail_hmhgeddbohgjknpmjagkdomcpobmllji]

> **2.配置端口（若不报此错误可不配置：**ERR\_CONNECTION\_REFUSED**）**
> 
> 如果你的端口刚好被占用，需要修改相应的端口。Chrome和WebStorm都要修改
> 
> 1.Chrome插件修改  
> 右键插件=> 选项=> 可修改host（默认127.0.0.1）和端口（默认63342）
> 
> 2.WebStorm修改  
> File=> Settings=> Build,Execution,Deployment=> Debugger=> 右侧=> Built-in server=> Port（默认63342）
> 
> 注意：如果不配置这两者端口为同一个端口，有时会报错：ERR\_CONNECTION\_REFUSED

# **调试HTML** #

**前提**

> Chrome安装JetBrains IDE Support

**1.创建工程**

> 本处直接创建一个空工程，创建Demo.html与Demo.js（Demo.html中调用Demo.hs）

**2.配置Idea**

> Run=> Edit Configurations=> 左上角“+”=> JavaScript Debug=>  
> Name：随便起个名字  
> URL：选择Demo.html  
> Browser：选择浏览器（若不选择会使用系统默认浏览器）

**3.运行调试**

> 在Demo.js中打个断点=> 点击"Debug"按钮=> 现象如下  
> Chrome显示：“JetBrains IDE Support”正在调试此浏览器=> 跳转到Webstorm的调试界面

**注意**

> 此方法是有缓存的。若修改了代码，需要运行第二次才行。

# 调试Vue #

**其他网址**

> [webstorm 调试vue项目 - 简书][webstorm _vue_ -]

**前提**

> Chrome安装JetBrains IDE Support

**1.修改config/index.js**

> devtool: 'cheap-module-eval-source-map', 改为：devtool: 'source-map',

**2. 运行项目（dev或者start）**

> **法1：通过npm界面启动**
> 
> WebStorm有个npm组件，可以直接以dev或者start启动，如下图所示
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]
> 
> **法2：通过通用方法启动**
> 
> 第一步：添加启动配置
> 
> Run=> Edit Configurations=> 左上角“+”=> npm=> Command选择dev或者start都可以
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]
> 
> 第二步：启动
> 
> ![20201120234127610.png][]

**3.配置debug**

> Run=> Edit Configurations=> 左上角“+”=> JavaScript Debug=>
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]
> 
> 注意：URL必须对应config/index.js里边的host和port配置，本处，我的config/index.js配置为：
> 
>     host: 'localhost',
>     port: 8080,
> 
> 所以，URL必须这么填：http://localhost:8080

**4.debug**

> ![20201120234759715.png][]
> 
> 此时，会自动跳转到谷歌浏览器界面，如下：
> 
> ![2020112023490556.png][]
> 
> 输入自己项目的url即可：
> 
> ![20201120234935812.png][]
> 
> 当然，可以在相应代码的任意位置打断点，重新访问时就会跳到打断点的地方：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]

[WebStorm--_IT_-CSDN_webstorm]: https://knife.blog.csdn.net/article/details/109880873
[WebStorm_JavaScript_-CSDN]: https://blog.csdn.net/sujun10/article/details/54139560
[https_chrome.google.com_webstore_detail_hmhgeddbohgjknpmjagkdomcpobmllji]: https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
[webstorm _vue_ -]: https://www.jianshu.com/p/f0e69b537f9b
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/df6a2463bc0b4b8bbd941f6047208340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/a1daed0362d34eefa017194da64934e1.png
[20201120234127610.png]: /images/20221120/da0521680b594162b2c73411d3c32c8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221120/0e620fd41a0140f7af375036cf05b1dc.png
[20201120234759715.png]: /images/20221120/83914af0585d418d8759be60e1c87189.png
[2020112023490556.png]: /images/20221120/5e28942d366b4930885a7ac12ac028c9.png
[20201120234935812.png]: /images/20221120/aedc859dd39248a1af7a6d7be21f37ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: /images/20221120/cb5f15adfb544ac7b069184222a71399.png