openwebf-app-debugging-devtools

archview-ai's avatarfrom archview-ai

Debug WebF app runtime issues with Chrome DevTools (console/network/elements) and JS-side troubleshooting. Use when the user mentions DevTools console, network tab, stack traces, blank screen, layout measurement issues, or failing network requests.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 20, 2025
[Debugging]

When & Why to Use This Skill

This Claude skill provides expert-level assistance for diagnosing and resolving OpenWebF application runtime issues using Chrome DevTools. It streamlines the debugging process by analyzing console logs, inspecting network traffic, and troubleshooting JavaScript-side errors to ensure high-performance web rendering within Flutter environments.

Use Cases

  • Case 1: Troubleshooting blank screens or layout measurement issues by inspecting the WebF DOM and element styles.
  • Case 2: Diagnosing failed API calls and network latency issues using the DevTools network tab for request/response inspection.
  • Case 3: Resolving complex JavaScript runtime exceptions and stack traces through targeted logging and console output analysis.
  • Case 4: Performance profiling to identify and fix execution bottlenecks in OpenWebF-based mobile applications.
nameopenwebf-app-debugging-devtools
descriptionDebug WebF app runtime issues with Chrome DevTools (console/network/elements) and JS-side troubleshooting. Use when the user mentions DevTools console, network tab, stack traces, blank screen, layout measurement issues, or failing network requests.
allowed-toolsRead, Grep, Glob, Bash, Edit, Write, mcp__openwebf__docs_search, mcp__openwebf__docs_get_section, mcp__openwebf__docs_related

OpenWebF App: Debugging with DevTools

Instructions

  1. Reproduce and capture signals first: console output, network tab, and any error stack.
  2. Use DevTools for:
    • DOM/console debugging
    • network request inspection
    • performance profiling
  3. Apply minimal fixes; prefer targeted logging and small repro steps.
  4. Use MCP docs to confirm known issues and recommended debugging practices.

If the user’s question is specifically about WebF Go connection/log collection (e.g. devtools:// or WEBF_NATIVE_LOG), prefer openwebf-app-webf-go.

If the user’s issue is dev server reachability / LAN IP / HMR websocket problems, prefer openwebf-app-devserver-network.

More: