fix: vscode debugging configuration (#889)

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+trim_trailing_whitespace = true
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+

.electron-vue/dev-runner.js

@@ -73,7 +73,7 @@ function startRenderer () {
       }
     )
 
-    server.listen(9080)
+    server.listen(9091)
   })
 }
 
@@ -114,7 +114,12 @@ function startMain () {
 }
 
 function startElectron () {
-  electronProcess = spawn(electron, ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')])
+  electronProcess = spawn(electron, [
+    '--inspect=5861',
+    '--remote-debugging-port=8315',
+    '--nolazy',
+    path.join(__dirname, '../dist/electron/main.js')
+  ])
 
   electronProcess.stdout.on('data', data => {
     electronLog(data, 'blue')

.electron-vue/webpack.main.config.js

@@ -62,6 +62,11 @@ const mainConfig = {
   target: 'electron-main'
 }
 
+// Fix debugger breakpoints
+if (!proMode && process.env.MARKTEXT_BUILD_VSCODE_DEBUG) {
+  mainConfig.devtool = '#inline-source-map'
+}
+
 /**
  * Adjust mainConfig for development settings
  */

.electron-vue/webpack.renderer.config.js

@@ -191,6 +191,11 @@ if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' &&
   )
 }
 
+// Fix debugger breakpoints
+if (!proMode && process.env.MARKTEXT_BUILD_VSCODE_DEBUG) {
+  rendererConfig.devtool = '#inline-source-map'
+}
+
 /**
  * Adjust rendererConfig for production settings
  */

.vscode/launch.json

@@ -1,35 +1,49 @@
 {
-  // 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": "Marktext: Main",
+      "name": "Launch Mark Text",
       "program": "${workspaceFolder}/.electron-vue/dev-runner.js",
-      "windows": {
+      "env": {
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+        "NODE_ENV": "development",
-      }
+        "MARKTEXT_BUILD_VSCODE_DEBUG": "1"
+      },
+      "outFiles": [
+        "${workspaceFolder}/dist/electron/main.js"
+      ]
     },
     {
-      "name": "Marktext: Renderer",
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to Main Process",
+      "port": 5861,
+      "timeout": 60000,
+      "sourceMaps": true,
+      "outFiles": [
+        "${workspaceFolder}/dist/electron/main.js"
+      ]
+    },
+    {
+      "name": "Attach to Renderer Process",
       "type": "chrome",
       "request": "attach",
       "port": 8315,
+      "sourceMaps": true,
       "webRoot": "${workspaceFolder}/src",
-      "timeout": 30000,
+      "timeout": 60000,
-      "urlFilter": "localhost:*"
+      "urlFilter": "http://localhost:9091"
     }
   ],
   "compounds": [
     {
-      "name": "Marktext: All",
+      "name": "Debug Mark Text",
       "configurations": [
-        "Marktext: Main",
+        "Launch Mark Text",
-        "Marktext: Renderer"
+        "Attach to Main Process",
+        "Attach to Renderer Process"
       ]
     }
   ]
-}
+}

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "editor.trimAutoWhitespace": true,
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
+
+  "search.exclude": {
+    "**/.git": true,
+    "**/build": true,
+    "**/node_modules": true,
+    "**/dist": true
+  },
+  "files.watcherExclude": {
+    "**/.git": true,
+    "**/build": true,
+    "**/node_modules": true,
+    "**/dist": true
+  }
+}

doc/DEBUGGING.md

@@ -0,0 +1,13 @@
+# Debugging
+
+## Using Visual Studio Code
+
+The most simplest way is to debug using the `Debug Mark Text` configuration. You can set breakpoints and use the `debugger` statement.
+
+**Prerequisites:**
+
+- [Debugger for Chrome](https://marketplace.visualstudio.com/itemdetails?itemName=msjsdiag.debugger-for-chrome)
+
+## Using Chrome Developer Tools
+
+You can use the built-in developer tools via `View -> Toggle Developer Tools` in debug mode or connect via `chrome://inspect` using port `5861` for the main process and `8315` for the renderer process (`npm run dev`).

src/main/app.js

@@ -18,11 +18,6 @@ class App {
       app.commandLine.appendSwitch('enable-experimental-web-platform-features', 'true')
     }
 
-    // Enable vscode chrome extension debugger connection
-    if (process.env.NODE_ENV === 'development') {
-      app.commandLine.appendSwitch('remote-debugging-port', '8315')
-    }
-
     app.on('open-file', this.openFile)
 
     app.on('ready', this.ready)

src/main/window.js

@@ -168,7 +168,7 @@ class AppWindow {
     }
 
     const winURL = process.env.NODE_ENV === 'development'
-      ? `http://localhost:9080`
+      ? `http://localhost:9091`
       : `file://${__dirname}/index.html`
 
     win.loadURL(winURL)