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
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:
npm install --save-dev web-component-tester wct-none
Step 2: Create
Create or modify
.vscode/launch.json in your project:
"name": "Run wct",
"name": "Run chrome for wct",
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
Step 3: Allow breakpoints in Polymer code
debug.allowBreakpointsEverywhere setting in the user or workspace preferences.
Step 4: Launch WCT and a connected browser
- Launch the Run wct configuration to start the server
This will log an error about not being able to connect to 127.0.0.1:4444, which can be ignored. PR’s welcome :)
- Launch the Run chrome for wct configuration to start the browser
Et voila, you are ready to set breakpoints and start debugging.
Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.