Merge pull request #358 from asmsuechan/modify-documents

Modify and add documents

docs/build.md

@@ -11,25 +11,19 @@ Install requirement packages.
 $ npm install
 ```
 
-Build codes.
+Build codes and run.
 
 ```
-$ npm run webpack
+$ npm run dev-start
 ```
 
-After a few seconds, you will see this message.
+This command runs `npm run webpack` and `npm run hot` in parallel. It means it is the same thing to run those commands in 2 terminals.
 
-```
+And webpack will watch the code changes and apply it automatically.
-webpack: bundle is now VALID.
-```
 
-Then, we have to run the app.
+If this error: `Failed to load resource: net::ERR_CONNECTION_REFUSED` happens, please reload Boostnote.
-```
-$ npm run hot
-```
-> Actually the app can be start with `npm start`. However, the app will use the compiled script.
 
-By this, webpack will watch the code changes and apply it automatically.
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
 
 > ### Notice
 > There are some cases you have to refresh app yourself.

docs/debug.md

@@ -0,0 +1,20 @@
+# How to debug Boostnote (electron app)
+The electron that makes Boostnote is made from Chromium, developers can use `Developer Tools` as same as Google Chrome.
+
+This is how to toggle Developer Tools:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+The Developer Tools is like this:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+When errors occur, the error messages are displayed at the `console`.
+
+## Debugging
+For example, there is a way to put `debugger` as a breakpoint into the code like this:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+But this is only an example. You need to find a way to debug which fits with you.
+
+## References
+* [Official document of Google Chrome about debugging](https://developer.chrome.com/devtools)

docs/jp/build.md

@@ -5,25 +5,25 @@
 Webpack HRMを使います。
 次の命令から私達がしておいた設定を使うことができます。
 
-```
+依存するパッケージをインストールします。
-npm run webpack
-```
-
-数秒後、次のメッセージが表示されます。
 
 ```
-webpack: bundle is now VALID.
+$ npm install
 ```
 
-では、アプリを起動します。
+ビルドして実行します。
 
 ```
-npm run hot
+$ npm run dev-start
 ```
 
-> 元々、アプリは`npm start`から起動できます。しかし、この場合、コンパイルされたスクリプトを利用します。
+このコマンドは `npm run webpack` と `npm run hot`を並列に実行します。つまりこのコマンドは2つのターミナルで同時にこれらのコマンドを実行するのと同じことです。
 
-これにより、Webpackが自動的にコードの変更を確認し、それを適用してくれるようになります。
+そして、Webpackが自動的にコードの変更を確認し、それを適用してくれるようになります。
+
+もし、 `Failed to load resource: net::ERR_CONNECTION_REFUSED`というエラーが起きた場合、Boostnoteをリロードしてください。
+
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
 
 > ### 注意
 > 時々、直接リフレッシュをする必要があります。

docs/jp/debug.md

@@ -0,0 +1,20 @@
+# Boostnote(electronアプリケーション)のデバッグ方法について
+Boostnoteを作っているelectronはChromiumからできており、開発者は `Developer Tools`をGoogle Chromeと同じように使うことができます。
+
+Developer Toolsの切り替え方法はこちらです:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+実際のデベロッパーツールはこちらです:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+何かエラーが起きた場合 `console`にエラーメッセージが表示されます。
+
+## デバッグ
+例えば、 `debugger`をコード中にブレークポイントとして挟む方法があります。
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+ですがこれは一例にしか過ぎません。最もあなたに合うデバッグ方法を見つけた方がいいでしょう。
+
+## 参考
+* [デバッグに関するGoogle Chromeの公式ドキュメント](https://developer.chrome.com/devtools)