Skip to content

Debug a SWF embedded in HTML with Visual Studio Code

Jump to bottom
Josh Tynjala edited this page Sep 19, 2024 · 42 revisions

🚨 Attention: Web browsers no longer support the Adobe Flash Player plugin, and Adobe has discontinued development of Flash Player. For more details, see Adobe Flash Player End Of Life. The document below is kept for educational purposes.

Prerequisites

Additionally, before debugging a SWF file embedded in HTML, you will need to install a special version of the Adobe Flash Player plugin that supports debugging. Adobe no longer makes installers for the plugin available for download.

Please refer to the Adobe Flash Player content debugger compatibility table, if you are unsure which download is appropriate for your operating system and web browser.

Debugging Instructions

  1. Create a new ActionScript project targeting Adobe Flash Player.

  2. In Visual Studio Code, open the Run menu and select Add Configuration….

  3. When prompted to Select Environment, choose SWF.

    If .vscode/launch.json already exists in your workspace, you will be given a list of snippets to choose from instead. Select either SWF: Launch Standalone SWF or SWF: Launch SWF embedded in HTML.

  4. A new editor will open with a launch.json file that looks something like this:

    {
	// Use IntelliSense to learn about possible SWF debug attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"type": "swf",
			"request": "launch",
			"name": "Launch SWF"
		}
	]
}

    By default, the debugger will attempt to launch the SWF file generated by the compiler. However, we need to launch an HTML file in a web browser instead. Add the program field to the launch configuration, like this:

    {
	"type": "swf",
	"request": "launch",
	"name": "Launch SWF",
	"program": "bin/index.html"
}

  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:

{
	"type": "swf",
	"request": "launch",
	"name": "Launch SWF",
	"preLaunchTask": "${defaultBuildTask}"
}

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

{
	"type": "swf",
	"request": "launch",
	"name": "Launch SWF",
	"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....

Launch in a specific web browser

If possible, a web browser will open automatically when you debug a SWF embedded in HTML. On Windows and macOS, the debugger will open your default web browser if the Adobe Flash Player plugin is installed. On Linux, the debugger will attempt to open Firefox.

If your default web browser cannot be opened automatically — or if you prefer to test SWF content in a different web browser — you may add the runtimeExecutable field in launch.json to customize which application is launched.

On Windows, set runtimeExecutable to the absolute path of the browser's .exe file:

{
	"type": "swf",
	"request": "launch",
	"name": "Launch SWF",
	"program": "bin/index.html",
	"runtimeExecutable": "c:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe"
}

On macOS, set runtimeExecutable to the absolute path of the browser's .app file:

"runtimeExecutable": "/Applications/Firefox.app"

On Linux, set runtimeExecutable to the absolute path of the browser's executable file:

"runtimeExecutable": "/usr/bin/firefox"

Further Reading

Getting Started

Project Types

Debugging

Reference

Clone this wiki locally