VScode debug EJS files of HEXO theme?

[lorezyra]

How does one debug a Hexo theme in VScode?

At the moment, I'm doing this "old school" with a bunch of console.info() statements that output variable names and values. This is not a long term solution as I will need to manually remove all these lines of code from the final product.

Supposedly, there is a way to do this in VScode by adding an "attach to node" process in the debugger via the .vscode/launch.json file. I've tried to do this with the following config, but all my breakpoints show "unbound" status. Any advice is appreciated.

        {
            "type": "node",
            "name": "Hexo Theme inspector",
            "request": "attach",
            "program": "${workspaceFolder}/node_modules/hexo-cli/bin/hexo",
            "args": [
                "server",
                "-p 4001",
                "--debug"
            ],
            "runtimeExecutable": "node",
            "runtimeArgs": [
                "--inspect=4001"
            ],
            "processId": "${command:PickProcess}",
            "protocol": "inspector",
            "address": "127.0.0.1",
            "port": 4001,
            "restart": true,
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ],
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "${workspaceFolder}",
            "cwd": "${workspaceFolder}",
            "console": "internalConsole"
        },

After running hexo clean && node --inspect-brk=4001 ./node_modules/hexo-cli/bin/hexo server -p 4001 and starting the debugger, I see "Debugger listening on ..." and "Debugger attached."

VScode will stop the code and step through the nodeJS files within the node_modules folder, but still doesn't stop on breakpoints set within the EJS template files. What am I missing?

Reference

• https://blog.richiebartlett.com/Work_%E4%BB%95%E4%BA%8B/Programming_%E9%96%8B%E7%99%BA/Debugging-HEXO-in-VScode/

Related

• Best practice to troubleshoot Heap usage #5157

[lorezyra]

As I currently understand the HEXO architecture, it's simply not possible to use breakpoints within an EJS template file.

As a best practice, one should restrict the template files to only the visual elements needed to construct the webpage. All logic more complex than a simple variable call (<%= myVar %>) or simple function call (<%- myFunc() %>) should be moved to a Hexo helper ƒunction in your theme's script/helpers/ folder.

Complex code that doesn't build the visual HTML elements should be a helper. Such helpers can be debugged in VScode with breakpoints as it is processed through an eval() function by HEXO. Once the JS file is loaded, VScode will bound the breakpoint and enable you to step-through the code. For VScode to ensure the breakpoint is bounded, you need to configure your launch.json file to include the symbol linking.

            "runtimeArgs": [
                "--inspect-brk=4001",
                "--experimental-modules",
                "--preserve-symlinks"
            ],