Browser DevTools and the JavaScript Console

A genuine JavaScript error in a component almost always shows up in the Console panel first, complete with a stack trace pointing to the offending line. console.log()/console.error() statements placed deliberately in component code are a quick way to inspect a value's actual state during development — simple, but often the fastest first step when something behaves unexpectedly.

The Elements panel shows a component's actual rendered markup — including its Shadow DOM boundary (Module 1), visible as a #shadow-root marker in the tree. This is how to verify what a component genuinely rendered, versus what the template should have produced — a real discrepancy here often points straight at the bug.

Setting a breakpoint directly on a line of component JavaScript in the Sources panel pauses execution there, letting variable values be inspected live at that exact moment — often considerably faster than sprinkling console.log statements throughout the code and re-running repeatedly to narrow down a problem.

Module 13 covered the Performance panel in depth as the specialized tool for profiling slow components — worth remembering as part of the same DevTools toolkit, reached for specifically when the problem is speed rather than correctness.