読者です 読者をやめる 読者になる 読者になる

いつブロ

いつまで続くか分からないブログ(仮)主に趣味やプログラミングに関するメモを書いています。

Electronのconsole.logでハマる

1. はじめに

このエントリーはElectron Advent Calendar 2016 - Qiitaの3日目です。
 
分かっている人からすれば極々当たり前の事なんでしょうが、
私はめちゃくちゃハマったのでここに記録しておきたいと思います。
 
何にハマったかというと、console.logを使ったログ出力です。
console.logを使うとIDEのコンソールウィンドウにログが出力されるのだろうなと思っていて、 実際にやってみると確かに表示されたのでデバッグで簡単にログを出したいときはそうやっていました。 ところが、コンソールウィンドウに表示されないときがありました。
 

2. 開発環境

macOS Sierra
WebStorm 2016.3.1
 Application Parameter --enable-logging
 ECMA Script 6
Node.js 6.5.0
Electron 1.4.8
 
ソースは以下のような構成でした。
test_pj
- node_modules
- browserwindow.js - index.html
- index.js
- package.json
- style.css
- webview.js
 
プロジェクトの作り方も一応説明しておきます。
nodebrewを使ってNode.jsをインストールして、Node.jsのパッケージマネージャをpackage.jsonを作ります。

nodebrew install-binary v6.5.0
nodebrew use v6.5.0

cd ~/Documents/
mkdir test_pj
cd test_pj
npm init -y

package.jsonはこんな感じで作られます。

{
  "name": "test_pj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

次はElectronをインストールします。
--save-devとするとpackage.jsonに追記してくれます。

npm i electron-prebuilt --save-dev  

続いてpackage.jsonを修正します。
7行目に「"start": "electron index.js",」を追加します。

{
  "name": "test_pj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^1.4.8"
  }
}

こんな感じでプロジェクトを作っていきました。
 
続いてindex.jsを作成します。
package.jsonのmainに書いたこのjsがメインプロセスといいます。
メインプロセスから作成するBrowserWindow(10行目)がレンダラプロセスです。ちょっとややこしいかも知れません。

"use strict";

const {app} = require("electron");
const {BrowserWindow} = require("electron");

let mainWindow;

app.on("ready", function() {
    // こっちがレンダラプロセス
    mainWindow = new BrowserWindow({width: 1000, height: 800, "node-integration": false});
    mainWindow.loadURL("file://" + __dirname + "/index.html");
    // mainWindow.openDevTools();
    mainWindow.on("closed", function() {
        mainWindow = null;
    });
});

// デバッグログ
console.log("index.js");

上の11行目でindex.htmlを指定しているので、index.htmlを作ります。
 
index.htmlでは15行目にwebviewタグを使っていて、srcに指定したgoogle.comを画面いっぱいに表示します。
16行目のscriptタグでbrowsewindow.jsも読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>test_pj</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="menu-bar">
    <input type="text" id="url" value="http://electron.atom.io/">
    <button onclick="load();">Load</button>
    <button onclick="opendev();">Open Dev Tool</button>
</div>
test
<webview id="webview" preload="webview.js" src="http://google.com" style="position:absolute;width:100%;height:100%;"></webview>
<script type="text/javascript" src="browsewindow.js"></script>
</body>
</html>

webview.jsはデバッグログを出力するだけです。

"use strict";

console.log("webview.js");

browsewindow.jsは画面のボタンに対する処理を書きます。

"use strict";

console.log("browserwindow.js");

function load(){
    let url = document.getElementById("url").value;
    let webview = document.getElementById("webview");
    webview.setAttribute("src",url);
}
function opendev(){
    let webview = document.getElementById("webview");
    webview.openDevTools();
}

WebStorm上ではこんな感じになります。ちょっと見にくいですが。。
f:id:koichi0814:20161127130108p:plain
 

3. 実行結果

実行するとこのようなウィンドウが表示されます。
f:id:koichi0814:20161127130414p:plain
 
このときのデバッグログの表示を確認してみましょう。
f:id:koichi0814:20161127132442p:plain
index.jsとbrowserwindow.jsの文字が表示されている事が分かります。
メインプロセスとレンダラプロセスではログの出力が異なるようです。
そしてレンダラプロセス内のwebviewタグで指定したwebview.jsのログが表示されていません。
ここでかなりハマりました。
メインプロセスとレンダラプロセスが頭の中でごっちゃになってしまって、 メインプロセスではconsole.logが出力されて、レンダラプロセスでは出力されないものだと思い込んでしまいました。
メインプロセス(index.js)側では最初console.logを出力しておらず、 console.logが表示された方がメインプロセスだと勘違いしていたから余計に分からなくなってしまいました。
 
ではwebview.jsのログを探してみましょう。
ウィンドウにフォーカスを当てて、option + command + I (アイ)を押すとデベロッパーツールが表示されます。
ここで出力されているログはなんと「browserwindow.js」でした。 f:id:koichi0814:20161127132043p:plain
 
webview.jsのログは一体どこへ?
ウィンドウ(index.html)の「Open Dev Tool」ボタンを押してみましょう。
このボタンはindex.htmlのwebviewに対してデベロッパーツールを表示するようにjsを書いています。
f:id:koichi0814:20161127133801p:plain
ありました!
こんな所に表示されるので、Electronのメニューバーやショートカットキーでデベロッパーツールを表示させてログを確認していると、 思わぬ落とし穴に嵌りそうです。
 

4. まとめ

f:id:koichi0814:20161128002717p:plain
こんな感じでしょうか。
レンダラプロセスでのconsole.logも全部WebStormに出てくれたら良かったんですがね。
 

5. 未解決の問題

ついでに現時点でよく分かっていない問題があるので、誰か教えてくれるかも知れないという期待を込めて書いておきます。
それはデバッグ実行時にブレークポイントで止まってくれるのがメインプロセスのみという問題です。
WebStormだからなのか、WebStormでもちゃんと設定すれば止まってくれるのか分かっていないのです。
ブレークポイントで止まってくれていればconsole.logなんて出さなくても良い筈なんです。。。
念のため設定情報を貼っておきますね。
f:id:koichi0814:20161128004256p:plain
ちなみに、JavaScript file:のところに指定してもしなくてもブレークポイントで止まるのはメインプロセスだけでした。