使用Webstorm进行调试的方法

Blacol
3,729 阅读3分钟

前言

在编写前端的时候，需要进行调试，默认情况下是通过F12找到源代码然后放置断点来进行调试。这种方法十分的繁琐。在使用Webstorm后发现Webstorm也可以放置断点，但是并不会在断点处停止。也就是说Webstorm的调试不通过一些手段是无法使用的。

在查阅大量资料后总结出了一些方法来使用Webstorm的调试功能。

图片中所使用的项目由Vue 3+Vite+Pinia搭建。Webstorm版本为2023.1

方法一、使用Webstorm自带的Chrome浏览器进行调试

Webstorm在进行调试时会打开一个Chrome浏览器（这取决于系统的默认浏览器，系统默认浏览器是Chrome就启动Chrome，是Edge就启动Edge）。

Chrome浏览器有一些特殊，由于Webstorm会内置一个Chrome浏览器，这个内置的Chrome浏览器和本机安装的Chrome浏览器不是一个浏览器。因此，这个浏览器当中是不会有你安装的插件的。

那么怎么启动这个内置的浏览器呢？

  1. 点击启动按钮前面的那个部分：

image.png

  1. 在弹出的菜单中选择编辑配置

image.png

  1. 在弹出的页面中点击加号然后选择JavaScript调试

image.png

  1. 点击后会进入JavaScript调试的编辑页面

image.png

输入完这些之后可以选择启动的浏览器，这里选择默认的Chrome浏览器，选择完毕后点击下面的确定即可。

  1. 启动Vue项目
  2. 启动刚才的JavaScript调试项目

等待片刻后就会弹出一个浏览器窗口。这个时候就可以在Webstorm放置断点，当程序执行到断点处就会停止运行同时Webstorm也会进入调试状态。

image.png

image.png

如果想让它启动本机的Chrome应该怎么操作呢？见方法2.

方法二、使用本机的Chrome浏览器

1-3步和方法一 一致。 4. 在浏览器那一栏中选择...

image.png

  1. 点击加号，然后点击新出现的Chrome，再点击小铅笔。（路径那部分不要管）

image.png

  1. 获取Chrome浏览器的用户数据位置
Chrome版本用户数据位置
ChromeC:\Users\你的用户名\AppData\Local\Google\Chrome
Chrome DevC:\Users\你的用户名\AppData\Local\Google\Chrome Dev
  1. 在该页面中勾选使用用户自定义数据再在路径那一栏点击右侧的文件夹图标然后选择用户数据位置

image.png

选择完毕后点击确定

如果找不到APPData文件夹可以点击显示隐藏文件（该功能疑似仅2023.1版本有）

image.png

  1. 操作完毕后点击确定，再点击确定，回到运行/调试配置界面，在浏览器那一部分选择刚创建的浏览器。

image.png

  1. 点击确定。
  2. 启动Vue项目
  3. 启动JavaScript调试项目

使用Edge浏览器

创建好JavaScript调试然后选择好Edge浏览器后直接启动即可。

注意事项

  1. 在JavaScript调试项目启动前需要关闭任何已经启动的Chrome浏览器
  2. 不要重新运行JavaScript调试 ，如果必须要重新运行，请不要关闭浏览器。如果关闭浏览器可能会发生无法调试的情况。
  3. 有时候取消断点后它还会停止。（可能是打开了开发者调试工具）
avatar
文章
阅读
粉丝