openwebf-app-debugging-devtools

Description

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.

Install

Add the repository(one-time)

/plugin marketplace add archview-ai/webf-plugin

Install the plugin

/plugin install webf@openwebf

Tool Access

This skill is limited to using the following tools:

ReadGrepGlobBashEditWritemcp__openwebf__docs_searchmcp__openwebf__docs_get_sectionmcp__openwebf__docs_related

Supporting Assets

View in Repository

doc-queries.md

examples.md

reference.md

Skill Content

OpenWebF App: Debugging with DevTools

Instructions

Reproduce and capture signals first: console output, network tab, and any error stack.
Use DevTools for:
- DOM/console debugging
- network request inspection
- performance profiling
Apply minimal fixes; prefer targeted logging and small repro steps.
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.

Links

GitHub Stats

0 forks

Similar Skills

Command Development

10 files

This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.

plugin-dev

47.1k

Agent Development

6 files

This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.

plugin-dev

47.1k

Hook Development

10 files

This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.

plugin-dev

47.1k