使用IDE调试React代码

起因

本人参与了一个6万行的React项目开发,使用Chrome浏览器 + WebStorm。
作为后端工程师,前端的世界还不太熟悉,遇到代码问题需要调试时,上来最直接的想法自然是使用浏览器的开发者工具(F12),毕竟最方便最直观嘛。

但是经过一段时间的使用,发现了这方法有以下弊端:
– 查看方法定义麻烦:我必须手动找到对应位置,而在IDE中,只需要按住Control然后鼠标点击即可
– 临时调整代码麻烦:我必须在源文件中找到对应行,而在IDE中,断点位置即源代码
– 没有语法高亮,代码阅读受碍
– 变量查看界面太小,不方便
– 不支持map/reduce中匿名函数的断点,这点是最让我头疼的

总言而之,对于这种大项目来说,用的不舒服,效率低下。

尝试使用IDE进行Debug

准备工具

  • Chrome
  • Chrome扩展:JetBrains IDE Support
  • WebStorm

WebStorm配置

打开设置界面:
Preerences -> Build, Execution, Deployment -> Debugger

找到Built-in server -> port
记下端口号,这里我设置为了17798,因为我有多个IDE所以需要区分
这里没有这个标记,说明是全局配置

另外,我也找了相关资料,官方对该扩展不提供多实例支持的
这是一个3年前的issue,至今未解决:
https://youtrack.jetbrains.com/issue/WEB-24301

浏览器配置

安装JetBrains IDE Support后,右键其图标,点击选项

填入IDE中的端口号,这里我是17798

调试步骤

  1. 以debug方式启动React项目

  2. 在Chrome中,右键JetBrains IDE Support,选择Inspect

当你见到IDE中的断点有个勾,说明断点生效了

参考

一开始参考的是这篇文章
https://www.jianshu.com/p/87a5609c5f44

但是他启动的是一个隐身模式的Chrome,这会导致其隐藏浏览器扩展,这么一来,Redux状态也无法查看了,所以不推荐。


发表评论

电子邮件地址不会被公开。 必填项已用*标注