1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00

Merge pull request #358 from asmsuechan/modify-documents

Modify and add documents
This commit is contained in:
SuenagaRyota
2017-03-27 02:37:44 -07:00
committed by GitHub
4 changed files with 56 additions and 22 deletions

View File

@@ -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.

20
docs/debug.md Normal file
View File

@@ -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)

View File

@@ -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)
> ### 注意
> 時々、直接リフレッシュをする必要があります。

20
docs/jp/debug.md Normal file
View File

@@ -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)