Debugging JavaScript code of extensions using VS Code

iPurpl3x

Today I (finally) found a way to make it possible to debug JavaScript code of extensions using VS Code! 🎉

Developers, consider this as a (late) Xmas gift ! 🎁

To do that I had to write a small vscode extension that allows me to get the package name from composer.json. Without that, the .vscode/launch.json configuration file would not be generic and directly compatible with all extensions.

Here is how I have set it up (using Firefox):

`.vscode/launch.json`

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Flarum",
      "type": "firefox",
      "request": "attach",
      "url": "http://localhost:8888",
      "pathMappings": [
        {
          "url": "webpack://${command:glowingblue-composer-package-name.getName}/src/",
          "path": "${workspaceFolder}/js/src/"
        }
      ]
    }
  ]
}

(You most certainly need to use a different URL parameter in your configuration)

Required vscode extensions

Debugging in Firefox

To be able to debug in Firefox, follow the attach instructions of the firefox-devtools.vscode-firefox-debug vscode extension.

I guess it must be possible to set this all up for Chrome as well, but I haven't test it.

Debug `flarum/core`

(and extensions from the `vendor` directory that you haven't opened in a dedicated vscode workspace)

See post below.

davwheat

iPurpl3x

Oh my god... YES...

I am trying this with Chrome right now.

I was also under the impression that the webpack sources use the package.json ID rather than the composer ID...

iPurpl3x

davwheat I was also under the impression that the webpack sources use the package.json ID rather than the composer ID...

Well apparently not. I was surprised as well!

iPurpl3x

I am now trying to make it work for debugging flarum/core while having it running in a docker container. I will post my findings here once I have it working.

iPurpl3x

Debug `flarum/core`

(and extensions from the `vendor` directory that you haven't opened in a dedicated vscode workspace)

For me the only change I needed to do was the path mapping. This supposes that the workspace is the root of the Flarum project with the .vscode/launch.json placed there.

"pathMappings": [
  {
    "url": "webpack://flarum/core/src",
    "path": "${workspaceFolder}/vendor/flarum/core/js/src"
  },
]

Of course if you need to debug anything else from the vendor directory, you can always replace the flarum/core parts in the mapping with the path of the extension you want to debug.
Example:

"pathMappings": [
  {
    "url": "webpack://flarum/mentions/src",
    "path": "${workspaceFolder}/vendor/flarum/mentions/js/src"
  },
]