Debugging web components built with O

One salient feature that makes web components particularly attractive, is that the build-in browser dev tools already go a long way toward helping with debugging.

For starters, right clicking on an element, selecting inspect, which shows the contextual DOM tree, and referencing the element via $0, is indispensible. Firefox is particularly good at this.

Chrome has an obscure development tab, "Properties" that can help with discovering things that are attached to the element in question.

Because O-based web components don't encourage the traditional flow of being able to flow from one function to all it's dependencies, you are advised to become familiar with Chrome's code coverage tab. It shows quite clearly what parts of the code got hit, which can help to quickly get an overview picture of where the code is getting stuck.

1. Using the dev tool's code coverage feature.
2. Inspecting the roundabout queue / checks.
3. Web component dev tools

<= Signals vs Roundabouts => Debugging