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/docs/debug.md b/docs/debug.md
index 78a71137..a84a6bba 100644
--- a/docs/debug.md
+++ b/docs/debug.md
@@ -1,6 +1,8 @@
 # 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:
@@ -11,12 +13,24 @@ The `Developer Tools` will look like this:
 
 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)
 
 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**. 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** 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)
+	* [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
\ No newline at end of file
diff --git a/package.json b/package.json
index 47b6d2bd..6e8fcda8 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": "3.0.3"
diff --git a/webpack.config.js b/webpack.config.js
index 16b7fd73..ad3c4f8b 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: false,
+    publicPath: 'http://localhost:8080/assets/'
+  }
 })
 
 module.exports = config