Add VSCode debugging support for the web server (#3991)

* Add VSCode debugging support for the web server * Address review feedback
web-platform-tests · Sep 9, 2024 · 5264779 · 5264779
1 parent 594077b
commit 5264779
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 9 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,23 @@
+{
+    // 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": [
+        {
+            "name": "Web server",
+            "type": "go",
+            "request": "attach",
+            "port": 12345,
+            "host": "localhost",
+            "mode": "remote",
+            "debugAdapter": "dlv-dap",
+            "dlvFlags": ["--check-go-version=false"],
+            "substitutePath": [
+                {
+                    "from": "${workspaceFolder}", "to": "/home/user/wpt.fyi"
+                }
+            ]
+        }
+    ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,59 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Build",
+            "type": "shell",
+            "command": "make build",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "problemMatcher": [
+                "$go"
+            ]
+        },
+        {
+            "label": "Install WebDriver Deps",
+            "type": "shell",
+            "command": "make chrome && make chromedriver",
+        },
+        {
+            "label": "Webdriver Single Chrome Test",
+            "type": "shell",
+            "command": "go test -v -timeout=15m -tags=large ./webdriver -run ${input:testName} -args -chrome_path=/usr/bin/google-chrome -chromedriver_path=/usr/bin/chromedriver -frame_buffer=false -staging=false -browser=chrome",
+            "group": {
+                "kind": "test",
+                "isDefault": true
+            },
+            "dependsOn": [
+                "Install WebDriver Deps"
+            ],
+            "problemMatcher": [
+                "$go"
+            ]
+        },
+        {
+            "label": "Webdriver Chrome Tests",
+            "type": "shell",
+            "command": "go test -v -timeout=15m -tags=large ./webdriver -args -chrome_path=/usr/bin/google-chrome -chromedriver_path=/usr/bin/chromedriver -frame_buffer=false -staging=false -browser=chrome",
+            "group": {
+                "kind": "test",
+                "isDefault": true
+            },
+            "dependsOn": [
+                "Install WebDriver Deps"
+            ],
+            "problemMatcher": [
+                "$go"
+            ]
+        }
+    ],
+    "inputs": [
+        {
+        "id": "testName",
+        "type": "promptString",
+        "description": "Enter the test function name"
+        }
+    ]
+}
diff --git a/Makefile b/Makefile
@@ -63,7 +63,8 @@ go_build: git mockgen packr2 github_action_go_setup
 go_build_dev:
 	@ # Disable packr to always serve local node modules and dynamic components.
 	@ # There's thus no need to prune node_modules.
-	go build -v -tags skippackr ./webapp/web
+	@ # Disable inlining and optimizations that can interfere with debugging.
+	go build -v -tags skippackr -gcflags=all="-N -l" ./webapp/web
 
 go_lint: golint go_test_tag_lint
 	golint -set_exit_status ./api/...

diff --git a/util/docker-dev/run.sh b/util/docker-dev/run.sh
@@ -60,7 +60,7 @@ docker inspect "${DOCKER_INSTANCE}" | grep '"Running": true' | read
 RUNNING_STATUS="${?}"
 
 function quit() {
-  warn "run.sh: Recieved interrupt. Exiting..."
+  warn "run.sh: Received interrupt. Exiting..."
   stop
   exit 0
 }
@@ -97,6 +97,7 @@ if [[ "${INSPECT_STATUS}" != 0 ]] || [[ "${PR}" == "r" ]]; then
       --cap-add=SYS_ADMIN \
       -p "${WPTD_HOST_WEB_PORT}:8080" \
       -p "${WPTD_HOST_GCD_PORT}:8001" \
+      -p "12345:12345" \
       --workdir "/home/user/wpt.fyi" \
       --name "${DOCKER_INSTANCE}" \
       ${DOCKER_IMAGE}

