diff --git a/docs/build.md b/docs/build.md index 83615468..0164667e 100644 --- a/docs/build.md +++ b/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. -``` -webpack: bundle is now VALID. -``` +And webpack will watch the code changes and apply it automatically. -Then, we have to run the app. -``` -$ npm run hot -``` -> Actually the app can be start with `npm start`. However, the app will use the compiled script. +If this error: `Failed to load resource: net::ERR_CONNECTION_REFUSED` happens, please reload Boostnote. -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. diff --git a/docs/debug.md b/docs/debug.md new file mode 100644 index 00000000..e1a4504e --- /dev/null +++ b/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) diff --git a/docs/jp/build.md b/docs/jp/build.md index 1019fbd2..15236310 100644 --- a/docs/jp/build.md +++ b/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) > ### 注意 > 時々、直接リフレッシュをする必要があります。 diff --git a/docs/jp/debug.md b/docs/jp/debug.md new file mode 100644 index 00000000..76cfad0e --- /dev/null +++ b/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)