使用 Webstorm 调试 Electron 主进程

Webstorm 官方博客介绍的方法有问题,需要删掉 JavaScript file 的内容,再在 Node parameters 里填上 “.”(或者项目绝对路径),然后才可以。

图文无关,我什么时候拍了这条龙卷风的……

需要调试 Electron 主进程,按照 Webstorm 官方博客的设置,不行,报错。

错误信息

仔细看错误信息,因为我需要在工作目录下写文件,看起来在这样的执行语句下,会把工作目录定到 Electron 的安装目录里。

不过我直接在命令行里执行 electron . 是可以的,猜测可能跟入口 js 有关,所以把“JavaScript file”删掉,然后在“Node parameters”里填上 .(或者项目绝对路径),尽量贴近命令行里的状况,就可以了。

可行的配置

给WebStorm添加FileWatcher支持Browserify

使用WebStorm的FileWatcher可以进行各种文件编译,除了内建类型,添加自定义类型也完全没有问题。

按惯例先介绍本文角色:

Browserify 是一款让我们在浏览器端使用require('modules')来管理模块的工具。它会分析代码中的依赖关系,然后进行编译,打包成一个文件,我们只需要在HTML中引用生成的文件即可。

WebStorm 则是JetBrains出品的开发利器,集成了各种开发工具和环境,价格不贵,速度很快,样式好看,我非常喜欢。

Browserify 也提供了个工具,叫 watchify ,可以监控文件变化,即时编译。不过我更喜欢让WebStorm帮我处理这些事情,所以小小研究了一下,配置成功。

具体步骤

  1. 通过 NPM 安装 Browserify
    npm install browserify -g
    
  2. [Preferences] -> [Tools] -> [File Watchers]

  3. 点击“+”按钮,没有内建方案,所以选择“<custom>”

    WebStorm Preferences

  4. 名字(Name)随便写,描述(Description)可以留空,重点是下面几项

  5. FileType 选择 JavaScript

  6. Scope 监控范围,内建的都不合适,所以点“…”按钮,弹出自定义的监控范围

  7. 新建一个域,名字和项目一样,好认。展开项目目录,选择存放JS文件的目录,点右侧的“Include”和“Include Recursively”将该目录下所有文件和文件夹都包含进来。OK保存。

    WebStorm Scope

  8. Program 是要执行的程序,这里自然是 Browserify,Mac下通常在/usr/local/bin/browserify

  9. Arguments 参数,参考 Browserify 的文档介绍,常规命令是

    browserify index.js -o bundle.js --debug
    

    其中 index.js 是我的入口JS,那么直接去掉 browserify 就好了。

  10. Working Directory 工作目录,点击右侧的“Insert Macros”按钮,选择 “$ProjectFileDir$”。后面接上目录“/js/”。

  11. 完成!

    WebStorm Browserify File Watcher

小优化

  1. 前面我们设置监控范围的时候比较粗放,这样生成 bundle.js 之后会再跑一遍,有点不爽,所以图中我把 bundle.js 过滤掉了

  2. 确保这个File Watcher正常工作后,可以去把 Show console 设置成Never,这样在编辑到一半的时候就不会有错误提示了。