diff --git a/util/docker-dev/web_server.sh b/util/docker-dev/web_server.sh
@@ -3,13 +3,29 @@
 # Start the Google Cloud web development server in `wptd-dev-instance`
 # (started using ./run.sh).
 
+usage() {
+  USAGE="Usage: web_server.sh [-d]
+    -d : Start a debugging session with Delve"
+  echo "${USAGE}"
+}
+
+while getopts ':dh' flag; do
+  case "${flag}" in
+    d) DEBUG='-d' ;;
+    h|*) usage && exit 0;;
+  esac
+done
+
 DOCKER_DIR=$(dirname $0)
 source "${DOCKER_DIR}/../commands.sh"
 source "${DOCKER_DIR}/../logging.sh"
 
 set -e
 
-wptd_exec make inotifywait
+if [[ ${DEBUG} != "true" ]];
+then
+  wptd_exec make inotifywait
+fi
 info "Building web server..."
 # Build the full go_build target to get node_modules.
 wptd_exec make go_build
@@ -21,4 +37,4 @@ if [ "${DOCKER_STATUS}" != "0" ]; then
 fi
 
 info "Starting web server. Port forwarded to host: ${WPTD_HOST_WEB_PORT}"
-wptd_exec_it "\$(gcloud beta emulators datastore env-init) && util/server-watch.sh"
+wptd_exec_it "\$(gcloud beta emulators datastore env-init) && util/server-watch.sh ${DEBUG}"
diff --git a/util/server-watch.sh b/util/server-watch.sh
@@ -1,9 +1,35 @@
 #!/bin/bash
 set -e
 
+usage() {
+  USAGE="Usage: server-watch.sh [-d]
+    -d : Start a debugging session with Delve"
+  echo "${USAGE}"
+}
+
+while getopts ':dh' flag; do
+  case "${flag}" in
+    d) DEBUG='true' ;;
+    h|*) usage && exit 0;;
+  esac
+done
+UTIL_DIR=$(dirname $0)
+source "${UTIL_DIR}/logging.sh"
+
 make go_build_dev
-./web &
-SERVER_PID=$!
+if [[ ${DEBUG} != "true" ]];
+then
+  ./web &
+  SERVER_PID=$!
+else
+  if [[ $(which dlv) == "" ]]; then \
+    go install github.com/go-delve/delve/cmd/dlv@latest
+  fi
+  info "Starting debugger on port 12345, rebuilding on changes is disabled."
+  dlv debug github.com/web-platform-tests/wpt.fyi/webapp/web --headless --listen=:12345 --output /tmp/web.debug
+  exit 0
+fi
+
 # node_modules is already served live by packr;
 # components is served by nicehttp from disk.
 while inotifywait -q -e modify -r . @.git @results-processor @webapp/node_modules @webapp/components; do

diff --git a/webdriver/README.md b/webdriver/README.md
@@ -119,12 +119,28 @@ Then, in another tab, we need to get the instance id of the container, exec
 'bash' inside of it, and run our test:
 
 ```
-docker container ls
-[ note the CONTAINER ID ]
-docker exec -it $CONTAINER_ID bash
+source util/commands.sh
+wptd_exec_it bash
 user@abce84dd426d:~/wpt.fyi$
 [now you can run 'make go_chrome_test', or 'go test ...' directly, etc]
 ```
 
 Note that this maps the host machine's wpt.fyi checkout into docker, so any
 code edits you make on the host are reflected in the container and vice-versa.
+
+### Debugging in docker
+
+You can use VSCode to debug the web server running in Docker. To do so, first
+start the docker container in one tab:
+```sh
+./util/docker-dev/run.sh
+```
+
+Then, in another tab, start the web server with the `-d` flag:
+```sh
+./util/docker-dev/web_server.sh -d
+```
+
+Afterwards, you can go to VSCode in the Run and Debug tab and click the play button
+next to the Web server launch configuration. You can then set breakpoints, inspect
+variables, pause and resume execution as usual.