Debugging an Enact App with VS Code

VS Code is a very popular code editor for web developers and debugging support is one of its key features. If you are an Enact app developer and use VS Code, you can debug your Enact app within VS Code. I’m going to show you how to set up VS Code to debug your Enact App.

Installation

If you are not familiar with Enact, I recommend you read the Enact Tutorial: http://enactjs.com/docs/tutorials/setup/

First, you need to install the Enact CLI Tools to create an Enact app:

npm install -g @enact/cli

Starting a new Enact app

Just like with create-react-app, use the CLI to generate a starter Enact app:

enact create helloenact

This will generate a basic app based on the Moonstone project template, complete with Enact libraries, React, and a fully configured package.json. You can cd into the newly created helloenact directory and open up VS Code (vscode . will open a new editor instance in the current directory if you have enabled the shell integration).

npm run serve

This will package and host the helloenact app on localhost:8080by default.

Tip: You can run this command within VS Code using the built-in terminal.

The helloenact app running on localhost:8080

You can see more project settings and available npm tasks at http://enactjs.com/docs/developer-tools/cli/starting-a-new-app/.

Debugger for Chrome extension

Next, you need to make sure you have installed the Debugger for Chrome extension. If you don’t have it installed, follow the link above or search for it in the extensions panel.

Configuring launch.json

The next step is to configure launch.json, a settings file required by the debugger. Go to the debug panel and select the gear icon to open launch.json for editing:

Copy and paste this snippet into your launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

If you change your build environment, you may need to set up webRoot and sourceMapPathOverrides. You can refer to the detailed configuration information at https://github.com/microsoft/vscode-chrome-debug/blob/master/README.md .

Adding a Breakpoint

To test breakpoints, modify the MainPanel.js file from the helloenact app. Add an onClick handler to the Button component by adding lines 9–13 below, then modify lines 15 and 18 to use the handler you just added. Add a breakpoint at line 11 by pressing F9, just like in Visual Studio, or by clicking the left of the line number.

1

Launch the Chrome Debugger

You are ready to debug your Enact App now. Make sure your app is running. Press F5 or click the green arrow in the debug panel. This will open up a new browser instance.

Press the CLICK MEbutton in your helloenact app, then you can see VS Code debugger connected!

Conclusion

Using the built-in debugger can save switching between windows. Edit and debug in the same place!

If you run into problems or have questions about Enact, you can report issues on GitHub or find the Enact team on Gitter. We’d love to hear from you.

References

• Enact Framework: http://enactjs.com/
• Visual Studio Code Debugging: https://code.visualstudio.com/docs/editor/debugging
• VS Code — Debugger for Chrome: https://github.com/microsoft/vscode-chrome-debug/blob/master/README.md