Title: Doohickey's Dev Tools
Author: mosaiclifecreative
Published: <strong>2026 年 2 月 25 日</strong>
Last modified: 2026 年 3 月 5 日

---

搜索插件

![](https://ps.w.org/doohickeys-dev-tools/assets/banner-772x250.png?rev=3469017)

![](https://ps.w.org/doohickeys-dev-tools/assets/icon-256x256.png?rev=3469017)

# Doohickey's Dev Tools

 作者：[mosaiclifecreative](https://profiles.wordpress.org/mosaiclifecreative/)

[下载](https://downloads.wordpress.org/plugin/doohickeys-dev-tools.1.0.4.zip)

 * [详情](https://cn.wordpress.org/plugins/doohickeys-dev-tools/#description)
 * [评价](https://cn.wordpress.org/plugins/doohickeys-dev-tools/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/doohickeys-dev-tools/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/doohickeys-dev-tools/#developers)

 [支持](https://wordpress.org/support/plugin/doohickeys-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:

 1. Clone the repository
 2. Run `npm install` to install dependencies
 3. Run `npm run build` to compile the production bundle
 4. 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).

## 屏幕截图

[⌊CSS Gradient Generator with full sidebar navigation⌉⌊CSS Gradient Generator with
full sidebar navigation⌉[

CSS Gradient Generator with full sidebar navigation

[⌊Box Shadow Generator with visual preview and layered shadow controls⌉⌊Box Shadow
Generator with visual preview and layered shadow controls⌉[

Box Shadow Generator with visual preview and layered shadow controls

[⌊Color Converter with HEX, RGB, HSL, HWB, and CMYK output⌉⌊Color Converter with
HEX, RGB, HSL, HWB, and CMYK output⌉[

Color Converter with HEX, RGB, HSL, HWB, and CMYK output

[⌊Contrast Checker with WCAG 2.1 AA/AAA compliance results⌉⌊Contrast Checker with
WCAG 2.1 AA/AAA compliance results⌉[

Contrast Checker with WCAG 2.1 AA/AAA compliance results

[⌊Border Radius Generator with shape presets and per-corner controls⌉⌊Border Radius
Generator with shape presets and per-corner controls⌉[

Border Radius Generator with shape presets and per-corner controls

[⌊Schema.org Generator with Article structured data and JSON-LD output⌉⌊Schema.org
Generator with Article structured data and JSON-LD output⌉[

Schema.org Generator with Article structured data and JSON-LD output

[⌊QR Code Generator with custom colors⌉⌊QR Code Generator with custom colors⌉[

QR Code Generator with custom colors

[⌊SVG to PNG Converter with file upload and code paste options⌉⌊SVG to PNG Converter
with file upload and code paste options⌉[

SVG to PNG Converter with file upload and code paste options

## 安装

 1. Go to **Plugins  Add New** in your WordPress admin
 2. Search for “Doohickey’s Dev Tools”
 3. Click **Install Now**, then **Activate**
 4. Navigate to **Doohickey’s** in your admin sidebar
 5. Start building!

## 常见问题

### Does this plugin affect my site’s frontend?

No. Doohickey’s Dev Tools only loads on its own admin page. It adds zero scripts,
styles, or markup to your public-facing site.

### Do I need to be online for the tools to work?

Most tools work entirely offline once the page is loaded. The QR Code generator 
and Placeholder Image generator use client-side rendering. No external API calls
are made.

### What does the Pro version include?

Pro unlocks 5 additional tools (Palette Generator, Code Formatter, Diff Checker,
HTML Table Generator, Test Data Generator) plus advanced features in 5 more tools.
The Pro version is available separately at mosaiclifecreative.com.

### Is my code/data sent anywhere?

Never. All processing happens in your browser. Nothing is transmitted to external
servers.

## 评价

此插件暂无评价。

## 贡献者及开发者

「Doohickey's Dev Tools」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ mosaiclifecreative ](https://profiles.wordpress.org/mosaiclifecreative/)

[帮助将「Doohickey's Dev Tools」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/doohickeys-dev-tools)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/doohickeys-dev-tools/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/doohickeys-dev-tools/)，或通过[RSS](https://plugins.trac.wordpress.org/log/doohickeys-dev-tools/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/doohickeys-dev-tools/)。

## 更新日志

#### 1.0.4

 * Fixed: plugin no longer deactivates itself after updating from 1.0.2

#### 1.0.3

 * Smooth upgrade path: free version auto-deactivates when Pro is installed
 * Updated installation instructions

#### 1.0.2

 * Renamed plugin to Doohickey’s Dev Tools
 * New slug: doohickeys-dev-tools
 * Updated Freemius configuration for WordPress.org compliance
 * Free tools are fully functional with no locked features
 * Pro tools and features available separately via upgrade

#### 1.0.1

 * Renamed to “by Mosaic Life Creative”
 * Default gradient fix
 * Tested up to WordPress 6.9

#### 1.0.0

 * Initial release
 * 21 free developer tools across 6 categories
 * Modern React-powered interface
 * Fully client-side — no external API calls

## 额外信息

 *  版本 **1.0.4**
 *  最后更新：**3 月前**
 *  活跃安装数量 **不到10**
 *  WordPress 版本 ** 5.8 或更高版本 **
 *  已测试的最高版本为 **6.9.4**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/doohickeys-dev-tools/)
 * 标签
 * [color picker](https://cn.wordpress.org/plugins/tags/color-picker/)[css generator](https://cn.wordpress.org/plugins/tags/css-generator/)
   [developer-tools](https://cn.wordpress.org/plugins/tags/developer-tools/)[web development](https://cn.wordpress.org/plugins/tags/web-development/)
 *  [高级视图](https://cn.wordpress.org/plugins/doohickeys-dev-tools/advanced/)

## 评级

尚未提交反馈。

[Your review](https://wordpress.org/support/plugin/doohickeys-dev-tools/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/doohickeys-dev-tools/reviews/)

## 贡献者

 *   [ mosaiclifecreative ](https://profiles.wordpress.org/mosaiclifecreative/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/doohickeys-dev-tools/)