Merge pull request #21 from cmeeren/vscode-launch-debug

Launch and debug with VS Code

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+      {
+          "name": "Chrome",
+          "type": "chrome",
+          "request": "launch",
+          "url": "http://localhost:8080",
+          "webRoot": "${workspaceRoot}/public",
+          "preLaunchTask": "Start",
+      }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,40 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+      {
+          "command": "./fake.sh",
+          "args": ["build", "-t", "Watch"],
+          "type": "shell",
+          "label": "Start",
+          "group": "build",
+          "isBackground": true,
+          "windows": {
+            "command": "./fake.cmd"
+          },
+          "problemMatcher": {
+              "fileLocation": "absolute",
+              "background": {
+                  "activeOnStart": true,
+                  "beginsPattern":{
+                      "regexp": "dotnet restore build.proj"
+                  },
+                  "endsPattern":{
+                      "regexp": "(Compiled successfully|Failed to compile)"
+                  }
+              },
+              "pattern": {
+                  "regexp": "^(.*)\\((\\d+),(\\d+)\\): \\((\\d+),(\\d+)\\) (warning|error) FABLE: (.*)$",
+                  "file": 1,
+                  "line": 2,
+                  "column": 3,
+                  "endLine": 4,
+                  "endColumn": 5,
+                  "severity": 6,
+                  "message": 7
+              }
+          }
+      }
+  ]
+}

README.md

@@ -16,3 +16,13 @@ Run: `./fake.sh build -t Watch`
 - Install Nuget dependencies: `dotnet restore build.proj`
 - Building for development: `dotnet fable webpack-dev-server`
 - Building for production: `dotnet fable webpack-cli`
+
+# Debugging in VS Code
+
+* Install [Debugger For Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) in vscode
+* Press F5 in vscode
+* After all the .fs files are compiled, the browser will be launched
+* Set a breakpoint in F#
+* Either press F5 in Chrome or restart debugging in VS Code with Ctrl+Shift+F5 (Cmd+Shift+F5 on macOS)
+* The breakpoint will be caught in vscode
+

webpack.config.js

@@ -62,7 +62,9 @@ module.exports = {
     // to prevent browser caching if code changes
     output: {
         path: path.join(__dirname, CONFIG.outputDir),
-        filename: isProduction ? '[name].[hash].js' : '[name].js'
+        filename: isProduction ? '[name].[hash].js' : '[name].js',
+        devtoolModuleFilenameTemplate: info =>
+          path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
     },
     mode: isProduction ? "production" : "development",
     devtool: isProduction ? "source-map" : "eval-source-map",