Vivaldi/Chrome/Edge - Remote debugging in VS Code with SPO/SPFx examples

readme.md

Vivaldi/Chrome/Edge - Remote debugging in VS Code with SPO/SPFx examples

Change url for whataver you want if using different then default. This is the url it will open automaticly

Notes for attach

• Create a new shortcut for Vivaldi and in the target add this flags: --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
• Use this shortcut to open the browser and use it
• url property makes it only listen to the tab using this url, default is to listen in all tabs.

Update

Added multiple configurations for edge, chrome and Vivaldi.

SPO configurations are for SPFx apps. Don't forget to replace the url placeholders. If using a different port, don't forget to change the debug querystring accordingly. If using react-router you can have the router as a #/path/sub-path/... , using HashRouter component. BrowserRouter does not work with SPO. Eg. ?debug=true&noredir=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js#/process/expenses

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome/Vivaldi",
            "port": 9222,
            "request": "attach",
            "type": "chrome",
            "url": "http://localhost:8080"
        },
        {
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "${env:LocalAppData}/Vivaldi/Application/vivaldi.exe",
            "name": "Launch Vivaldi",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
        },
          {
          "name": "SPO Hosted workbench - Edge",
          "type": "msedge",
          "request": "launch",
          "url": "{SPO-SITECOLLECTION-URL}/_layouts/workbench.aspx",
          "webRoot": "${workspaceRoot}",
          "sourceMaps": true,
          "sourceMapPathOverrides": {
            "webpack:///.././src/*": "${webRoot}/src/*",
            "webpack:///../../../src/*": "${webRoot}/src/*",
            "webpack:///../../../../src/*": "${webRoot}/src/*",
            "webpack:///../../../../../src/*": "${webRoot}/src/*"
          },
          "runtimeArgs": [
            "--remote-debugging-port=9222",
            "-incognito"
          ]
        },
        {
          "name": "SPO Site - Chrome",
          "type": "chrome",
          "request": "launch",
          "url": "{SPO-PAGE-URL}?debug=true&noredir=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js",
          "webRoot": "${workspaceRoot}",
          "sourceMaps": true,
          "sourceMapPathOverrides": {
            "webpack:///.././src/*": "${webRoot}/src/*",
            "webpack:///../../../src/*": "${webRoot}/src/*",
            "webpack:///../../../../src/*": "${webRoot}/src/*",
            "webpack:///../../../../../src/*": "${webRoot}/src/*"
          },
          "runtimeArgs": [
            "--remote-debugging-port=9222",
            // "-incognito"
          ]
        },
        {
          "name": "SPO Site - Vivaldi",
          "type": "chrome",
          "request": "launch",
          "url": "{SPO-PAGE-URL}?debug=true&noredir=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js",
          "webRoot": "${workspaceRoot}",
          "runtimeExecutable": "${env:LocalAppData}/Vivaldi/Application/vivaldi.exe",
          "sourceMaps": true,
          "sourceMapPathOverrides": {
            "webpack:///.././src/*": "${webRoot}/src/*",
            "webpack:///../../../src/*": "${webRoot}/src/*",
            "webpack:///../../../../src/*": "${webRoot}/src/*",
            "webpack:///../../../../../src/*": "${webRoot}/src/*"
          },
          "runtimeArgs": [
            "--remote-debugging-port=9222",
            // "-incognito"
          ]
        }
    ]
}