From 07aa775de173d62915187ee280d7595872e24239 Mon Sep 17 00:00:00 2001 From: JianXu Date: Mon, 5 Nov 2018 00:39:27 +0800 Subject: [PATCH 1/4] Add vscode debug support --- .vscode/launch.json | 41 +++++++++++++++++++++++++++++++++++++++++ .vscode/tasks.json | 27 +++++++++++++++++++++++++++ package.json | 3 ++- webpack.config.js | 9 ++++++++- 4 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 .vscode/tasks.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..a742a59e --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,41 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + { + "type": "node", + "request": "launch", + "name": "BoostNote Main", + "protocol": "inspector", + "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", + "runtimeArgs": [ + "--remote-debugging-port=9223", + "--hot", + "${workspaceFolder}/index.js" + ], + "windows": { + "runtimeExecutable": "${workspaceFolder}/node_modeules/.bin/electron.cmd" + } + }, + { + "type": "chrome", + "request": "attach", + "name": "BoostNote Renderer", + "port": 9223, + "webRoot": "${workspaceFolder}", + "sourceMapPathOverrides": { + "webpack:///./~/*": "${webRoot}/node_modules/*", + "webpack:///*": "${webRoot}/*" + } + } + ], + "compounds": [ + { + "name": "BostNote All", + "configurations": ["BoostNote Main", "BoostNote Renderer"] + } + ] +} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 00000000..c6664225 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,27 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "label": "Build Boostnote", + "group": "build", + "type": "npm", + "script": "watch", + "isBackground": true, + "presentation": { + "reveal": "always", + }, + "problemMatcher": { + "pattern":[ + { + "regexp": "^([^\\\\s].*)\\\\((\\\\d+,\\\\d+)\\\\):\\\\s*(.*)$", + "file": 1, + "location": 2, + "message": 3 + } + ] + } + } + ] +} \ No newline at end of file diff --git a/package.json b/package.json index e9ef0de0..a26e625e 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "jest": "jest", "fix": "eslint . --fix", "lint": "eslint .", - "dev": "node dev-scripts/dev.js" + "dev": "node dev-scripts/dev.js", + "watch": "webpack-dev-server --hot" }, "config": { "electron-version": "2.0.7" diff --git a/webpack.config.js b/webpack.config.js index 16b7fd73..6a05f231 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,7 +28,14 @@ var config = Object.assign({}, skeleton, { publicPath: 'http://localhost:8080/assets/' }, debug: true, - devtool: 'cheap-module-eval-source-map' + devtool: 'cheap-module-eval-source-map', + devServer: { + port: 8080, + hot: true, + inline: true, + quiet: true, + publicPath: 'http://localhost:8080/assets/' + } }) module.exports = config From e30727ab272ecc4832d630dd43ffbd9e19e0cc98 Mon Sep 17 00:00:00 2001 From: JianXu Date: Thu, 8 Nov 2018 13:47:34 +0800 Subject: [PATCH 2/4] Add detail mode support for vscode debug --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 6a05f231..ad3c4f8b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -33,7 +33,7 @@ var config = Object.assign({}, skeleton, { port: 8080, hot: true, inline: true, - quiet: true, + quiet: false, publicPath: 'http://localhost:8080/assets/' } }) From 3864d73d1a400ef29dbe98b0101ad221c2abfb1c Mon Sep 17 00:00:00 2001 From: JianXu Date: Sun, 11 Nov 2018 14:49:48 +0800 Subject: [PATCH 3/4] Add vscode debug support doc --- docs/debug.md | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/debug.md b/docs/debug.md index 78a71137..390dc5d3 100644 --- a/docs/debug.md +++ b/docs/debug.md @@ -1,22 +1,36 @@ -# How to debug Boostnote (Electron app) -This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md) and [German](https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md). +# How to debug BoostNote (Electron app) +This page is also available in [Japanese](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [French](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md) and [German](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md). + +## Debug with Google Chrome developer Tools Boostnote is an Electron app so it's based on Chromium; developers can use `Developer Tools` just like Google Chrome. You can toggle the `Developer Tools` like this: -![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png) +![how_to_toggle_devTools](#)(https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png) The `Developer Tools` will look like this: -![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png) +![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 +### Debugging For example, you can use the `debugger` to set a breakpoint in the code like this: -![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png) +![debugger](#)(https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png) This is just an illustrative example, you should find a way to debug which fits your style. -## References +### References * [Official document of Google Chrome about debugging](https://developer.chrome.com/devtools) + +## Debug with Visual Studio Code + +1. Install **[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome "Install Debugger for Chrome")** plugin for Visual Studio Code. Then restart it. +2. Pressing **Shift+Command+B** or running ** Run Build Task** from the global **Terminal** menu, then pick the task named **Build Boostnote**. +3. When above task is running, open **Debug view** in **Activity Bar** on the side of VS Code or use shortcut **Shift+Command+D**. +4. Select the configuration named **Boostnote All** from the **Debug configuration**, then click the green arrow button or press **F5**. +5. Now you should find **Boostnote** is running. You will see two process is running, one named **Boostnote Main**,other named **Boostnote Renderer**. Now you can set **debug breakpoint** in vscode. If you find **breakpoints** is unverified, you need to switch process. + + ### References + * [Electron application debugging](https://electronjs.org/docs/tutorial/application-debugging) + * [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) \ No newline at end of file From e100e080da2e7526dbdb8d3995936e31de9007a8 Mon Sep 17 00:00:00 2001 From: JianXu Date: Sun, 11 Nov 2018 21:19:38 +0800 Subject: [PATCH 4/4] fixed debug.md format error --- docs/debug.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/debug.md b/docs/debug.md index 390dc5d3..a84a6bba 100644 --- a/docs/debug.md +++ b/docs/debug.md @@ -1,22 +1,22 @@ -# How to debug BoostNote (Electron app) +# How to debug Boostnote (Electron app) -This page is also available in [Japanese](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [French](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md) and [German](#)(https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md). +This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md) and [German](https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md). ## Debug with Google Chrome developer Tools Boostnote is an Electron app so it's based on Chromium; developers can use `Developer Tools` just like Google Chrome. You can toggle the `Developer Tools` like this: -![how_to_toggle_devTools](#)(https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png) +![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png) The `Developer Tools` will look like this: -![Developer_Tools](#)(https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png) +![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, you can use the `debugger` to set a breakpoint in the code like this: -![debugger](#)(https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png) +![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png) This is just an illustrative example, you should find a way to debug which fits your style. @@ -26,10 +26,10 @@ This is just an illustrative example, you should find a way to debug which fits ## Debug with Visual Studio Code 1. Install **[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome "Install Debugger for Chrome")** plugin for Visual Studio Code. Then restart it. -2. Pressing **Shift+Command+B** or running ** Run Build Task** from the global **Terminal** menu, then pick the task named **Build Boostnote**. +2. Pressing **Shift+Command+B** or running **Run Build Task** from the global **Terminal** menu, then pick the task named **Build Boostnote**. Or run `yarn run watch` from the terminal. 3. When above task is running, open **Debug view** in **Activity Bar** on the side of VS Code or use shortcut **Shift+Command+D**. -4. Select the configuration named **Boostnote All** from the **Debug configuration**, then click the green arrow button or press **F5**. -5. Now you should find **Boostnote** is running. You will see two process is running, one named **Boostnote Main**,other named **Boostnote Renderer**. Now you can set **debug breakpoint** in vscode. If you find **breakpoints** is unverified, you need to switch process. +4. Select the configuration named **Boostnote All** from the **Debug configuration**, then click the green arrow button or press **F5** to start debugging. +5. Now you should find **Boostnote** is running. You will see two processes running, one named **Boostnote Main** and the other named **Boostnote Renderer**. Now you can set **debug breakpoints** in vscode. If you find your **breakpoints** is unverified, you need to switch to the appropriate process between **Boostnote Renderer** and **Boostnote Main**. ### References * [Electron application debugging](https://electronjs.org/docs/tutorial/application-debugging)