From f279e2beba322ade1d6b8482fea9c4536a684078 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alfonso=20Mart=C3=ADnez?= <alfonsomthd@protonmail.com>
Date: Thu, 28 Nov 2024 16:57:19 +0100
Subject: [PATCH] Debug: add instructions & vscode 'launch.json' template

---
 .gitignore                   |  1 +
 .vscode/launch.template.json | 17 +++++++++++++++++
 .vscode/settings.json        |  1 +
 README.md                    | 29 ++++++++++++++++++++++++++++-
 4 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/launch.template.json

diff --git a/.gitignore b/.gitignore
index 398e47d78..4cc541b31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,4 @@ plugins/**/.cache-loader
 plugins/**/cypress.config.ts
 yarn-error.log
 test-report.html
+.vscode/launch.json
diff --git a/.vscode/launch.template.json b/.vscode/launch.template.json
new file mode 100644
index 000000000..e1b81b3c5
--- /dev/null
+++ b/.vscode/launch.template.json
@@ -0,0 +1,17 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug odf-console",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:9000",
+      "sourceMaps": true,
+      "webRoot": "${workspaceFolder}",
+      "skipFiles": [
+        "**/node_modules/**"
+      ],
+      "trace": true
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e0c7f6760..f2407fc99 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
+  "debug.inlineValues": "on",
   "json.schemas": [
     {
       "fileMatch": ["**/console-extensions.json"],
diff --git a/README.md b/README.md
index 5f426d83e..92c91f645 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,34 @@ yarn test-cypress-headless
 
 By default, it will look for Chrome in the system and use it, but if you want to use Firefox instead, set BRIDGE_E2E_BROWSER_NAME environment variable in your shell with the value firefox.
 
-#### Build the CI runner image
+### Debugging with VSCode
+
+To debug with VSCode breakpoints, do the following:
+
+- Run: `yarn dev:c`
+- To display the value of the variables inline, add this to your _settings.json_:
+
+  ```
+  "debug.inlineValues": "on"
+  ```
+
+  This setting also works with the `debugger;` statement.
+
+- Create a _launch.json_ file from the template:
+
+  ```
+  cp .vscode/launch.{template.json,json}
+  ```
+
+- Set _webRoot_: your _odf-console_ directory path. Check if the template value works for you.
+- Set a breakpoint in the code.
+- Go to _Run and Debug_ panel, select "_Debug odf-console_" and start debugging.
+
+  A Google Chrome instance will be launched.
+
+- Interact with the browser until you reach the breakpoint.
+
+## Build the CI runner image
 
 Build a beta for testing: