WebStorm--调试

原文网址：WebStorm--调试_IT利刃出鞘的博客-CSDN博客_webstorm调试

环境搭建

简介

Webstorm联合JetBrains IDE Support调试跟其他浏览器的调试相比的好处：

1. 方便，不用去切换。
2. 他可以直接把一些参数类型、数值结果直接显示在代码上面。 

安装插件

1.Chrome安装JetBrains IDE Support 

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项目 - 简书

前提

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启动，如下图所示

法2：通过通用方法启动

第一步：添加启动配置

Run=> Edit Configurations=> 左上角“+”=> npm=> Command选择dev或者start都可以

第二步：启动

3.配置debug

Run=> Edit Configurations=> 左上角“+”=> JavaScript Debug=> 

 注意：URL必须对应config/index.js里边的host和port配置，本处，我的config/index.js配置为：

host: 'localhost',
port: 8080,

所以，URL必须这么填：http://localhost:8080

4.debug

 此时，会自动跳转到谷歌浏览器界面，如下：

输入自己项目的url即可：

 当然，可以在相应代码的任意位置打断点，重新访问时就会跳到打断点的地方：

其他网址

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