Debug a transpiled ActionScript project in Visual Studio Code with Google Chrome

1. Create a new ActionScript project targeting Apache Royale or HTML and JavaScript without a framework.

2. In your project's asconfig.json, specify the source-map compiler option.

   "compilerOptions": {
   	"source-map": true,
   }

   This will allow you to debug using the original ActionScript code.

3. Install the Debugger for Chrome extension for Visual Studio Code.

4. Create a directory named .vscode, if it doesn't already exist.

5. In the .vscode directory, create a file named launch.json.

   • To load from a web server, add the following content to launch.json:

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

     Customize the url field to point to the correct URL for your web server.

   • To load a local HTML file, add the following content to launch.json:

      {
      	"version": "0.2.0",
      	"configurations": [
      		{
      			"name": "Launch Chrome, debug build with sourcemaps",
      			"type": "chrome",
      			"request": "launch",
      			"file": "${workspaceRoot}/bin/js-debug/index.html",
      			"sourceMaps": true
      		}
      	]
      }

6. Run the build task with Ctrl+Shift+B (or Command+Shift+B on macOS).

7. Open Visual Studio Code's Debug pane, and press the button with the play ▶️ icon to start debugging. Alternatively, use the F5 keyboard shortcut to start debugging.

Build automatically before debugging

Instead of building manually with Ctrl+Shift+B, you can configure launch.json to build your project automatically when you ask it to start debugging.

If you set the preLaunchTask field in launch.json to the name of one of the built-in tasks provided by the ActionScript & MXML extension, it will automatically run that task before debugging.

You can find the complete list of tasks that are available in your workspace when you go to the Terminal menu and choose Run Task....

For simple projects, the preLaunchTask field in launch.json should be set to ActionScript: compile debug - asconfig.json:

"preLaunchTask": {
	"type": "ActionScript",
	"command": "compile debug - asconfig.json"
}

If your workspace contains multiple root folders, you may need include the name of the root folder before asconfig.json in the task name:

"preLaunchTask": {
	"type": "ActionScript",
	"command": "compile debug - MyProject/asconfig.json"
}

Warning: If you're compiling debug builds using the Quick Compile & Debug command, DO NOT use preLaunchTask. It will cause your project to build twice before starting the debugger, which won't be very "quick" at all! 😄

Further Reading

• Debugging in Visual Studio Code (visualstudio.com)
• Debugger for Chrome extension (visualstudio.com)