Electron

　少しですが、Electrolに触れたのでやったことについて簡単に触れようと思います。
ElectronとはGitHub社が開発したデスクトップアプリを作れるクロスプラットフォーム環境です。AtomやSlackなどがこのElectronで作られているらしいです。

デバッグ

　今回行ったのはデバッグでElectron自体には触れてませんが、少し詰まったことをいくつか書きます。

開発者ツール

ElectronではChromeと同じく開発者ツールが使えるので慣れている方法でデバッグができます。しかし特に設定をしていないと開発者ツールを出すことが出来ませんでした。そこで main.js に以下のコードを記述することで開発者ツールを開くことが出来ました。

    mainWindow.openDevTools();

また、メニュー部分に以下のようなコードを記入すると上のメニューから開けるようになります。

            { label: 'Toggle DevTools', accelerator: 'Alt+Command+I', click: function() { BrowserWindow.getFocusedWindow().toggleDevTools(); } }

メインプロセスとレンダラプロセス

　Electronでは大きくメインプロセスとレンダラプロセスに分かれています。メインプロセスはNode.jsで行われている処理を指し、レンダラプロセスはフロントで動いている処理を指していて、開発者ツールではレンダラプロセス部分のデバッグが出来ます。
今回触ってはいませんが、メインプロセスは node-inspector を使うとデバッグ出来るらしいです。

デバッグできない・・・

　最初開発者ツールを出せたのは良いもののjavascriptのエラーを見たいのにエラーが何も出てこないという状態でした。原因としてはwindowでindex.htmlを呼び出していたことが原因でした。index.htmlからWebサイトを読み込むWebViewのような構造になっていたのですが、一時的にmain.jsで直接ウェブサイトにアクセスすることでjavascriptのエラーを見ることが出来るようになりました。

バグの原因

　今回のバグの原因は raphael-min.js でした。エラー内容としては、

TypeError: b.on is not a function

となっていて、以下のIssuesで解決しようとしましたが、minから普通のjsに変更したら他のエラーが出てきて断念しました。
TypeError: b.on is not a function #987
結局、raphael-min.jsのバージョンを2.1.2から2.2.0に変更することでエラーが出なくなり、解決しました。