Hello Visual Studio Code - Node

image.png

从去年开始使用RN,一直在用WebStom开发。刚开始还没觉得怎么。轻车熟路的每天 npm start (react-native start)打开Chrome调试。

刚开始项目小,debug还算轻松。随着项目业务的扩张我们发现每改一行代码调试,debug就要卡半天。在android设备上甚至出现假死的症状。这一切都是因为是RN调试是远程debug导致的。(换句话说,导致你打包后的js要同步一份到Chrome中),如果你引入了redux,那么会更卡一点。因为这个家伙还要把视图给画一边。更恐怖的是网络数据很多的时候debug日志没有关闭也会卡顿。我整理一下就是下面这几点。

  • 1.js文件数目过多,远程js包调试 (基本无解,不存在说你把业务删掉。重构是没有时间的。)
  • 2.android设备内存不够,debug假死
  • 3.redux消耗更多的内存和链接
  • 4.未关闭的日志输出

而且这里还有一个坑,debug环境下跑出来的结果是真实的运行在V8引擎中的。而非debug条件下是在移动端RN框架内的。目前在时间转换上有明显差异。

如果你试图想用RN来完成跨平台工作以减少开销成本,我想这可能是一个伪的。至少现在还不行。

前天晚上朋友找我帮忙调试他的node,在他家里发现VS-Code体验确实不错,之前一直没试。我在他家里写来几行代码后就断定,我可能真的爱上了。(我是指VS-Code。)


换换换,今天就来换一把。还完以后发现遛得一批啊。可以暂时不用Chrome了。在VS-Code上直接支持Node断点调试和异常断点。这点和VS保持了高度的相似之处。甚至是中文的提示信息。(可以改成EN)

我们先来看一张完整的效果图。颜值还是超过的。

令我最喜欢的是,你可以远程debug,手机端的代码。正常下断点。正常打印对象日志,展开复制都很方便。这也就是说可以离开Chrome开发工具也能好好的玩耍,并且更佳润滑。关键是真的不吃什么内存。

-内存情况
VS-Code

WebStom&AndroidStuido

  • 日志打印
  • 断点调试器

  • 动态变量预览
  • 调试器

如果你也在用RN开发,我推荐使用VS-Code环境。这一切你仅仅只需要。
VS-Code官网下载
在VS扩展商店中安装 React-Native tools

就可以愉快的玩耍了。

还有一个要注意的是,你VS-Code依赖的不是package.json,而是他自己的launch.js文件。

你的配置信息要有一些小变化,不过很简单。假如你安装了React-Native tools 那么可以忽略这个问题,因为工具里已经包含了这些配置。你只需要按F1 输入命令就可以运行。

高级点的玩法就是自己去配置。

随缘打赏!