From e6a25211438f2d45d1a67117cca80041137d475d Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sun, 26 Mar 2017 23:15:36 -0700 Subject: [PATCH 1/5] Modify build.md accompanied by npm run dev-start --- docs/build.md | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) 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. From 60e267409c011d665751c2a89e0eecfc15490da7 Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sun, 26 Mar 2017 23:20:04 -0700 Subject: [PATCH 2/5] Modify ja/build.md accompanied by npm run dev-start --- docs/jp/build.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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) > ### 注意 > 時々、直接リフレッシュをする必要があります。 From b9457d3e3364665452d278baf299be5121bba9d7 Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sun, 26 Mar 2017 23:49:08 -0700 Subject: [PATCH 3/5] Add docs/debug.md --- docs/debug.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/debug.md diff --git a/docs/debug.md b/docs/debug.md new file mode 100644 index 00000000..1ed80d11 --- /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 +I assume to put `debugger` as a breakpoint into the code is a good way to debug 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) From 5b71d010b4296c45a0fdf0441654495de0fe3308 Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sun, 26 Mar 2017 23:49:18 -0700 Subject: [PATCH 4/5] Add docs/ja/debug.md --- docs/jp/debug.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/jp/debug.md diff --git a/docs/jp/debug.md b/docs/jp/debug.md new file mode 100644 index 00000000..26458869 --- /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) From c424cc5d33897d869cac3012c9f68a2a735d0ab2 Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sun, 26 Mar 2017 23:55:09 -0700 Subject: [PATCH 5/5] Change the sentence --- docs/debug.md | 2 +- docs/jp/debug.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/debug.md b/docs/debug.md index 1ed80d11..e1a4504e 100644 --- a/docs/debug.md +++ b/docs/debug.md @@ -10,7 +10,7 @@ The Developer Tools is like this: When errors occur, the error messages are displayed at the `console`. ## Debugging -I assume to put `debugger` as a breakpoint into the code is a good way to debug like this: +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) diff --git a/docs/jp/debug.md b/docs/jp/debug.md index 26458869..76cfad0e 100644 --- a/docs/jp/debug.md +++ b/docs/jp/debug.md @@ -10,7 +10,7 @@ Developer Toolsの切り替え方法はこちらです: 何かエラーが起きた場合 `console`にエラーメッセージが表示されます。 ## デバッグ -このように、 `debugger`をコード中にブレークポイントとして挟むのがいい方法だと思います。 +例えば、 `debugger`をコード中にブレークポイントとして挟む方法があります。 ![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)