Skip to content

Development tips

beets edited this page Aug 21, 2020 · 4 revisions

In Chrome DevTools: Enable source maps

  1. Click on the cogwheel (Settings):
  2. Select: Enable JavaScript source maps
  3. Select: Enable CSS source maps

To find source code:

  1. Click on the Sources tab
  2. Expand webpack:// > . > js
  3. You should be able to see all the JS source files

To debug JS from VSCode:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "PLACES: Launch Chrome against localhost",
            "url": "http://localhost:8080/place?dcid=geoId/06",
            "webRoot": "${workspaceFolder}/dist",
            "sourceMaps": true,

            "sourceMapPathOverrides": {
                "webpack:///./*": "${workspaceRoot}/static/*"
            }
        }
    ]
}

Note: You might have to disable the new JS Debugger to get this to work (disable Debug > Javascript: Use Preview) image