內容簡介
總結：Doohickey 的 Dev Tools 將一整套開發者工具放進您的 WordPress 管理員中。不再需要在瀏覽器標籤之間來回切換或收藏隨機網站 — 您所需的一切只需一鍵即可取得。
問題與答案：
1. Doohickey 的 Dev Tools 提供了哪些免費工具？
- CSS Tools（包含 Gradient Generator、Box Shadow Generator、Border Generator、Border Radius Generator、Clip-Path Maker、Flexbox Generator、CSS Grid Generator）
- Color Tools（包含 Color Picker、Contrast Checker、Color Converter）
- Code Tools（包含 String Utilities、Encoder / Decoder）
- Generators（包含 Placeholder Image、Lorem Ipsum、QR Code Generator）
- SEO & Meta（包含 Schema.org Generator、Meta Tag Generator）
- Converters（包含 SVG to PNG、HTML to Markdown、Markdown Preview、Aspect Ratio Calculator）
2. 升級至 Doohickey 的 Dev Tools Pro 版本將獲得哪些額外功能？
- Palette Generator
- Code Formatter
- Diff Checker
- HTML Table Generator
- Test Data Generator
- Flexbox
- CSS Grid
- Placeholder Image
- Schema.org
- QR Code
3. 為什麼要選擇使用 Doohickey 的 Dev Tools？
- 沒有外部依賴性 — 一切在您的瀏覽器中運行
- 沒有數據離開您的網站 — 您的代碼和內容保持私密
- 一鍵複製生成的 CSS、HTML 和代碼
- 一致的介面設計 — 每個工具都遵循相同乾淨、直觀的布局
- 輕量級 — 單個 JavaScript 捆綁，在工具頁面上加載
以上簡單介紹可見 Doohickey 的 Dev Tools 提供了豐富多樣的開發工具，助您輕鬆進行網站開發。
外掛標籤
開發者團隊
原文外掛簡介
Doohickey’s Dev Tools puts a full suite of developer utilities right inside your WordPress admin. No more juggling browser tabs and bookmarking random websites — everything you need is one click away.
Free Tools
CSS Tools
* Gradient Generator — Linear and radial gradients with unlimited color stops
* Box Shadow Generator — Visual box-shadow builder with layered shadows
* Border Generator — Shorthand and per-side border controls
* Border Radius Generator — Per-corner radius with visual preview
* Clip-Path Maker — Polygon, circle, ellipse, and inset clip paths
* Flexbox Generator — Visual flexbox playground with container controls
* CSS Grid Generator — Set columns, rows, gaps, and alignment visually
Color Tools
* Color Picker — HSV color picker with HEX, RGB, and HSL output
* Contrast Checker — WCAG 2.1 AA/AAA compliance testing
* Color Converter — Convert between HEX, RGB, HSL, and CMYK
Code Tools
* String Utilities — Case conversion, reverse, slug, character/word count
* Encoder / Decoder — Base64, URL encoding, HTML entities, and more
Generators
* Placeholder Image — Custom-sized placeholder images for mockups
* Lorem Ipsum — Paragraphs, sentences, or words of filler text
* QR Code Generator — Instant QR codes from any text or URL
SEO & Meta
* Schema.org Generator — Structured data for Article, Local Business, and FAQ
* Meta Tag Generator — SEO meta tags, Open Graph, and Twitter Cards
Converters
* SVG to PNG — Client-side SVG conversion with scale options
* HTML to Markdown — Convert HTML markup to clean Markdown
* Markdown Preview — Live Markdown editor with rendered preview
* Aspect Ratio Calculator — Calculate ratios from dimensions, scale with locked ratios, common size presets
Pro Version
Upgrade to Doohickey’s Dev Tools Pro for additional tools and features:
Palette Generator — Interactive color wheel with 7 harmony modes. Export as CSS or SCSS variables.
Code Formatter — Auto-format JSON, HTML, CSS, JavaScript, and SQL
Diff Checker — Side-by-side text comparison with highlighted differences
HTML Table Generator — Visual table builder with CSV import
Test Data Generator — Generate realistic fake data (names, emails, addresses, etc.)
Flexbox — Per-item controls (flex-grow, flex-shrink, flex-basis, align-self, order)
CSS Grid — Templates (Holy Grail, Dashboard, 12-Col, etc.), custom definitions, per-cell spans
Placeholder Image — Social media presets and Data URI export
Schema.org — 5 additional types (Product, Person, Organization, Event, Recipe)
QR Code — Custom logo overlay
Why Doohickey’s Dev Tools?
Zero external dependencies — Everything runs client-side in your browser
No data leaves your site — Your code and content stay private
Copy-ready output — One-click copy for all generated CSS, HTML, and code
Consistent interface — Every tool follows the same clean, intuitive layout
Lightweight — Single JavaScript bundle, loads only on the tools page
Source Code & Build Instructions
The full source code for this plugin, including uncompiled JavaScript and CSS, is available at:
https://github.com/mosaiclifecreative/doohickeys-dev-tools
To build from source:
Clone the repository
Run npm install to install dependencies
Run npm run build to compile the production bundle
The compiled files are output to the build/ directory
The project uses @wordpress/scripts for building. Source files are in admin/js/ (JSX) and admin/css/ (CSS).
