{
  "title": "Css Cascade Debugger",
  "human_url": "https://happytails.ai/en/developer-tools/css-cascade-debugger/",
  "agent_url": "https://happytails.ai/agents/en/developer-tools/css-cascade-debugger/",
  "language": "en",
  "markdown_url": "https://happytails.ai/en/developer-tools/css-cascade-debugger.md",
  "content": "Css Cascade Debugger\nAnalyze CSS locally with explicit inputs, bounded results and a complete downloadable report.\nHow can we improve this tool?\nReport a problem or share an idea.\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\nHow to use Css Cascade Debugger\nPaste CSS or JSON using the example.\nReview the bounded report and assumptions.\nDownload complete JSON or CSV.\nUseful next steps\nCss Specificity Calculator\nCss Custom Property Resolver\nCss Media Query Simulator\nUse the documented input\nResolve competing declarations for a supplied element and stylesheet",
  "content_format": "text/plain",
  "visibility": "public",
  "links": [
    {
      "name": "Css Specificity Calculator",
      "url": "https://happytails.ai/en/developer-tools/css-specificity-calculator/"
    },
    {
      "name": "Css Custom Property Resolver",
      "url": "https://happytails.ai/en/developer-tools/css-custom-property-resolver/"
    },
    {
      "name": "Css Media Query Simulator",
      "url": "https://happytails.ai/en/developer-tools/css-media-query-simulator/"
    }
  ],
  "tool": {
    "id": "css-cascade-debugger",
    "category": "developer-tools",
    "built": true,
    "requirements": "Process bounded CSS locally. Reports preserve complete input and assumptions.",
    "implementation": {
      "fields": [],
      "presentation": "metrics",
      "inputMaxLength": 200000,
      "inputErrorCode": "CSS_TOOL_INPUT",
      "note": "Resolve matching declarations for an element. Processing stays on your device. Reports are bounded and complete within the stated limits.",
      "example": {
        "input": "{\"css\":\".card { color: red } #app .card { color: blue !important }\",\"element\":{\"tag\":\"div\",\"id\":\"app\",\"classes\":[\"card\"],\"attributes\":{}},\"viewport\":{\"width\":1280,\"height\":800}}",
        "options": {}
      },
      "experience": {
        "automatic": false,
        "single": false,
        "inputMaxLength": 200000,
        "inputMode": "text",
        "label": "CSS",
        "placeholder": "a { color: #3366cc; }",
        "help": "Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.",
        "action": null
      },
      "mode": "explicit",
      "interactive": false
    },
    "execution": "Browser interface",
    "api": null,
    "browser_agent": {
      "supported": true,
      "name": "run_current_tool",
      "discovery": "WebMCP on the human page in a supporting browser",
      "verification": "See audit/API-AUDIT.md; availability is not verification"
    }
  },
  "markdown": "# Css Cascade Debugger\n\n- Human page: https://happytails.ai/en/developer-tools/css-cascade-debugger/\n- Markdown: https://happytails.ai/en/developer-tools/css-cascade-debugger.md\n- Structured JSON: https://happytails.ai/agents/en/developer-tools/css-cascade-debugger/index.json\n- Visibility: public\n\n## Tool capabilities\n\n| Property | Value |\n| --- | --- |\n| Tool ID | `css-cascade-debugger` |\n| Category | developer-tools |\n| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |\n| Browser execution | Use the visible action or interactive controls. |\n| Browser processing | Browser; see tool notes for network behavior. |\n| HTTP API | Not callable through HTTP. |\n| Browser-agent interface | run_current_tool |\n\n### Implementation notes\n\nResolve matching declarations for an element. Processing stays on your device. Reports are bounded and complete within the stated limits.\n\n### Inputs and settings\n\nText input: CSS.\n\nExample or placeholder shown in the interface (not a validated fixture):\n\n```text\na { color: #3366cc; }\n```\n\nPaste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.\n\nNo additional settings are declared for this tool.\n\n### Browser-agent workflow\n\n1. Open the human page in a browser that supports WebMCP.\n2. Discover the interface exposed by that page; use its actual schema.\n3. Select files on the page first when the tool requires files.\n4. Call `run_current_tool` with valid input and settings.\n5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.\n\nCalls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.\n\n### Planning specification\n\nProcess bounded CSS locally. Reports preserve complete input and assumptions.\n\nThis describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.\n\n### Complete machine-readable capability record\n\n```json\n{\n  \"id\": \"css-cascade-debugger\",\n  \"category\": \"developer-tools\",\n  \"built\": true,\n  \"requirements\": \"Process bounded CSS locally. Reports preserve complete input and assumptions.\",\n  \"implementation\": {\n    \"fields\": [],\n    \"presentation\": \"metrics\",\n    \"inputMaxLength\": 200000,\n    \"inputErrorCode\": \"CSS_TOOL_INPUT\",\n    \"note\": \"Resolve matching declarations for an element. Processing stays on your device. Reports are bounded and complete within the stated limits.\",\n    \"example\": {\n      \"input\": \"{\\\"css\\\":\\\".card { color: red } #app .card { color: blue !important }\\\",\\\"element\\\":{\\\"tag\\\":\\\"div\\\",\\\"id\\\":\\\"app\\\",\\\"classes\\\":[\\\"card\\\"],\\\"attributes\\\":{}},\\\"viewport\\\":{\\\"width\\\":1280,\\\"height\\\":800}}\",\n      \"options\": {}\n    },\n    \"experience\": {\n      \"automatic\": false,\n      \"single\": false,\n      \"inputMaxLength\": 200000,\n      \"inputMode\": \"text\",\n      \"label\": \"CSS\",\n      \"placeholder\": \"a { color: #3366cc; }\",\n      \"help\": \"Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.\",\n      \"action\": null\n    },\n    \"mode\": \"explicit\",\n    \"interactive\": false\n  },\n  \"execution\": \"Browser interface\",\n  \"api\": null,\n  \"browser_agent\": {\n    \"supported\": true,\n    \"name\": \"run_current_tool\",\n    \"discovery\": \"WebMCP on the human page in a supporting browser\",\n    \"verification\": \"See audit/API-AUDIT.md; availability is not verification\"\n  }\n}\n```\n\n## Page guide\n\nAnalyze CSS locally with explicit inputs, bounded results and a complete downloadable report.\n\nHow can we improve this tool?\n\nReport a problem or share an idea.\n\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\n\n### How to use Css Cascade Debugger\n\n1. Paste CSS or JSON using the example.\n2. Review the bounded report and assumptions.\n3. Download complete JSON or CSV.\n\n## Useful next steps\n\n- [Css Specificity Calculator](https://happytails.ai/en/developer-tools/css-specificity-calculator/) ([Markdown](https://happytails.ai/en/developer-tools/css-specificity-calculator.md))\n\n- [Css Custom Property Resolver](https://happytails.ai/en/developer-tools/css-custom-property-resolver/) ([Markdown](https://happytails.ai/en/developer-tools/css-custom-property-resolver.md))\n\n- [Css Media Query Simulator](https://happytails.ai/en/developer-tools/css-media-query-simulator/) ([Markdown](https://happytails.ai/en/developer-tools/css-media-query-simulator.md))\n\n## Use the documented input\n\nResolve competing declarations for a supplied element and stylesheet\n"
}