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 add breakpoints and perform other debugging tasks using the original .as or .mxml files instead of the generated .js files.

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

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

   • To load your application from a web server (which you must start separately), add the following content to launch.json:

      {
      	"version": "0.2.0",
      	"configurations": [
      		{
      			"name": "Launch Chrome (localhost)",
      			"type": "chrome",
      			"request": "launch",
      			"url": "http://localhost:8080/index.html",
      			"webRoot": "${workspaceRoot}/bin/js-debug"
      		}
      	]
      }

     Customize the url field to point to the correct URL for your web server. Customize the webRoot field to the output folder that contains your app's index.html.

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

      {
      	"version": "0.2.0",
      	"configurations": [
      		{
      			"name": "Launch Chrome (index.html)",
      			"type": "chrome",
      			"request": "launch",
      			"url": "file:///${workspaceRoot}/bin/js-debug/index.html",
      			"webRoot": "${workspaceRoot}/bin/js-debug"
      		}
      	]
      }

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

6. Open Visual Studio Code's Run menu, and select 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 start debugging in Visual Studio Code. By setting the preLaunchTask field in launch.json to the name of one of your workspace's tasks, it will automatically run that task before the debugger is launched.

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! 😄

If you have a default build task configured, the preLaunchTask field in launch.json should contain the ${defaultBuildTask} token:

"preLaunchTask": "${defaultBuildTask}"

If you prefer, you can use the exact name of any of the built-in tasks provided by the ActionScript & MXML extension:

"preLaunchTask": "ActionScript: compile debug - asconfig.json"

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....

Further Reading

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