Skip to content

Debug a transpiled ActionScript project in Visual Studio Code with Mozilla Firefox

Josh Tynjala edited this page Jul 19, 2017 · 38 revisions
  1. Create a new ActionScript project targeting HTML and JavaScript (no framework) or the Apache FlexJS 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. Create tasks.json to compile your project.

  4. Install the Debugger for Firefox extension for Visual Studio Code.

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

  6. 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 Firefox against localhost, with sourcemaps",
       			"type": "firefox",
       			"request": "launch",
       			"url": "http://localhost:8080",
       			"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 Firefox against debug.html, with sourcemaps",
       			"type": "firefox",
       			"request": "launch",
       			"file": "${workspaceRoot}/bin/js-debug/index.html"
       		}
       	]
       }
  7. Build the project by pressing Ctrl+Shift+B (or Command+Shift+B on macOS).

  8. 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 before starting the debugger. If you set the "preLaunchTask" field in launch.json to the same value as the "command" field from tasks.json, it will automatically run that task before debugging.

In the following example, tasks.json runs asconfigc, so that's what we set as the "preLaunchTask":

"preLaunchTask": "asconfigc"

Note: If the "command" field in tasks.json contains an absolute path to an executable, you must include the full path.

"preLaunchTask": "/path/to/asconfigc"

Further Reading

Clone this wiki locally