Debug Polymer tests with VS Code

Learn how to easily debug Polymer test from Visual Studio Code with an open-source Web Component Tester plugin

Debugging a Polymer test

Web Component Tester is an amazing tool to set up a testing environment for Polymer elements. The only annoyance is that WCT opens a specific browser in which you have to do the further debugging. And why debug at all in a browser? Wouldn’t it be cool if you could just use VS Code to debug your tests?

Yeah, we thought so too :)

We therefore developed and open sourced the wct-none plugin which starts the WCT webserver without any browser. Instead the user can start whatever testing/debugging environment they want manually… like VS Code.

Here is what you have to do to make this work with VS Code:

Step 1: Install WCT and the plugin

npm install --save-dev web-component-tester wct-none -g

If you have already an npm project, it‘s’ safe to save the plugin as development dependency in package.json, it will do nothing unless explicitly activated:

cd your-project/
npm install --save-dev web-component-tester wct-none

Step 2: Create launch configuration

Create or modify .vscode/launch.json in your project:

"version": "0.2.0",
"configurations": [
"type": "node",
"request": "launch",
"name": "Run wct",
"program": "wct",
"args": [
"--skip-plugin", "local",
"--plugin", "none",
"--webserver-port", "2000",
"--simpleOutput", "path/to/tests"
"type": "chrome",
"request": "launch",
"name": "Run chrome for wct",
"url": "http://localhost:2000/components/COMPONENT_NAME/generated-index.html",
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.vscode/chrome"

Note that you must replace COMPONENT_NAME in the URL for Chrome, and path/to/tests with the path to the root of the test suite.

If you installed WCT and the plugin into your existing npm project: you need to change the field program to ${workspaceRoot}/node_modules/.bin/wct.

Step 3: Allow breakpoints in Polymer code

By default, VS Code doesn’t allow setting breakpoints in the JavaScript part of Polymer element files. Hence, you need to tell VS Code to be less smart and allow breakpoints everywhere. To do so, simply enable the debug.allowBreakpointsEverywhere setting in the user or workspace preferences.

Step 4: Launch WCT and a connected browser

  1. Launch the Run wct configuration to start the server
    This will log an error about not being able to connect to, which can be ignored. PR’s welcome :)
  2. Launch the Run chrome for wct configuration to start the browser

Et voila, you are ready to set breakpoints and start debugging.

Happy coding!

Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.