Hybrid Fullstack Debugging

Role: Provides a four-layer analysis model and a domain knowledge base for debugging hybrid applications (native shell + embedded web). It is a methodology + knowledge enhancement, not a standalone end-to-end workflow — referenced by PDCA hosts via frontmatter dependencies (invoked after a prerequisite check), and it delegates runtime inspection to browser-debug-toolkit.

Domain knowledge (technical pitfalls, native↔H5 contract templates, anchored case) is in reference.md.

Why this skill exists

Hybrid apps have a layer-gap blindness problem. Pure frontend engineers tend to hunt causes only in the H5 layer (CSS/JS); pure native engineers tend to hunt only in native code. The platform runtime layer (WebView's prefers-color-scheme, WKWebView gesture handling, Electron IPC) is a grey zone neither side knows well.

The result: problems get "fixed" repeatedly without resolving, or fixing one element leaks the same hidden bug across sibling elements, or a surface patch introduces new cross-platform inconsistency. The meta-lesson this skill exists to enforce:

For hybrid apps, you must analyze across native / web / platform-runtime — the full chain — to find the root fix. Single-layer analysis produces whack-a-mole patches.

When to use

Strong signals (any one is enough):