Frokit - Frontend Toolkit

Frontend dev tools: multi-viewport viewer, CSS inspector, DOM explorer, color palette and breakpoint indicator.

Frokit - Frontend Toolkit A faster way to work on frontend. Multi-viewport preview, DOM exploration, CSS inspection and color work — all in one tool. ■ Multi-viewport viewer - Preview the current page side by side at Mobile / Fold closed & open / Tablet / Laptop / Desktop widths - Foldable presets match the cover and main display viewports of the Galaxy Z Fold, so you can check foldable layouts at a glance - Auto-fit zoom keeps every frame on one screen without horizontal scrolling - Toggle devices, change zoom, and reload every frame at once - Turn portrait and landscape on separately per device, so one tablet can appear in both orientations side by side - Add your own screen sizes; they are kept for the next time you open the viewer ■ CSS inspector - Hover an element to see its colors, font, weight and spacing instantly - Inspect elements inside iframes as well, including frames loaded from other domains - Flex and grid gap is shown as Tailwind classes alongside margin and padding - Click any row to copy the value: RGB, HEX, or Tailwind classes (text-gray-500, p-4, rounded-lg) - A box model diagram shows margin / border / padding / content on all four sides, just like DevTools - The on-page overlay uses the same colors, so the spacing structure is obvious at a glance - ID, class and selector are listed separately and each can be copied with one click - Hover preview stays active after you pin an element, so a single click moves you to the next one — no ESC needed - Summary-only mode: turn the detail panel off and just the summary tooltip shows while page buttons and links keep working (press F to switch instantly) - Matching colors for the selected element: the same Tailwind family scale plus complementary, analogous and triadic colors ■ Color palette - Pick any color on screen with the eyedropper and see the closest Tailwind token together with matching colors - Recently picked colors are kept in history and stay available the next time you open the popup - Page colors: collect the colors actually used on the page (text, background, border), ranked by usage, in a separate window — click a row to copy ■ DOM explorer - Inspect the element structure in a DevTools-style HTML tree - The tree shows the whole document and expands only the path to the selected element, so you can look around without changing the selection - Duplicate an element to see how a list looks with several items, or remove one temporarily - Double-click text and attribute values to edit them and experiment directly on the page - Rename attributes by double-clicking the name, clear the name to remove it, or add new ones with the + button - Move between parent, child and sibling elements with arrow keys; save elements you revisit and jump back with one click - Dock the panel left, right or bottom, or detach it into an always-on-top window (Picture-in-Picture) ■ Site performance - Check Core Web Vitals (LCP, CLS, INP) plus FCP, TTFB and Total Blocking Time for the current page in a separate window - Each metric is labeled Good / Needs improvement / Poor so you know where to look first - Request count, transfer size, render-blocking resources and the largest resources are summarized together - Measured entirely with built-in browser APIs; nothing is sent anywhere - The score at the top is not a Lighthouse score. It applies the same curves and weights as a reference value ■ Disable anti-debugging (setting, off by default) - Keep inspecting on sites that block DevTools - Covers repeated debugger statements and the widely used detection libraries (devtools-detector, disable-devtool) - Works only while the setting is on, and the tab needs a reload after you turn it on or off - It changes how page scripts behave, so a site may misbehave, and hand-rolled detection may still get through ■ Breakpoint indicator - Always shows the current viewport width and the matching Tailwind breakpoint (sm/md/lg/xl/2xl) ■ Language - Choose 한국어, English, 日本語 or 简体中文 under Settings > Language in the popup; every screen updates immediately - On first install the extension follows your browser's UI language ■ Shortcuts - Alt+Shift+C launches the inspector (configurable) - Enter to pin, arrow keys to move through the DOM, S to save, D for the DOM panel, P to detach, F to switch between summary and detail, ESC to cancel - The main shortcuts can be reassigned in settings ■ Privacy - Everything runs locally in your browser. No data is collected or sent anywhere.