alexei.dolgolyov/wled-screen-controller-mixed

Files

alexei.dolgolyov 49c2a63d68 Bundle frontend with esbuild, serve fonts offline, fix dashboard

- Add esbuild bundling: JS (IIFE, minified, sourcemapped) and CSS into
  single dist/ files, replacing 15+ individual CSS links and CDN scripts
- Bundle Chart.js and ELK.js from npm instead of CDN (fully offline)
- Serve DM Sans and Orbitron fonts locally from static/fonts/
- Fix dashboard automation card stretching full width (max-width: 500px)
- Fix time_of_day condition not localized in automation cards
- Add Chrome browser tools context file for MCP testing workflow
- Update frontend context with bundling docs and Chrome tools reference

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-14 22:20:20 +03:00

1.8 KiB

Raw Blame History

Chrome Browser Tools (MCP)

Read this file when using Chrome browser tools (mcp__claude-in-chrome__*) for testing or debugging the frontend.

Tool Loading

All Chrome MCP tools are deferred — they must be loaded with ToolSearch before first use:

ToolSearch query="select:mcp__claude-in-chrome__<tool_name>"

Commonly used tools:

tabs_context_mcp — get available tabs (call first in every session)
navigate — go to a URL
computer — screenshots, clicks, keyboard, scrolling, zoom
read_page — accessibility tree of page elements
find — find elements by text/selector
javascript_tool — run JS in the page console
form_input — fill form fields

Browser Tricks

Hard Reload (bypass cache)

After rebuilding the frontend bundle (npm run build), do a hard reload to bypass browser cache:

computer action="key" text="ctrl+shift+r"

This is equivalent to Ctrl+Shift+R and forces the browser to re-fetch all resources, ignoring cached versions.

Zoom into UI regions

Use the zoom action to inspect small UI elements (icons, badges, text):

computer action="zoom" region=[x0, y0, x1, y1]

Coordinates define a rectangle from top-left to bottom-right in viewport pixels.

Scroll to element

Use scroll_to with a ref from read_page to bring an element into view:

computer action="scroll_to" ref="ref_123"

Console messages

Use read_console_messages to check for JS errors after page load or interactions.

Network requests

Use read_network_requests to inspect API calls, check response codes, and debug loading issues.

Typical Verification Workflow

Rebuild bundle: npm run build (from server/ directory)
Hard reload: ctrl+shift+r
Take screenshot to verify visual changes
Zoom into specific regions if needed
Check console for errors

1.8 KiB Raw Blame History