Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Debugging a Flex Plugin with VS Code

This is a guide on how to set up a Chrome Debugger with VS Code to easily debug your Flex Plugin locally. This tutorial builds off of the Plugin from the Plugin Development Quickstart.

When debugging your Plugin, it is useful to set breakpoints in your application and to walk through it step-by-step. Luckily, VS Code already comes with such a debugger built-in.

This tutorial requires that you have an existing Flex Plugin. It also requires that you already have VS Code installed on your operating system.

Let's get started!

Downloading the Debugger for Chrome Plugin

Open your plugin directory in VS Code. We'll first need to install the extension.

Go to the Extensions section of VS Code and search for Debugger Chrome. Select the extension, and press Install. Restart the editor if you are prompted to do so.

ChromeDebuggerVSCode

Create launch.json

Now switch to the Debugger panel. There are currently no launch.json files. Click on the gear icon on top of the page, and select Chrome. This would automatically create a launch.json inside .vscode folder and open the file for you.

VsCodeLaunch.json

Now replace the content of launch.json with:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/": "${webRoot}/"
      }
    }
  ]
}
Let's run the Debugger now!

Start Debugging

Now that we have the Debugger set up, it's time to run our dev-server and launch the debugger.

First, start your Flex plugin using npm start. You may close the browser that this script starts because we'll launch another one shortly.

Next, go to the Debugger panel of your VS Code again. This time, in the dropdown menu, you should see a Chrome option. Make sure it is selected, and press the green play button:

VSDebuggerRun

This will launch a new chrome page and start your application. You can now log into your Flex instance.

Setting Breakpoints

While running in debug mode, if you switch back to VS Code, you will see a debugger toolbox in the top center of the editor.

debuggerToolbox

Open the page where you'd like to set a breakpoint. Place your cursor to the left of the line number; a little red dot should appear. Click to place the breakpoint. Now click the green "refresh" button to restart the app:

breakpoint

That's it! You should now have a breakpoint at this step of your application. You can now see the variables and the call stack, step into the methods, etc.

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.