Web Dev Toolkit

Browser-based developer toolkit with 6 essential web development utilities. Single HTML file, zero dependencies — just open and use.

Table of Contents

• Features
• Video Record
• Screenshot
• Color Pickers
• Element Inspector
• Text Extractor
• Usage
• Tech Stack
• License

Features

Tool	What It Does
Video Record	Record browser tab activity as video
Screenshot	Capture page screenshots using 5 different rendering engines
BG Color Picker	Pick background colors from any element on the page
Text Color Picker	Pick text colors from any element on the page
Element Inspector	Inspect DOM elements — dimensions, classes, styles
Text Extractor	Extract all text content from pages

Video Record

Record your browser tab as a video file. Uses the native MediaRecorder API and getDisplayMedia() for high-quality screen capture.

Screenshot

Five different screenshot methods, each with different trade-offs for rendering accuracy:

Method	Library	Best For
html2canvas	html2canvas	General purpose, widely compatible
html-to-image	html-to-image	SVG-based, good text rendering
dom-to-image-more	dom-to-image-more	Fork with better CSS support
modern-screenshot	modern-screenshot	Modern API, web component support
rasterizehtml	rasterizehtml	Full CSS rendering via iframe

Color Pickers

Two color picker modes — background and text. Hover over any element on the page to see its computed color. Click to copy the hex value.

Element Inspector

Hover over elements to see bounding boxes, class names, computed dimensions, and CSS properties. Similar to browser DevTools but embedded in the page.

Text Extractor

Select a region or entire page to extract all visible text content. Useful for scraping text from pages without developer tools.

Usage

# Just open in your browser
open index.html

Or drag index.html into any browser tab.

Tech Stack

• Vanilla HTML/CSS/JavaScript
• html2canvas (CDN) for primary screenshot method
• Native browser APIs for video recording and color picking
• Brutalist dark terminal aesthetic

License

MIT