---
name: hashgraph-online-chrome-devtools
description: "Use Chrome DevTools MCP to inspect live pages, reproduce browser issues, automate user flows, inspect console and network activity, and verify frontend fixes in a real Chrome session. Trigger when the user mentions browser bugs, client-side errors, broken forms, flaky UI behavior, or asks to interact with a site directly."
license: "Apache-2.0"
metadata:
  decimalai-skill-id: "ebfffa8e-6c25-493d-bda7-ad8f28caa02c"
  decimalai-version-id: "b877ecab-1c40-4bdd-bbb3-603a0aec32c8"
  decimalai-version: "1"
  decimalai-body-sha256: "abe46fbf14a5d75bff1f59b481f61383654436e0f1c63fb0fad7d2e61f6f4a56"
  decimalai-name: "hashgraph-online/chrome-devtools"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "testing"
  decimalai-source: "https://app.decimal.ai/s/hashgraph-online-chrome-devtools@1/SKILL.md"
---
Use this skill when source inspection alone is not enough and Codex should operate a live browser.

## Default Flow

1. Open or reuse a page with `new_page` or `navigate_page`.
2. Wait for the relevant UI if needed with `wait_for`.
3. Capture structure with `take_snapshot`.
4. Interact using `uid` values from the snapshot.
5. Inspect the relevant evidence surface:
   - `list_console_messages` or `get_console_message` for runtime errors
   - `list_network_requests` or `get_network_request` for API and asset failures
   - `take_screenshot` when visible state matters
   - `evaluate_script` for targeted DOM or app-state checks
6. Re-run the smallest verification path after each code change.

## Working Rules

- Prefer `take_snapshot` over screenshots for navigation and form work.
- Take a fresh snapshot after navigation or DOM-changing actions.
- Keep console and network queries filtered or paginated to reduce noise.
- Save large artifacts to disk with `filePath` when the tool supports it.
- If you need an already-running browser session, point the MCP server at it with `--browser-url=...` instead of launching a fresh instance.

## Common Patterns

- Reproduce a bug: navigate, wait, snapshot, interact, inspect console and network.
- Verify a fix: repeat the exact user path and compare visible state plus console and request results.
- Gather evidence: capture a screenshot, the failing request, and the matching console message.

## When Not to Use It

- If the question is purely about static source code and no live browser state matters.
- If the MCP server is running in a restricted mode that does not expose the tools you need.