程式碼美化 / 壓縮

用 **Prettier** 引擎美化 10 種語言(JS / TS / JSX / TSX / JSON / CSS / SCSS / HTML / Markdown / YAML),並能一鍵 minify JSON / CSS / HTML。內容只在你瀏覽器內處理,不上傳。
語言自動判讀
進階選項(Prettier)
每行寬度
縮排寬度
使用 Tab 縮排使用單引號保留分號
原始碼
選檔
0 bytes
輸出
0 bytes
›如何使用
選美化或壓縮模式,然後選語言(或讓「自動判讀」幫你猜)。
把原始碼貼進左邊輸入框,或按選檔上傳檔案(會自動依副檔名選對語言)。
美化模式下展開 進階選項 可改 Prettier 的設定:每行寬度、縮排、單引號、分號。
按 美化 / 壓縮 按鈕,結果出現在右側。可複製或下載(副檔名自動依語言)。
Tips
Prettier 是業界標準 — VS Code / WebStorm 內建,我們就是把它包成不用裝、不用設定就能用的版本。
壓縮目前只支援 JSON / CSS / SCSS / HTML — JS 壓縮要用 Terser(我們暫不內建,以免 bundle 變肥)。要 minify JS 推薦命令列 npx terser。
自動判讀 用內容啟發式判斷,JSON / HTML / CSS 通常很準;模糊時可手動覆寫。
HTML 壓縮 會保留
 / </code> / <code class="mono bg-foreground/8 rounded px-1 py-0.5 text-xs"><script></code> / <code class="mono bg-foreground/8 rounded px-1 py-0.5 text-xs"><style></code> 內容(避免破壞排版與程式)。</li></ul></div><p class="text-foreground/70 text-xs">💡 第一次按下 <strong>美化</strong> 時會載入 Prettier 引擎(約 400KB,從 CDN 拉取後 cache)。之後使用都是即時。</p></div></details><section class="border-foreground/10 mt-10 rounded-xl border p-5"><h2 class="text-foreground/60 text-xs uppercase tracking-wider">相關工具</h2><ul class="mt-3 grid gap-3 sm:grid-cols-2"><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/zh-TW/tools/tw-test-data"><div class="text-sm font-medium">台灣測試資料產生器</div><div class="text-foreground/70 mt-1 text-xs">身分證、統編、手機、信用卡(Luhn)合法假資料</div></a></li><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/zh-TW/tools/json"><div class="text-sm font-medium">JSON formatter + Schema validator</div><div class="text-foreground/70 mt-1 text-xs">格式化 / minify / 排序 + JSON Schema 驗證</div></a></li><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/zh-TW/tools/timex"><div class="text-sm font-medium">Unix 時間 + 時區轉換</div><div class="text-foreground/70 mt-1 text-xs">秒 / 毫秒 / ISO 互轉,任意時區即時顯示</div></a></li><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/zh-TW/tools/md-translate"><div class="text-sm font-medium">Markdown 批次翻譯</div><div class="text-foreground/70 mt-1 text-xs">自帶 OpenAI / Anthropic / Google API key,批次翻譯 .md 檔,保留 frontmatter / code / 連結結構</div></a></li></ul></section></main><footer class="border-foreground/10 text-foreground/60 mt-12 border-t"><div class="mx-auto max-w-5xl px-4 py-8 text-sm"><nav aria-label="工具" class="mb-6 grid gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-3"><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">圖片 / PDF / 影音</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/zh-TW/tools/image-base64">圖片 ↔ Base64 互轉</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/heic-to-jpg">HEIC → JPG / PNG / WebP</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/image-compress-to-size">圖片壓到指定大小</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/image-crop">圖片裁切(自由 / 比例 / 圓形)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/image-resize">圖片改尺寸(等比 / 上限 / 百分比)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/favicon-generator">Favicon 全套產生器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/svg-optimizer">SVG 最佳化</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/image-to-pdf">圖片 → PDF</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/pdf-merge-split">PDF 合併 / 分割 / 抽頁</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/pdf-compress">PDF 壓縮</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/pdf-page-edit">PDF 頁面編輯</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/pdf-password-remove">PDF 解鎖 / 移除密碼</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/pdf-watermark">PDF 加浮水印 + 頁碼</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/pdf-to-images">PDF 拆成圖片(PNG / JPG / WebP)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/gif-from-frames">多張圖 → GIF 動畫</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/video-to-gif">影片轉 GIF</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">開發 / API</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/zh-TW/tools/jwt">JWT decoder / generator</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/curl">cURL ↔ fetch ↔ Python 互轉</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/selector">CSS / XPath Selector 測試器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/regex">Regex builder 即時測試</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/mock-api">Mock API 設計器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/hash-tools">Hash 計算(MD5 / SHA-1/256/384/512)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/uuid-generator">UUID 產生器(v4 / v7 批次)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/regex-replace">正則替換 + 捕捉組預覽</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/cron-expression">Cron 表達式視覺化</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/password-strength">密碼強度 + 破解時間估算</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/token-counter">AI Token 估算器(GPT / Claude / Gemini)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/json-to-typescript">JSON 推 TypeScript type</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">資料 / 格式 / 文字</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/zh-TW/tools/tw-test-data">台灣測試資料產生器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/json">JSON formatter + Schema validator</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/timex">Unix 時間 + 時區轉換</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/md-translate">Markdown 批次翻譯</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/qr-code">QR Code 產生器(可加 Logo)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/code-beautifier">程式碼美化 / 壓縮(10 種語言)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/markdown-editor">Markdown 編輯器(即時預覽)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/url-encoder">URL / Base64 / HTML 編解碼</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/json-diff">JSON 差異視覺化(deep diff)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/csv-viewer">CSV / TSV 表格預覽 + 互轉</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/lorem-ipsum">假文產生器(拉丁 / 繁中 / Tech)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/timestamp-converter">Unix timestamp ↔ 多時區</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/text-diff">文字 diff(行對比)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/case-converter">命名格式互轉</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/slugify">Slugify(URL 友善化,含 CJK)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/emoji-info">Emoji 資訊查詢</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">視覺 / CSS</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/zh-TW/tools/cubic-bezier">cubic-bezier 編輯器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/css-gradient">CSS 漸層編輯器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/type-scale">Type Scale + Fluid clamp() 字級產生器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/box-shadow">box-shadow 編輯器(多層 + Material elevation)</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/glassmorphism">Glassmorphism + Neumorphism 二合一</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/css-clip-path">CSS clip-path 編輯器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/mermaid-editor">Mermaid 流程圖編輯器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/css-grid-generator">CSS Grid 視覺化產生器</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">顏色 / 無障礙</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/zh-TW/tools/color-converter">顏色格式轉換器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/tailwind-palette">Tailwind 色階產生器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/contrast-checker">WCAG 對比 + APCA 檢查器</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/color-blindness-simulator">色盲模擬器(8 種 + 正常)</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">速查 / 參考</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/zh-TW/tools/percentile">百分位計算</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/cheatsheet">測試框架 Cheatsheet</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/http-status-codes">HTTP 狀態碼大全</a></li><li><a class="hover:text-foreground transition" href="/zh-TW/tools/bundle-size">npm 套件大小(bundle size)查詢</a></li></ul></div></nav><div class="border-foreground/10 flex flex-wrap items-center justify-between gap-3 border-t pt-4"><span>由 Mark Liu 用 Next.js 打造</span><div class="flex items-center gap-4"><a class="hover:text-foreground transition" href="/zh-TW/articles">教學文章</a><a class="hover:text-foreground transition" href="/zh-TW/changelog">更新日誌</a><a class="hover:text-foreground transition" href="/zh-TW/about">關於</a><a class="hover:text-foreground transition" href="/zh-TW/privacy">隱私說明</a><a class="hover:text-foreground transition" href="/zh-TW/security">安全宣告</a><a href="https://github.com/MarkwwLiu/dev" target="_blank" rel="noopener noreferrer" class="hover:text-foreground inline-flex items-center gap-1 transition" aria-label="GitHub"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.66.5 12.01c0 5.08 3.29 9.4 7.86 10.92.58.1.79-.25.79-.55v-2.07c-3.2.7-3.87-1.37-3.87-1.37-.52-1.32-1.27-1.67-1.27-1.67-1.04-.7.08-.69.08-.69 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.34.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.06-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.17a10.93 10.93 0 0 1 5.74 0c2.18-1.48 3.14-1.17 3.14-1.17.62 1.57.23 2.73.11 3.02.73.79 1.18 1.81 1.18 3.06 0 4.4-2.7 5.36-5.27 5.65.41.36.78 1.07.78 2.16v3.21c0 .3.21.66.8.55 4.57-1.52 7.85-5.84 7.85-10.92C23.5 5.66 18.35.5 12 .5z"></path></svg>GitHub</a></div></div></div></footer><!--$--><!--/$--><!--$--><!--/$--><!--$--><!--/$--><script src="/_next/static/chunks/0ulj_fytx89gl.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[499294,[\"/_next/static/chunks/14a_anf9b2ip~.js\",\"/_next/static/chunks/05wl83n6bptdo.js\"],\"default\"]\n3:I[672134,[\"/_next/static/chunks/14a_anf9b2ip~.js\",\"/_next/static/chunks/05wl83n6bptdo.js\"],\"default\"]\n6:I[22088,[\"/_next/static/chunks/14a_anf9b2ip~.js\",\"/_next/static/chunks/05wl83n6bptdo.js\"],\"OutletBoundary\"]\n7:\"$Sreact.suspense\"\na:I[22088,[\"/_next/static/chunks/14a_anf9b2ip~.js\",\"/_next/static/chunks/05wl83n6bptdo.js\"],\"ViewportBoundary\"]\nc:I[22088,[\"/_next/static/chunks/14a_anf9b2ip~.js\",\"/_next/static/chunks/05wl83n6bptdo.js\"],\"MetadataBoundary\"]\ne:I[374377,[],\"default\",1]\n11:I[217563,[\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"/_next/static/chunks/0pyx13~p.raw..js\"],\"Analytics\"]\n12:I[863384,[\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"/_next/static/chunks/0pyx13~p.raw..js\"],\"SpeedInsights\"]\n13:I[332968,[\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"/_next/static/chunks/0pyx13~p.raw..js\"],\"GoogleAnalytics\"]\n16:I[566341,[\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"/_next/static/chunks/0pyx13~p.raw..js\",\"/_next/static/chunks/0u41jug7a~5lf.js\"],\"CodeFormatClient\"]\n63:I[516841,[\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"/_next/static/chunks/0pyx13~p.raw..js\",\"/_next/static/chunks/0u41jug7a~5lf.js\"],\"MermaidDiagram\"]\n64:I[395619,[\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"/_next/static/chunks/0pyx13~p.raw..js\",\"/_next/static/chunks/0u41jug7a~5lf.js\"],\"default\"]\n65:I[410356,[\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"/_next/static/chunks/0pyx13~p.raw..js\"],\"default\"]\n:HL[\"/_next/static/chunks/13do1g0f4m~y5.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.08e28id.o-okb.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"zh-TW\",\"tools\",\"code-beautifier\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[[\"locale\",\"zh-TW\",\"d\",null],{\"children\":[\"tools\",{\"children\":[\"code-beautifier\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16]}],[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/13do1g0f4m~y5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0fr-yzwx4etcn.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0pyx13~p.raw..js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L4\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0u41jug7a~5lf.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L6\",null,{\"children\":[\"$\",\"$7\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@8\"}]}]]}],{},null,false,null]},null,false,\"$@9\"]},null,false,\"$@9\"]},null,false,null]},null,false,\"$@9\"],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$7\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Ld\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"ZwOmFsPE6Oj9ruKyU_95S\"}\n"])</script><script>self.__next_f.push([1,"f:[]\n9:\"$Wf\"\n4:[\"$\",\"html\",null,{\"lang\":\"zh-TW\",\"data-theme\":\"dark\",\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased\",\"children\":[\"$\",\"body\",null,{\"className\":\"bg-background text-foreground flex min-h-full flex-col\",\"children\":[\"$L10\",[\"$\",\"$L11\",null,{}],[\"$\",\"$L12\",null,{}],[\"$\",\"$L13\",null,{\"gaId\":\"G-W6WN0CFEPB\"}]]}]}]\n5:[\"$L14\",[\"$\",\"main\",null,{\"className\":\"mx-auto w-full max-w-5xl flex-1 px-4 py-8\",\"children\":[\"$L15\",[\"$\",\"h1\",null,{\"className\":\"text-2xl font-semibold tracking-tight md:text-3xl\",\"children\":\"程式碼美化 / 壓縮\"}],[\"$\",\"p\",null,{\"className\":\"text-foreground/70 mt-2 max-w-3xl text-sm md:text-base\",\"children\":\"用 **Prettier** 引擎美化 10 種語言(JS / TS / JSX / TSX / JSON / CSS / SCSS / HTML / Markdown / YAML),並能一鍵 minify JSON / CSS / HTML。內容只在你瀏覽器內處理,不上傳。\"}],[\"$\",\"div\",null,{\"className\":\"mt-6\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"程式碼美化 / 壓縮(10 種語言)\\\",\\\"description\\\":\\\"Prettier 引擎美化 JS / TS / CSS / HTML / JSON / Markdown / YAML,並可一鍵 minify JSON / CSS / HTML。自動判語言\\\",\\\"url\\\":\\\"https://dev.9niche.com/zh-TW/tools/code-beautifier\\\",\\\"applicationCategory\\\":\\\"DeveloperApplication\\\",\\\"operatingSystem\\\":\\\"Any\\\",\\\"inLanguage\\\":\\\"zh-TW\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":0,\\\"priceCurrency\\\":\\\"USD\\\"}}\"}}],[\"$\",\"$L16\",null,{}]]}],\"$L17\",\"$undefined\",\"$L18\"]}],\"$L19\"]\n14:[\"$\",\"header\",null,{\"className\":\"border-foreground/10 bg-background sticky top-0 z-10 border-b\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex max-w-5xl items-center justify-between px-4 py-3\",\"children\":[\"$L1a\",[\"$\",\"nav\",null,{\"className\":\"text-foreground/70 flex items-center gap-4 text-sm\",\"children\":[\"$L1b\",\"$L1c\"]}]]}]}]\n18:[\"$\",\"section\",null,{\"className\":\"border-foreground/10 mt-10 rounded-xl border p-5\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-foreground/60 text-xs uppercase tracking-wider\",\"children\":\"相關工具\"}],[\"$\",\"ul\",null,{\"className\":\"mt-3 grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"li\",\"tw-test-data\",{\"children\":\"$L1d\"}],[\"$\",\"li\",\"json\",{\"children\":\"$L1e\"}],[\"$\",\"li\",\"timex\",{\"children\":\"$L1f\"}],[\"$\",\"li\",\"md-translate\",{\"children\":\"$L20\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"footer\",null,{\"className\":\"border-foreground/10 text-foreground/60 mt-12 border-t\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-5xl px-4 py-8 text-sm\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"工具\",\"className\":\"mb-6 grid gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"div\",\"media\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"圖片 / PDF / 影音\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"image-base64\",{\"children\":\"$L21\"}],[\"$\",\"li\",\"heic-to-jpg\",{\"children\":\"$L22\"}],[\"$\",\"li\",\"image-compress-to-size\",{\"children\":\"$L23\"}],[\"$\",\"li\",\"image-crop\",{\"children\":\"$L24\"}],[\"$\",\"li\",\"image-resize\",{\"children\":\"$L25\"}],[\"$\",\"li\",\"favicon-generator\",{\"children\":\"$L26\"}],[\"$\",\"li\",\"svg-optimizer\",{\"children\":\"$L27\"}],[\"$\",\"li\",\"image-to-pdf\",{\"children\":\"$L28\"}],[\"$\",\"li\",\"pdf-merge-split\",{\"children\":\"$L29\"}],[\"$\",\"li\",\"pdf-compress\",{\"children\":\"$L2a\"}],[\"$\",\"li\",\"pdf-page-edit\",{\"children\":\"$L2b\"}],[\"$\",\"li\",\"pdf-password-remove\",{\"children\":\"$L2c\"}],[\"$\",\"li\",\"pdf-watermark\",{\"children\":\"$L2d\"}],[\"$\",\"li\",\"pdf-to-images\",{\"children\":\"$L2e\"}],[\"$\",\"li\",\"gif-from-frames\",{\"children\":\"$L2f\"}],[\"$\",\"li\",\"video-to-gif\",{\"children\":\"$L30\"}]]}]]}],[\"$\",\"div\",\"dev-api\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"開發 / API\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"jwt\",{\"children\":\"$L31\"}],[\"$\",\"li\",\"curl\",{\"children\":\"$L32\"}],[\"$\",\"li\",\"selector\",{\"children\":\"$L33\"}],[\"$\",\"li\",\"regex\",{\"children\":\"$L34\"}],[\"$\",\"li\",\"mock-api\",{\"children\":\"$L35\"}],[\"$\",\"li\",\"hash-tools\",{\"children\":\"$L36\"}],[\"$\",\"li\",\"uuid-generator\",{\"children\":\"$L37\"}],[\"$\",\"li\",\"regex-replace\",{\"children\":\"$L38\"}],[\"$\",\"li\",\"cron-expression\",{\"children\":\"$L39\"}],[\"$\",\"li\",\"password-strength\",{\"children\":\"$L3a\"}],[\"$\",\"li\",\"token-counter\",{\"children\":\"$L3b\"}],[\"$\",\"li\",\"json-to-typescript\",{\"children\":\"$L3c\"}]]}]]}],[\"$\",\"div\",\"data-format\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"資料 / 格式 / 文字\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"tw-test-data\",{\"children\":\"$L3d\"}],[\"$\",\"li\",\"json\",{\"children\":\"$L3e\"}],[\"$\",\"li\",\"timex\",{\"children\":\"$L3f\"}],[\"$\",\"li\",\"md-translate\",{\"children\":\"$L40\"}],[\"$\",\"li\",\"qr-code\",{\"children\":\"$L41\"}],[\"$\",\"li\",\"code-beautifier\",{\"children\":\"$L42\"}],[\"$\",\"li\",\"markdown-editor\",{\"children\":\"$L43\"}],[\"$\",\"li\",\"url-encoder\",{\"children\":\"$L44\"}],[\"$\",\"li\",\"json-diff\",{\"children\":\"$L45\"}],[\"$\",\"li\",\"csv-viewer\",{\"children\":\"$L46\"}],[\"$\",\"li\",\"lorem-ipsum\",{\"children\":\"$L47\"}],[\"$\",\"li\",\"timestamp-converter\",{\"children\":\"$L48\"}],[\"$\",\"li\",\"text-diff\",{\"children\":\"$L49\"}],[\"$\",\"li\",\"case-converter\",{\"children\":\"$L4a\"}],[\"$\",\"li\",\"slugify\",{\"children\":\"$L4b\"}],[\"$\",\"li\",\"emoji-info\",{\"children\":\"$L4c\"}]]}]]}],[\"$\",\"div\",\"visual\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"視覺 / CSS\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"cubic-bezier\",{\"children\":\"$L4d\"}],[\"$\",\"li\",\"css-gradient\",{\"children\":\"$L4e\"}],[\"$\",\"li\",\"type-scale\",{\"children\":\"$L4f\"}],[\"$\",\"li\",\"box-shadow\",{\"children\":\"$L50\"}],[\"$\",\"li\",\"glassmorphism\",{\"children\":\"$L51\"}],[\"$\",\"li\",\"css-clip-path\",{\"children\":\"$L52\"}],[\"$\",\"li\",\"mermaid-editor\",{\"children\":\"$L53\"}],[\"$\",\"li\",\"css-grid-generator\",{\"children\":\"$L54\"}]]}]]}],[\"$\",\"div\",\"color\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"顏色 / 無障礙\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"color-converter\",{\"children\":\"$L55\"}],[\"$\",\"li\",\"tailwind-palette\",{\"children\":\"$L56\"}],[\"$\",\"li\",\"contrast-checker\",{\"children\":\"$L57\"}],[\"$\",\"li\",\"color-blindness-simulator\",{\"children\":\"$L58\"}]]}]]}],[\"$\",\"div\",\"reference\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"速查 / 參考\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"percentile\",{\"children\":\"$L59\"}],[\"$\",\"li\",\"cheatsheet\",{\"children\":\"$L5a\"}],[\"$\",\"li\",\"http-status-codes\",{\"children\":\"$L5b\"}],[\"$\",\"li\",\"bundle-size\",{\"children\":\"$L5c\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-foreground/10 flex flex-wrap items-center justify-between gap-3 border-t pt-4\",\"children\":[[\"$\",\"span\",null,{\"children\":\"由 Mark Liu 用 Next.js 打造\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-4\",\"children\":[\"$L5d\",\"$L5e\",\"$L5f\",\"$L60\",\"$L61\",[\"$\",\"a\",null,{\"href\":\"https://github.com/MarkwwLiu/dev\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-foreground inline-flex items-center gap-1 transition\",\"aria-label\":\"GitHub\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"width\":\"14\",\"height\":\"14\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"children\":\"$L62\"}],\"GitHub\"]}]]}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"62:[\"$\",\"path\",null,{\"d\":\"M12 .5C5.65.5.5 5.66.5 12.01c0 5.08 3.29 9.4 7.86 10.92.58.1.79-.25.79-.55v-2.07c-3.2.7-3.87-1.37-3.87-1.37-.52-1.32-1.27-1.67-1.27-1.67-1.04-.7.08-.69.08-.69 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.34.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.06-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.17a10.93 10.93 0 0 1 5.74 0c2.18-1.48 3.14-1.17 3.14-1.17.62 1.57.23 2.73.11 3.02.73.79 1.18 1.81 1.18 3.06 0 4.4-2.7 5.36-5.27 5.65.41.36.78 1.07.78 2.16v3.21c0 .3.21.66.8.55 4.57-1.52 7.85-5.84 7.85-10.92C23.5 5.66 18.35.5 12 .5z\"}]\n"])</script><script>self.__next_f.push([1,"17:[\"$\",\"details\",null,{\"className\":\"border-foreground/10 bg-surface group mt-8 rounded-xl border\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"HowTo\\\",\\\"name\\\":\\\"How to use 程式碼美化 / 壓縮(10 種語言)\\\",\\\"step\\\":[{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":1,\\\"text\\\":\\\"選 美化 或 壓縮 模式,然後選語言(或讓「自動判讀」幫你猜)。\\\"},{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":2,\\\"text\\\":\\\"把原始碼貼進左邊輸入框,或按 選檔 上傳檔案(會自動依副檔名選對語言)。\\\"},{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":3,\\\"text\\\":\\\"美化模式下展開 進階選項 可改 Prettier 的設定:每行寬度、縮排、單引號、分號。\\\"},{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":4,\\\"text\\\":\\\"按 美化 / 壓縮 按鈕,結果出現在右側。可 複製 或 下載(副檔名自動依語言)。\\\"}]}\"}}],[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none px-4 py-3 text-sm font-medium\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-foreground/60 mr-2 inline-block transition group-open:rotate-90\",\"children\":\"›\"}],\"如何使用\"]}],[\"$\",\"div\",null,{\"className\":\"space-y-4 px-4 pb-4 pt-1 text-sm\",\"children\":[[\"$\",\"ol\",null,{\"className\":\"space-y-1.5 pl-5 [list-style:decimal]\",\"children\":[[\"$\",\"li\",\"0\",{\"dangerouslySetInnerHTML\":{\"__html\":\"選 \u003cstrong\u003e美化\u003c/strong\u003e 或 \u003cstrong\u003e壓縮\u003c/strong\u003e 模式,然後選語言(或讓「自動判讀」幫你猜)。\"}}],[\"$\",\"li\",\"1\",{\"dangerouslySetInnerHTML\":{\"__html\":\"把原始碼貼進左邊輸入框,或按 \u003cstrong\u003e選檔\u003c/strong\u003e 上傳檔案(會自動依副檔名選對語言)。\"}}],[\"$\",\"li\",\"2\",{\"dangerouslySetInnerHTML\":{\"__html\":\"美化模式下展開 \u003cstrong\u003e進階選項\u003c/strong\u003e 可改 Prettier 的設定:每行寬度、縮排、單引號、分號。\"}}],[\"$\",\"li\",\"3\",{\"dangerouslySetInnerHTML\":{\"__html\":\"按 \u003cstrong\u003e美化 / 壓縮\u003c/strong\u003e 按鈕,結果出現在右側。可 \u003cstrong\u003e複製\u003c/strong\u003e 或 \u003cstrong\u003e下載\u003c/strong\u003e(副檔名自動依語言)。\"}}]]}],[\"$\",\"$L63\",null,{\"source\":\"flowchart LR\\n    A[貼上 / 選檔] --\u003e B{自動判讀?}\\n    B --\u003e|是| C[detectLanguageFromContent]\\n    B --\u003e|否| D[手動選語言]\\n    C --\u003e E[language]\\n    D --\u003e E\\n    E --\u003e F{模式}\\n    F --\u003e|美化| G[lazy import prettier/standalone + plugin]\\n    G --\u003e H[prettier.format with options]\\n    F --\u003e|壓縮| I{語言支援?}\\n    I --\u003e|JSON/CSS/HTML| J[純函式 minify]\\n    I --\u003e|其他| K[切回美化提示]\\n    H --\u003e L[輸出 + 大小比較]\\n    J --\u003e L\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/60 mb-1 text-xs uppercase tracking-wide\",\"children\":\"Tips\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1 pl-5 [list-style:disc]\",\"children\":[[\"$\",\"li\",\"0\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003ePrettier 是業界標準\u003c/strong\u003e — VS Code / WebStorm 內建,我們就是把它包成不用裝、不用設定就能用的版本。\"}}],[\"$\",\"li\",\"1\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003e壓縮目前只支援 JSON / CSS / SCSS / HTML\u003c/strong\u003e — JS 壓縮要用 Terser(我們暫不內建,以免 bundle 變肥)。要 minify JS 推薦命令列 \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003enpx terser\u003c/code\u003e。\"}}],[\"$\",\"li\",\"2\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003e自動判讀\u003c/strong\u003e 用內容啟發式判斷,JSON / HTML / CSS 通常很準;模糊時可手動覆寫。\"}}],[\"$\",\"li\",\"3\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003eHTML 壓縮\u003c/strong\u003e 會保留 \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003cpre\u003e\u003c/code\u003e / \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003ctextarea\u003e\u003c/code\u003e / \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003cscript\u003e\u003c/code\u003e / \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003cstyle\u003e\u003c/code\u003e 內容(避免破壞排版與程式)。\"}}]]}]]}],[\"$\",\"p\",null,{\"className\":\"text-foreground/70 text-xs\",\"dangerouslySetInnerHTML\":{\"__html\":\"💡 第一次按下 \u003cstrong\u003e美化\u003c/strong\u003e 時會載入 Prettier 引擎(約 400KB,從 CDN 拉取後 cache)。之後使用都是即時。\"}}]]}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW\",\"locale\":\"$undefined\",\"localeCookie\":{\"name\":\"NEXT_LOCALE\",\"sameSite\":\"lax\"},\"className\":\"font-semibold tracking-tight\",\"children\":\"Dev Tools\"}]\n1b:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground\",\"children\":\"首頁\"}]\n1c:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground\",\"children\":\"工具\"}]\n1d:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/tw-test-data\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"台灣測試資料產生器\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"身分證、統編、手機、信用卡(Luhn)合法假資料\"}]]}]\n1e:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/json\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"JSON formatter + Schema validator\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"格式化 / minify / 排序 + JSON Schema 驗證\"}]]}]\n1f:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/timex\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"Unix 時間 + 時區轉換\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"秒 / 毫秒 / ISO 互轉,任意時區即時顯示\"}]]}]\n20:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/md-translate\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"Markdown 批次翻譯\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"自帶 OpenAI / Anthropic / Google API key,批次翻譯 .md 檔,保留 frontmatter / code / 連結結構\"}]]}]\n21:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/image-base64\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"圖片 ↔ Base64 互轉\"}]\n22:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/heic-to-jpg\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"HEIC → JPG / PNG / WebP\"}]\n23:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/image-compress-to-size\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"圖片壓到指定大小\"}]\n24:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/image-crop\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"圖片裁切(自由 / 比例 / 圓形)\"}]\n25:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/image-resize\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"圖片改尺寸(等比 / 上限 / 百分比)\"}]\n26:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/favicon-generator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Favicon 全套產生器\"}]\n27:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/svg-optimizer\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:local"])</script><script>self.__next_f.push([1,"eCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"SVG 最佳化\"}]\n28:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/image-to-pdf\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"圖片 → PDF\"}]\n29:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/pdf-merge-split\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF 合併 / 分割 / 抽頁\"}]\n2a:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/pdf-compress\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF 壓縮\"}]\n2b:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/pdf-page-edit\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF 頁面編輯\"}]\n2c:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/pdf-password-remove\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF 解鎖 / 移除密碼\"}]\n2d:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/pdf-watermark\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF 加浮水印 + 頁碼\"}]\n2e:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/pdf-to-images\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF 拆成圖片(PNG / JPG / WebP)\"}]\n2f:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/gif-from-frames\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"多張圖 → GIF 動畫\"}]\n30:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/video-to-gif\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"影片轉 GIF\"}]\n31:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/jwt\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JWT decoder / generator\"}]\n32:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/curl\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"cURL ↔ fetch ↔ Python 互轉\"}]\n33:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/selector\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS / XPath Selector 測試器\"}]\n34:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/regex\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Regex builder 即時測試\"}]\n35:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/mock-api\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Mock API 設計器\"}]\n36:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/hash-tools\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Hash 計算(MD5 / SHA-1/256/384/512)\"}]\n37:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/uuid-generator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"UUID 產生器(v4 / v7 批次)\"}]\n38:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/regex-replace\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"正則替換 + 捕捉組預覽\"}]\n39:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/cron-expression\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Cron 表達"])</script><script>self.__next_f.push([1,"式視覺化\"}]\n3a:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/password-strength\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"密碼強度 + 破解時間估算\"}]\n3b:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/token-counter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"AI Token 估算器(GPT / Claude / Gemini)\"}]\n3c:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/json-to-typescript\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JSON 推 TypeScript type\"}]\n3d:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/tw-test-data\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"台灣測試資料產生器\"}]\n3e:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/json\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JSON formatter + Schema validator\"}]\n3f:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/timex\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Unix 時間 + 時區轉換\"}]\n40:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/md-translate\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Markdown 批次翻譯\"}]\n41:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/qr-code\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"QR Code 產生器(可加 Logo)\"}]\n42:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/code-beautifier\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"程式碼美化 / 壓縮(10 種語言)\"}]\n43:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/markdown-editor\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Markdown 編輯器(即時預覽)\"}]\n44:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/url-encoder\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"URL / Base64 / HTML 編解碼\"}]\n45:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/json-diff\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JSON 差異視覺化(deep diff)\"}]\n46:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/csv-viewer\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSV / TSV 表格預覽 + 互轉\"}]\n47:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/lorem-ipsum\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"假文產生器(拉丁 / 繁中 / Tech)\"}]\n48:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/timestamp-converter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Unix timestamp ↔ 多時區\"}]\n49:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/text-diff\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"文字 diff(行對比)\"}]\n4a:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/case-converter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"命名格式互轉\"}]\n4b:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/slugify\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\""])</script><script>self.__next_f.push([1,"children\":\"Slugify(URL 友善化,含 CJK)\"}]\n4c:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/emoji-info\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Emoji 資訊查詢\"}]\n4d:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/cubic-bezier\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"cubic-bezier 編輯器\"}]\n4e:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/css-gradient\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS 漸層編輯器\"}]\n4f:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/type-scale\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Type Scale + Fluid clamp() 字級產生器\"}]\n50:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/box-shadow\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"box-shadow 編輯器(多層 + Material elevation)\"}]\n51:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/glassmorphism\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Glassmorphism + Neumorphism 二合一\"}]\n52:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/css-clip-path\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS clip-path 編輯器\"}]\n53:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/mermaid-editor\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Mermaid 流程圖編輯器\"}]\n54:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/css-grid-generator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS Grid 視覺化產生器\"}]\n55:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/color-converter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"顏色格式轉換器\"}]\n56:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/tailwind-palette\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Tailwind 色階產生器\"}]\n57:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/contrast-checker\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"WCAG 對比 + APCA 檢查器\"}]\n58:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/color-blindness-simulator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"色盲模擬器(8 種 + 正常)\"}]\n59:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/percentile\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"百分位計算\"}]\n5a:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/cheatsheet\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"測試框架 Cheatsheet\"}]\n5b:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/http-status-codes\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"HTTP 狀態碼大全\"}]\n5c:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/tools/bundle-size\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"npm 套件大小(bundle size)查詢\"}]\n5d:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/articles\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground t"])</script><script>self.__next_f.push([1,"ransition\",\"children\":\"教學文章\"}]\n5e:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/changelog\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"更新日誌\"}]\n5f:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/about\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"關於\"}]\n60:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/privacy\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"隱私說明\"}]\n61:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/security\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"安全宣告\"}]\n15:[\"$\",\"$L64\",null,{\"ref\":\"$undefined\",\"href\":\"/zh-TW/privacy\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-emerald-500/30 bg-emerald-500/10 hover:bg-emerald-500/15 text-emerald-300 mb-4 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs transition\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":true,\"children\":\"🔒\"}],[\"$\",\"span\",null,{\"className\":\"font-medium\",\"children\":\"純前端\"}],[\"$\",\"span\",null,{\"className\":\"text-emerald-300/60\",\"children\":\"檔案不上傳\"}]]}]\n"])</script><script>self.__next_f.push([1,"10:[\"$\",\"$L65\",null,{\"formats\":\"$undefined\",\"locale\":\"zh-TW\",\"messages\":{\"brand\":{\"name\":\"Dev Tools\",\"tagline\":\"為 QA / 工程師打造的免費線上工具集\"},\"nav\":{\"home\":\"首頁\",\"tools\":\"工具\",\"about\":\"關於\",\"privacy\":\"隱私說明\",\"changelog\":\"更新日誌\",\"articles\":\"教學文章\",\"security\":\"安全宣告\"},\"security\":{\"title\":\"安全宣告\",\"subtitle\":\"本站如何看待安全、收集了什麼、沒收集什麼,以及攻擊面分析。所有原始碼公開,任何人都可以驗證。\",\"metaTitle\":\"安全宣告 — 純前端架構、不收集個資、原始碼公開\",\"metaDescription\":\"dev.9niche.com 的安全分析:53 個工具全部純前端,檔案不上傳、不存資料庫、不需註冊。原始碼公開可審計。\",\"architecture\":{\"title\":\"整體架構為什麼安全\",\"body\":\"我們的核心設計就是「沒東西可被偷」。所有工具的處理都在你的瀏覽器內完成:\",\"point1\":\"53 個工具全部 client-side,檔案 / 文字 / 密碼從未送到伺服器\",\"point2\":\"沒有資料庫、沒有使用者帳號、沒有密碼儲存系統\",\"point3\":\"沒有金流、沒有付費、沒有訂閱\",\"point4\":\"傳輸全程 HTTPS + HSTS,中間人攻擊無法成立\"},\"notCollected\":{\"title\":\"我們不收集什麼\",\"body\":\"為了完全透明,以下這些資料我們從未也無法取得:\",\"item1\":\"你上傳的 PDF / 圖片 / 影片 — 都在你裝置內,沒有任何網路請求送出檔案\",\"item2\":\"你輸入的密碼、API key、token、JSON 內容 — 全部 in-browser 處理\",\"item3\":\"個資、Email、姓名、IP 位址(Vercel Analytics 預設不記錄 IP)\",\"item4\":\"Cookie 只有 theme 偏好(dark / light),沒有任何識別追蹤\"},\"thirdParty\":{\"title\":\"第三方服務(透明清單)\",\"body\":\"本站使用的所有第三方:\",\"analytics\":\"Vercel Analytics + Speed Insights — 純頁面瀏覽量統計,不含 IP / 不含個資\",\"bundle\":\"bundlephobia.com(僅 bundle-size 工具) — 你查詢的 npm 套件名會送到他們的公開 API\",\"mdtrans\":\"OpenAI / Anthropic / Google API(僅 md-translate 工具) — 用你自己的 API key,呼叫直接從瀏覽器發,我們完全不經手\"},\"gated\":{\"title\":\"唯一的後端區塊:tw-test-data 密碼門檻\",\"body\":\"為了避免 tw-test-data(台灣身分證 / 信用卡號產生器)被濫用,加了密碼門檻 + 3 次失敗 IP ban + Telegram 通知。HMAC-signed cookie 走 WebCrypto,密碼用環境變數儲存。即便這個區塊被攻破,駭客拿到的也只是 fake 測試資料,沒有實質損失。\"},\"openSource\":{\"title\":\"原始碼公開\",\"body\":\"整個專案的程式碼公開於 GitHub,你可以親自驗證上面說的每一條:\"},\"disclosure\":{\"title\":\"發現漏洞怎麼通報\",\"body\":\"如果你發現安全漏洞,請透過 GitHub Security Advisory 私下通報,我們會盡快回應。請不要公開 issue / PR 揭露(避免被惡意利用)。\",\"cta\":\"→ 私下通報漏洞(GitHub Security Advisory)\"}},\"articles\":{\"indexTitle\":\"教學文章\",\"indexSubtitle\":\"深度解析 + 實戰指南,每篇文章對應一個本站工具,讀完直接打開試。\",\"metaTitle\":\"教學文章 — JWT、Regex、CSS Selector、效能測試等深度指南\",\"metaDescription\":\"從 QA / 工程師角度寫的深度技術文章,涵蓋 JWT 安全、Regex 進階、CSS Selector 反爬、效能百分位等,每篇都連到對應的線上工具。\",\"backToIndex\":\"回文章列表\",\"pairedTool\":\"搭配工具\",\"openTool\":\"開啟工具\"},\"changelog\":{\"title\":\"更新日誌\",\"subtitle\":\"本站每一個工具上線與重要架構改動的時間軸,直接從 git 提交歷史抽出。所有變動都公開可追溯。\",\"totalEntries\":\"共 {n} 筆紀錄\",\"viewOnGithub\":\"在 GitHub 看完整歷史\",\"empty\":\"目前還沒有紀錄。\",\"metaTitle\":\"更新日誌 — 工具上線與架構改動時間軸\",\"metaDescription\":\"Dev Tools 站台所有工具上線時間與重要變更紀錄,完全透明、可追溯到 git commit。\"},\"home\":{\"title\":\"純前端線上工具集 — 開發者、設計師、所有人都能用\",\"subtitle\":\"PDF 合併壓縮、HEIC → JPG、圖片轉 PDF、顏色轉換、JWT、Regex、JSON、Mock API、台灣測試資料… 全部在你的瀏覽器跑,檔案不上傳。\",\"privacyBadge\":\"純前端 · 檔案不離開瀏覽器\",\"browseTools\":\"瀏覽全部工具\",\"howItsPrivate\":\"為什麼能不上傳?\",\"github\":\"GitHub\",\"exploreByCategory\":\"依分類探索\",\"allTools\":\"全部工具\",\"toolCount\":\"{n} 個工具\",\"stats\":{\"tools\":\"個工具\",\"categories\":\"個分類\",\"upload\":\"次上傳\",\"uploadZero\":\"0\"}},\"privacyBadge\":{\"label\":\"純前端\",\"subtitle\":\"檔案不上傳\"},\"article\":{\"jwt\":{\"title\":\"JWT 深入解析:三段結構、HS256 vs RS256、常見漏洞與安全儲存\",\"intro\":\"JWT(JSON Web Token)是過去十年最普及的無狀態身分驗證標準,但也是 OWASP Top 10 中最常被誤用的協定之一。從 QA 角度,理解 JWT 結構才能真正設計出有效的安全測試案例。\",\"sections\":[{\"heading\":\"三段是什麼,為什麼這樣設計\",\"body\":\"JWT 用 `.` 切成三段,各自 Base64URL 編碼:\\n\\n- **Header**:`{\\\"alg\\\":\\\"HS256\\\",\\\"typ\\\":\\\"JWT\\\"}` — 演算法與型別\\n- **Payload**:`{\\\"sub\\\":\\\"123\\\",\\\"exp\\\":1700000000,\\\"role\\\":\\\"admin\\\"}` — claims(主體、過期時間、自訂欄位)\\n- **Signature**:用 header 指定的演算法,把 `header.payload` 拿 secret(HS256)或 private key(RS256)簽出來\\n\\n設計上 header / payload **沒有加密**(只有編碼),任何人都能 Base64 解開看內容。**真正的安全來自 signature**:驗證方用 secret / public key 重算一次 signature,跟 token 帶來的比對,只要 payload 被改過,signature 就對不上。\"},{\"heading\":\"HS256 vs RS256 vs ES256:什麼時候用哪個\",\"body\":\"- **HS256**(對稱):快、實作簡單,但簽章方跟驗證方共用同一個 secret。**適合單一服務內部**(API gateway → 自己的 backend)。\\n- **RS256**(非對稱 RSA):簽章用 private key、驗證用 public key。**適合一對多場景**(Auth server 發 token,多個 microservice 驗)。public key 可公開,各服務不會互相洩漏。\\n- **ES256**(非對稱 ECDSA):跟 RS256 同概念,但簽章短、計算快 80% 以上。**新專案建議用這個**。\\n\\nWebCrypto / Node 標準函式庫都原生支援這三種。\"},{\"heading\":\"三個必修漏洞\",\"body\":\"**1. `alg: none` 攻擊**:有的舊版 library 接受 `{\\\"alg\\\":\\\"none\\\"}` header,意思是「不驗 signature」。攻擊者改 payload 後把 signature 段留空,系統直接放行。\\n\\n**2. 演算法混淆**(RS256 → HS256):server 預期收 RS256,但攻擊者把 header 改成 `alg: HS256`,然後**用 public key 當 secret** 重簽。某些 library 沒檢查 alg 一致性,public key 又是公開的,token 就被驗過。\\n\\n**3. 沒驗 `exp` / `aud`**:大量 QA 流程只驗 signature 正不正確,忘了:\\n- `exp` claim 過期沒\\n- `aud` claim 是不是給這個服務(prevent token reuse)\\n- `iss` claim 來源對不對\\n\\n設計測試案例時,**這三條每條都要有獨立的負面測試**。\"},{\"heading\":\"客戶端怎麼存 token(三選一,各有風險)\",\"body\":\"- **localStorage**:最方便,**但 XSS 一發就完蛋**(惡意 script 直接讀走)。\\n- **httpOnly + Secure + SameSite=Strict cookie**:擋住 XSS,**但 CSRF 風險**(需配合 CSRF token 或 SameSite=Lax + 雙重驗證)。\\n- **In-memory(React state)**:最安全,**但刷新分頁就沒了**(需要 refresh token 從 httpOnly cookie 重拿)。\\n\\n業界主流:**access token in memory + refresh token in httpOnly cookie**,這套對 XSS 和 CSRF 都有相對好的防禦。\"},{\"heading\":\"JWT 測試清單(QA 用)\",\"body\":\"正面測試:\\n\\n- 合法 token → 200\\n- payload 內含的 role / scope 真的影響回傳內容\\n\\n負面測試(這些 case 沒寫等於系統有漏洞):\\n\\n- 過期 token → 401\\n- 簽章被竄改的 token → 401\\n- `alg: none` header → 401(不能是 200)\\n- 拿 A service 的 token 打 B service → 401(`aud` 驗證)\\n- 用 public key 當 secret 重簽 HS256 → 401(演算法混淆防禦)\\n- 把 payload 內的 `role` 從 `user` 改成 `admin`(但 signature 不改)→ 401\\n\\n上面這套用 [JWT decoder / generator 工具](/zh-TW/tools/jwt) 都能手動模擬。\"}],\"footer\":\"想實際試一下?用 [JWT 工具](/zh-TW/tools/jwt) 的 Sign 模式偽造一個 `alg: none` 或過期 token,丟給你的 API 看擋不擋得住。\"},\"regex\":{\"title\":\"Regex 深入解析:capture groups、lookaround、災難性回溯與跨語言差異\",\"intro\":\"regex 是 QA / SRE / 後端工程師每天用、但永遠覺得自己不夠熟的東西。這篇整理我這幾年遇過真正會用到的進階技巧,以及那些「為什麼我的 regex 把瀏覽器卡死」的真實案例。\",\"sections\":[{\"heading\":\"Capture group vs non-capturing vs named\",\"body\":\"三種寫法都在用括號,但意義不同:\\n\\n- `()` **Capture group**:抓出來,可以用 `$1`、`$2` 引用\\n- `(?:)` **Non-capturing group**:只分組,不抓 — **效能比 `()` 略好,複雜 regex 應該大量用**\\n- `(?\u003cname\u003e)` **Named group**:抓出來且能用名字引用 — **可讀性大勝**,維護時不會數錯位置\\n\\n例:抓 email\\n\\n- 笨寫法:`(\\\\w+)@(\\\\w+)\\\\.(\\\\w+)`,後續用 `$1` `$2` `$3` — 一個月後回來看完全不知道哪個是什麼。\\n- 好寫法:`(?\u003cuser\u003e\\\\w+)@(?\u003chost\u003e\\\\w+)\\\\.(?\u003ctld\u003e\\\\w+)`,用 `groups.user` 直接懂。\"},{\"heading\":\"Lookahead / lookbehind:不消耗字元的條件\",\"body\":\"Lookaround 在 regex 引擎內查條件但**不前進游標**,適合需要「同時滿足多條件」的場景:\\n\\n- `(?=...)` **Positive lookahead**:後面必須是某東西\\n- `(?!...)` **Negative lookahead**:後面不能是某東西\\n- `(?\u003c=...)` **Positive lookbehind**:前面必須是某東西\\n- `(?\u003c!...)` **Negative lookbehind**:前面不能是某東西\\n\\n實用例:抓密碼但要求至少一個數字 + 一個大寫字母\\n\\n```\\n^(?=.*\\\\d)(?=.*[A-Z]).{8,}$\\n```\\n\\n三個 lookahead 並聯,沒有任何字元被「消耗」,只是檢查條件。比寫多條正規表達式組合判斷簡潔太多。\"},{\"heading\":\"災難性回溯:會把瀏覽器卡死的寫法\",\"body\":\"**Nested quantifier**(巢狀量詞)幾乎一定踩雷。經典 anti-pattern:`(a+)+` `(a*)*` `(a|a)*`\\n\\n以 `(a+)+b` 配 `aaaaaaaaaaaaaaaaa` 為例:regex 引擎要試**所有「a 怎麼分組」的排列組合**才放棄,複雜度 O(2^n)。輸入只要再長一點點,瀏覽器就凍住(我自己中過 — 用 30 字元測試字串跑了 8 秒)。\\n\\n**怎麼避免**:\\n\\n1. 用 **atomic group** `(?\u003e...)`(JS 不支援,Node ≥ 16 才支援,Java / .NET 支援)\\n2. 用 **possessive quantifier** `++` `*+`(同樣 JS 不支援)\\n3. **檢查你的 quantifier 沒有重疊**(`(\\\\w+)+` → 直接用 `\\\\w+`)\\n4. **限制輸入長度**(本站工具設 100,000 字元上限就是為了這個)\\n\\nJS 圈通常用 (3) + (4),從寫法上避免問題。\"},{\"heading\":\"JavaScript vs Python:常被踩的差異\",\"body\":\"- **行首行尾**:JS 沒有 `\\\\A` `\\\\Z`,要用 `^` `$` + `m` flag\\n- **Unicode**:JS 要加 `u` flag 才支援 `\\\\p{Letter}`,Python 預設就支援\\n- **Lookbehind**:**舊版 Safari \u003c 16.4 完全不支援 lookbehind**,你寫了線上就掛。一定要在 production 加 try / catch fallback\\n- **`re` vs `regex` 模組**(Python):標準 `re` 不支援 lookbehind 變長,要裝 `regex` 模組\\n- **Sticky flag `y`**:JS 有、Python 沒有 — 從固定位置開始 match,寫 lexer 用得到\"},{\"heading\":\"QA 真實場景\",\"body\":\"我自己常用 regex 的時候:\\n\\n- **nginx access log 解析**:抓 IP、status、response time → 算 p95(可以接到 [百分位計算工具](/zh-TW/tools/percentile))\\n- **API response body 驗證**:Robot Framework 的 `Should Match Regexp` 比 `Should Contain` 強太多\\n- **產測試資料**:`(\\\\d{4}) (\\\\d{4}) (\\\\d{4}) (\\\\d{4})` 這種格式驗證,要先確認自己產的 [信用卡測試資料](/zh-TW/tools/tw-test-data) 符合\\n- **Selenium 動態元素 ID**:抓 `userdata-([a-f0-9]{8})` 這種隨機後綴\\n- **錯誤訊息分類**:把 stack trace 用 regex 抓出 file path + line number 統計最常出問題的模組\"}],\"footer\":\"想試?把這篇用到的所有 pattern 貼到 [Regex 工具](/zh-TW/tools/regex) 跑,即時看命中。最常出意外的就是 lookbehind 在 Safari 上掛掉那個。\"},\"selector\":{\"title\":\"Selector 深入解析:CSS vs XPath、stable selector 原則、Playwright getByRole\",\"intro\":\"寫 E2E 自動化測試最痛的不是寫 step,是 selector 三天兩頭就壞。這篇整理我看過、寫過、修過的所有 selector 套路,以及 Playwright 為什麼推 role-based locator。\",\"sections\":[{\"heading\":\"CSS vs XPath:什麼時候用哪個\",\"body\":\"**CSS 適合**:\\n\\n- 結構單純、用 class / id / attribute 就能定位\\n- 速度比 XPath 快 30~50%(每個瀏覽器原生引擎都最佳化過 CSS)\\n- 可讀性更好,團隊熟悉度高\\n\\n**XPath 適合**:\\n\\n- 要用 text content 定位:`//button[text()=\\\"提交\\\"]`(CSS 直到 `:has()` 才有類似能力,Safari 16+ 才支援)\\n- 要回溯父元素:`//input/../label`(CSS 完全做不到)\\n- 複雜結構條件:「找有 class A 但兒子沒有 class B 的 div」\\n\\n**我的選法**:能用 CSS 就用 CSS。XPath 留給「定位 text 內容」「往上爬 parent」這兩種專屬場景。\"},{\"heading\":\"Stable selector 三原則(寫一次穩半年)\",\"body\":\"**1. 永遠優先 `data-testid`**:跟產品分離,UI 改版不會壞。Cypress / Playwright / Selenium 都認。\\n\\n```html\\n\u003cbutton data-testid=\\\"submit-payment\\\"\u003e立刻付款\u003c/button\u003e\\n```\\n\\n選擇器:`[data-testid=\\\"submit-payment\\\"]` — UI 改成 icon button 都還是這個。\\n\\n**2. 絕對避免 `nth-child` / `nth-of-type`**:列表項順序一變就壞,後端排序改一下就完蛋。\\n\\n**3. class name 用「語意 class」不用「樣式 class」**:`.btn-primary-rounded-lg-hover` 這種 Tailwind 拼出來的 class 隨時會改;改用 `.submit-button` 這種 semantic class。或乾脆走 data-testid。\\n\\n**4. ID 也不要太信**:很多 framework 會生 `id=\\\"react-aria-:r1:\\\"` 這種 hydration 後變動的 ID。可以用就用,不行就 fallback。\"},{\"heading\":\"Playwright 的 getByRole 為什麼是 game changer\",\"body\":\"傳統 selector 邏輯:「找 DOM 結構某個位置」 — 結構變就壞。\\n\\nPlaywright 的 `getByRole` 改成:「找 accessibility tree 上 role=button 且 accessible name 含『提交』的元素」。\\n\\n```ts\\npage.getByRole('button', { name: '提交' })\\n```\\n\\n優點:\\n\\n- **跟 visual 重組無關**:UI 把按鈕從右邊搬到左邊,測試還是過\\n- **跟 a11y 同步**:測試壞 = a11y 壞,順便發現可用性問題\\n- **跨框架**:不管你是 React / Vue / Angular,role 都一致\\n\\n隱性好處:逼你把 `\u003cdiv onClick\u003e` 改成 `\u003cbutton\u003e`,a11y 自動升等。\"},{\"heading\":\"動態渲染的時序問題\",\"body\":\"**最常見錯誤**:`waitForTimeout(2000)` — 死等 2 秒。網慢就 flake,網快就慢。\\n\\n**正確做法**:\\n\\n- Playwright:`await expect(page.getByText('成功')).toBeVisible()` — 內建 auto-wait,預設 5 秒輪詢\\n- Selenium:`WebDriverWait(driver, 10).until(EC.visibility_of_element_located(...))`\\n- Robot Framework:`Wait Until Element Is Visible    selector    timeout=10s`\\n\\n**進階**:等網路請求完\\n\\n```ts\\nawait page.waitForResponse(resp =\u003e\\n  resp.url().includes('/api/payment') \u0026\u0026 resp.status() === 200\\n);\\nawait expect(page.getByText('付款成功')).toBeVisible();\\n```\\n\\n這比等元素出現更精準 — 元素可能因為快取秒出,但實際 API 還沒回。\"},{\"heading\":\"跨瀏覽器一致性陷阱\",\"body\":\"- **`:has()` selector**:Safari 16+、Chrome 105+、Firefox 121+ 才支援。寫了你以為穩,Firefox 100 就掛\\n- **`text=` Playwright pseudo-locator**:這是 Playwright 自家語法,直接貼到瀏覽器 console 不會 work\\n- **`/text()=\\\"...\\\"` XPath**:Safari 對某些 XPath 函數實作不完整,真的要跨瀏覽器測就先用 [Selector tester 工具](/zh-TW/tools/selector) 在不同瀏覽器跑一次\\n- **shadow DOM**:預設 CSS selector **穿不進** shadow DOM,Playwright 的 locator 會自動穿,但你貼到 DevTools 不會\"}],\"footer\":\"寫測試前先到 [Selector 測試工具](/zh-TW/tools/selector) 用 HTML 片段試:CSS / XPath 切換,確認 selector 真的命中你以為的元素。\"},\"twdata\":{\"title\":\"台灣測試資料深入解析:身分證演算法、統編 7 位規則、Luhn 信用卡\",\"intro\":\"在金融科技、電商、政府專案做 QA,大量資料測試是日常 — 但用真實資料測試在 GDPR / 個資法下是違規的。這篇講為什麼需要假資料、台灣官方校驗演算法怎麼算,以及這些資料在 QA 流程的真實應用。\",\"sections\":[{\"heading\":\"為什麼一定要用假資料(合規面)\",\"body\":\"台灣個資法第 6 條明確規定:**個人身分證字號屬於敏感個資,非經本人同意不得蒐集、處理、利用**。內部開發 / 測試環境若使用真實身分證號(即使是員工的),被稽核出來就是違規。\\n\\n實務上:\\n\\n- **金融業 QA**:KYC 流程測試需要大量身分證,不能用真的 → 必須產合法格式的假資料\\n- **電商**:會員系統壓測 1 萬筆假帳號,身分證要過格式驗證\\n- **政府 / 醫療 API 整合**:沙箱環境需要過格式檢查的測試資料\\n- **風控規則測試**:模擬不同年齡 / 性別 / 地區的客群\\n\\n**重點**:假資料要「格式合法」(過得了驗證器),但**內容是假的**(對應的真人不存在)。\"},{\"heading\":\"台灣身分證演算法(內政部官方公式)\",\"body\":\"10 碼:`[A-Z]` + `[12]` + 8 個數字。\\n\\n**步驟**:\\n\\n1. **字母對應**:A=10、B=11、C=12…I=34、O=35、X=30、Y=31、Z=33(I/O 跳出順序是歷史原因)\\n2. 把字母拆成兩位數 `N1 N2`\\n3. 加權公式:`N1 × 1 + N2 × 9 + d1 × 8 + d2 × 7 + d3 × 6 + d4 × 5 + d5 × 4 + d6 × 3 + d7 × 2 + d8 × 1`\\n4. 校驗碼 = `(10 - 加權和 mod 10) mod 10`\\n5. 第 2 碼:**1 = 男、2 = 女**(新住民會用 8、9,本工具不產生)\\n\\n例:`A123456789`,A → 10、9 → 18(權重 1+9)、123456789 加權 → 總和 % 10 → 應為 0 才合法。\"},{\"heading\":\"統一編號(8 位)的官方規則\",\"body\":\"8 位數,加權 `[1, 2, 1, 2, 1, 2, 4, 1]`。\\n\\n**演算法**:\\n\\n1. 每位數乘對應權重\\n2. 若乘積 ≥ 10,**個位與十位數相加**(例:7 × 2 = 14 → 1 + 4 = 5)\\n3. 全部相加得 sum\\n4. **若 sum mod 10 == 0** → 合法\\n5. **特殊情況**:若**第 7 位是 7**,則 **(sum + 1) mod 10 == 0** 也算合法\\n\\n這個第 7 位是 7 的特殊規則,是國稅局歷史上為了避免亂碼撞號加的。**自己寫驗證器一定要記得這條,否則會誤殺合法統編。**\\n\\n本站 [TW 測試資料工具](/zh-TW/tools/tw-test-data) 的演算法跟國稅局官方一致,可以直接拿去過大多數驗證器。\"},{\"heading\":\"Luhn 信用卡演算法(全球通用)\",\"body\":\"Luhn 是國際信用卡產業通用的校驗碼演算法,Visa / Mastercard / JCB / Amex 都用。也用在 IMEI、加拿大社會保險號等。\\n\\n**步驟**(從右往左):\\n\\n1. **最右一位是校驗碼**,先放著\\n2. 從右二開始,**每隔一位數字 × 2**\\n3. 若 × 2 後 \u003e 9,**減 9**(等價於個位 + 十位)\\n4. 所有數字(含校驗碼)相加\\n5. 總和 % 10 == 0 → 合法\\n\\n例:`4532015112830366`\\n\\n```\\n4 5 3 2 0 1 5 1 1 2 8 3 0 3 6 6\\n×1 2 1 2 1 2 1 2 1 2 1 2 1 2 1 2  (從右算 — 校驗碼這位是 ×1)\\n```\\n\\n**Stripe 測試卡號**:`4242424242424242`(Visa)、`5555555555554444`(Mastercard)— 這些都過 Luhn 但都是專門的測試號碼,Stripe 不會真的扣錢。\"},{\"heading\":\"QA 真實使用場景\",\"body\":\"我在金融科技 QA 工作中,這些假資料每天都用:\\n\\n- **開戶流程壓測**:產 10000 筆過驗證的身分證 + 統編 + 信用卡,用 [JMeter / k6](/zh-TW/tools/percentile) 跑開戶 API\\n- **風控規則回歸測試**:用不同**性別 / 地區字母**的身分證,確認規則沒誤判\\n- **海外用戶 onboarding**:測**新住民身分證**(2 開頭非 1/2)走特殊流程的分支\\n- **信用卡綁定**:測 Visa / Master / JCB **不同卡頭**的 BIN 識別邏輯\\n- **資料庫 seed**:測試環境一開機,seed 100 筆假帳號讓 QA 跟 PM 進去 demo\\n\\n**重要**:`tw-test-data` 工具上的資料**僅供格式測試**,不要拿去申辦業務、開戶、註冊真實服務 — 那就變偽造文書。\"}],\"footer\":\"立刻試:用 [TW 測試資料工具](/zh-TW/tools/tw-test-data) 產 100 筆身分證,把結果丟到你公司的驗證器,看是否 100% 通過。\"},\"percentile\":{\"title\":\"深入解析:p95、p99 與 Apdex 怎麼讀\",\"intro\":\"QA / SRE 跑出第一批壓測結果,通常第一個問題是:「這數字到底正常嗎?」這篇從實作角度說明為什麼業界把百分位數當作 SLO 的核心,以及怎麼解讀。\",\"sections\":[{\"heading\":\"為什麼是 p95 / p99 而不是平均值?\",\"body\":\"把 100 筆 response time 排序,p95 = 第 95 筆,意思是「95% 的請求都比這個快」。平均值會被少數異常值大幅拉動,但對使用者體驗來說,**最慢的那 5% 才是會抱怨的人**。\\n\\n舉個例子:99 筆都是 100ms、1 筆是 10000ms,平均 = 199ms 看起來很好,但 p99 = 10000ms 才反映真實有 1% 的人等了 10 秒。SLO 用平均值定 → 永遠不會超標、永遠不會修最該修的問題。\"},{\"heading\":\"Apdex 是什麼?T 怎麼設?\",\"body\":\"Apdex 把每筆請求分三類:**滿意**(\u003c T)、**容忍**(T ~ 4T)、**挫敗**(\u003e 4T)。公式:`(滿意數 + 容忍數 / 2) / 總數`,範圍 0~1。\\n\\n業界常用的 T 值:\\n\\n- **API 後端**:T = 200~500ms\\n- **網頁初始載入**:T = 1s(對應 LCP 推薦值)\\n- **互動類請求**(form submit、search):T = 500ms\\n- **重型操作**(報表、檔案上傳):T = 3~5s\\n\\nApdex \u003c 0.7 通常代表使用者體驗開始顯著惡化,\u003c 0.5 代表大多數請求落在容忍區之外。\"},{\"heading\":\"三種典型曲線怎麼判讀\",\"body\":\"**平穩型**:p50 / p90 / p95 接近,例如 120 / 180 / 200ms。系統健康,沒有 outliers。\\n\\n**長尾型**:p50 = 200ms 但 p95 = 2000ms。多數請求很快,但有少數慢請求。常見原因:DB 慢查詢、外部 API 偶爾超時、GC 停頓。優先處理:**找出長尾再優化**,降平均值幾乎沒用。\\n\\n**雪崩型**:p50 / p90 / p95 全部一起拉高,例如 800 / 1500 / 3000ms。系統整體飽和,通常是 CPU / 連線池打滿。處理方式:**加機器或限流**。\"},{\"heading\":\"常見錯誤\",\"body\":\"1. **樣本數太少還算 p99**:n = 100 算 p99 是抓最慢那一筆,單一 outlier 就會跳。p99 建議至少 1000 筆樣本才有統計意義。\\n\\n2. **用平均值定 SLO**:幾乎所有 SLO 業界標準(Google SRE Book、AWS Well-Architected)都用 p95 / p99,不用平均。\\n\\n3. **忘了標 percentile 演算法**:linear interpolation(R-7,Excel / 本工具預設)跟 nearest-rank(R-1)在小樣本下會差幾 ms。報告裡標清楚用哪種。\\n\\n4. **跨時段比較沒對齊樣本數**:深夜 100 筆樣本的 p99 vs 尖峰 10000 筆樣本的 p99 沒有可比性,要先把樣本切成相同大小或固定時間窗。\"},{\"heading\":\"跟監測工具串起來\",\"body\":\"把這個工具當作「分析單次測試結果」的快速通道,長期監控應該丟到 **Grafana / Datadog / New Relic** 等。在那些工具裡設 alert 規則:\\n\\n- `p95 \u003e 500ms 持續 5 分鐘` → Slack 通知\\n- `Apdex \u003c 0.7 持續 10 分鐘` → PagerDuty 叫起來\\n\\nJMeter / k6 跑完後丟結果到本頁快速看一眼,如果指標已經爆掉、再去深入翻 Grafana 找原因 — 這是日常 QA / SRE 流程。\"}],\"footer\":\"用工具測一次:把你最近一次 JMeter 結果的 Summary Report 那欄 response time 複製到上面工具,30 秒就有 p95 / p99 / Apdex。\"}},\"aboutPage\":{\"title\":\"關於這個站\",\"intro\":\"Hi,我是 **Mark Liu**(劉紋瑋),金融科技 QA 工程師,業餘把工作時用得最多的小工具刻成這個站。\",\"lastUpdated\":\"最後更新:2026-06-12\",\"background\":{\"title\":\"我的背景\",\"body\":\"我目前在台灣金融科技公司負責測試框架建置、API / Mobile 自動化測試、QA 流程設計。日常工具:\\n\\n- **Robot Framework**(API + Web E2E)\\n- **Playwright**(Web 自動化)\\n- **Appium**(iOS / Android 自動化)\\n- **JMeter / k6**(壓測 + 百分位分析)\\n- **Postman / cURL / HTTPie**(API 測試)\\n- **Docker / Jenkins / GitHub Actions**(CI/CD)\\n\\n所以這個站上的工具,大多是我自己每天會用到、痛點很真實的東西(像 [百分位計算](/zh-TW/tools/percentile)、[JWT decoder](/zh-TW/tools/jwt)、[Selector 測試器](/zh-TW/tools/selector)、[台灣測試資料產生器](/zh-TW/tools/tw-test-data))。\"},\"whyThisSite\":{\"title\":\"為什麼做這個站\",\"body\":\"做 QA 久了發現幾件事:\\n\\n1. **小工具大多需要上傳檔案到別人 server** — 公司機密文件、客戶資料根本不能用\\n2. **網站塞滿廣告** — 滑半天找不到輸入框\\n3. **多語言 SEO 中文版往往做得很差** — 台灣 / 香港 QA 找中文資源常常只能看到簡體\\n\\n所以我給這個站定了三條原則:\\n\\n- **不上傳**:檔案永遠不離開你的瀏覽器,所有運算在本機 JavaScript / WebAssembly 跑\\n- **不收費 / 不限制**:沒有 Pro 方案、沒有水印、沒有「免費 3 次後付費」\\n- **不放廣告**:沒有 Google Ads / AdSense / 任何 affiliate 廣告(只有非廣告類的 GA4 流量分析)\\n\\n[隱私說明](/zh-TW/privacy) 完整列出資料流向,**全部原始碼公開可審計**。\"},\"openSource\":{\"title\":\"開源 + 透明\",\"body\":\"整個站 100% 開源,你可以親自確認沒有上傳邏輯:\\n\\n- **原始碼**:[github.com/MarkwwLiu/dev](https://github.com/MarkwwLiu/dev)\\n- **技術棧**:Next.js 16 + Tailwind v4 + next-intl + Vercel\\n- **License**:Proprietary(原始碼公開但保留所有權)\\n\\n發現 bug、想增加功能、覺得哪個工具該補,直接到 GitHub 開 Issue 或 PR。\"},\"contact\":{\"title\":\"聯絡\",\"body\":\"- **GitHub Issue**:[MarkwwLiu/dev/issues](https://github.com/MarkwwLiu/dev/issues)(優先,公開可追蹤)\\n- **Email**:ak790718@gmail.com\\n- **其他專案**:[Stackr](https://stackr.9niche.com)(個人 / 小團隊票務系統)、[cv.9niche.com](https://cv.9niche.com)(履歷)\"}},\"privacyPage\":{\"title\":\"隱私說明\",\"intro\":\"本站所有工具的設計原則是「檔案永不離開你的瀏覽器」。下面說明資料流向、唯一的例外、以及平台層級的日誌情況。\",\"lastUpdated\":\"最後更新:2026-06-12\",\"clientSide\":{\"title\":\"工具如何處理你的資料\",\"body\":\"本站每一個工具(顏色轉換、PDF 合併壓縮、HEIC 轉檔、圖片 base64…)**完全在你的瀏覽器內** 用 JavaScript / WebAssembly 處理。\\n\\n運作流程:\\n\\n1. 你拖入或貼上資料\\n2. 瀏覽器讀進 JavaScript 記憶體\\n3. 本機 CPU / WASM 處理\\n4. 直接產出檔案讓你下載\\n\\n**整個過程沒有任何 HTTP 上傳**到伺服器,我們連看都看不到你處理的內容。當你關閉分頁或重新整理,瀏覽器自動釋放所有記憶體。\"},\"exceptions\":{\"title\":\"唯一的例外:tw-test-data 密碼門\",\"body\":\"`/tools/tw-test-data`(台灣測試資料產生器)為防止濫用,加了密碼門檻。這個 API endpoint **確實** 會記錄:\\n\\n- 你嘗試的密碼字串(只送 Telegram 通知,不存資料庫)\\n- 你的 IP 與 User Agent\\n- 失敗次數(用 HMAC 簽章的 cookie 計算)\\n\\n**但**:即使通過密碼,後續產生身分證、信用卡等假資料的過程,**依舊完全在你的瀏覽器** 內跑,我們從不接觸產生的內容。\"},\"platformLogs\":{\"title\":\"平台層級日誌(Vercel)\",\"body\":\"本站部署在 Vercel,平台會自動記錄 HTTP 請求 metadata(IP、URL、status code、response time),這是 CDN / serverless 平台的標配,**無法移除**。Vercel 不會記錄請求 body / 上傳檔案內容(因為根本就沒有 body)。\\n\\n我們**有啟用** Vercel Analytics 與 Speed Insights:\\n\\n- 只記錄頁面瀏覽量、Web Vitals 效能數據\\n- **不記錄個人身分資訊**(GDPR-friendly)\\n- 不使用 cookie 識別個別使用者\"},\"thirdParty\":{\"title\":\"第三方服務 / Cookie\",\"body\":\"本站使用以下分析工具,**均不涉及廣告再行銷**:\\n\\n- **Vercel Analytics + Speed Insights**:記錄頁面瀏覽量與 Web Vitals 效能,不使用 cookie 識別個別使用者(GDPR-friendly)\\n- **Google Analytics 4(GA4)**:記錄頁面瀏覽量、瀏覽器/裝置/國家/流量來源,用 cookie 識別瀏覽 session\\n\\nGA4 會在你瀏覽器設定的 cookie:\\n\\n- `_ga`(2 年,匿名訪客 ID)\\n- `_ga_W6WN0CFEPB`(2 年,session 狀態)\\n\\n本站**沒有**:\\n\\n- 沒有 Facebook / X / TikTok pixel\\n- 沒有 Google Ads / AdSense 廣告\\n- 沒有跨站追蹤 cookie(third-party cookies)\\n- 沒有客戶端錯誤上報(Sentry 之類)\\n- 沒有 affiliate / referral tracking\\n\\n**想停用 GA?** 安裝 [Google Analytics opt-out 外掛](https://tools.google.com/dlpage/gaoptout)、任何擋廣告擴充(uBlock Origin)、或使用內建追蹤防護的瀏覽器(Brave / Firefox 嚴格模式)。**本站功能不會受影響,所有工具完全可用**。\\n\\n本站本身設定的 cookie:\\n\\n- `theme`:深淺模式偏好(本機儲存,不送回伺服器)\\n- `twdata_*`:`tw-test-data` 工具的密碼門檻簽章(HMAC,僅該工具用)\"},\"contact\":{\"title\":\"聯絡 / 回報\",\"body\":\"對隱私說明有疑問,或發現本站工具違反上述聲明,請至 [MarkwwLiu/dev](https://github.com/MarkwwLiu/dev) 開 Issue。\\n\\n所有原始碼公開可審計 — 你可以親自確認沒有上傳邏輯。\"}},\"tools\":{\"title\":\"工具\",\"subtitle\":\"依分類瀏覽,點擊任一卡片立即使用。\",\"searchPlaceholder\":\"搜尋工具(名稱 / 說明)…\",\"searchHint\":\"Cmd-K 快速聚焦\",\"recentLabel\":\"最近新增\",\"recentTag\":\"NEW\",\"allLabel\":\"全部分類\",\"totalLabel\":\"{n} 個工具,全部純前端、檔案不離開瀏覽器\",\"countResults\":\"{found} / {total} 個工具命中\",\"noResults\":\"沒有符合搜尋條件的工具,試試別的關鍵字?\",\"clearSearch\":\"清除搜尋\",\"toolsCount\":\"{n} 個工具\",\"expandAll\":\"展開全部\",\"collapseAll\":\"收合全部\",\"categories\":{\"media\":\"圖片 / PDF / 影音\",\"dev-api\":\"開發 / API\",\"data-format\":\"資料 / 格式 / 文字\",\"visual\":\"視覺 / CSS\",\"color\":\"顏色 / 無障礙\",\"reference\":\"速查 / 參考\"},\"categoryDescriptions\":{\"media\":\"圖片裁切壓縮、PDF 合併分割加浮水印、GIF 動畫、SVG 最佳化、Favicon — 純前端不上傳\",\"dev-api\":\"JWT、Regex、cURL、UUID、Hash、Cron、Mock API、密碼強度等開發者剛需\",\"data-format\":\"JSON / CSV / Markdown / 時區 / Diff / 編解碼,各種資料與文字轉換\",\"visual\":\"CSS 漸層、陰影、毛玻璃、clip-path、cubic-bezier、字級系統等視覺工具\",\"color\":\"色碼轉換、Tailwind 色階、對比檢查、色盲模擬 — 無障礙設計必備\",\"reference\":\"效能百分位、HTTP 狀態碼、bundle size 查詢、QA 速查表\"},\"percentile\":{\"name\":\"百分位計算\",\"summary\":\"貼一排 response time → p50/p90/p95/p99 + Apdex\"},\"jwt\":{\"name\":\"JWT decoder / generator\",\"summary\":\"解析 JWT header / payload / 過期時間,可重新簽章\"},\"selector\":{\"name\":\"CSS / XPath Selector 測試器\",\"summary\":\"貼 HTML + selector → 即時 highlight 命中元素\"},\"twdata\":{\"name\":\"台灣測試資料產生器\",\"summary\":\"身分證、統編、手機、信用卡(Luhn)合法假資料\"},\"cheatsheet\":{\"name\":\"測試框架 Cheatsheet\",\"summary\":\"Robot Framework / Playwright / Appium 速查\"},\"regex\":{\"name\":\"Regex builder 即時測試\",\"summary\":\"pattern + 測試字串 → 即時 highlight + capture groups\"},\"curl\":{\"name\":\"cURL ↔ fetch ↔ Python 互轉\",\"summary\":\"貼 cURL 指令 → 一鍵轉 fetch / Python requests / HTTPie\"},\"timex\":{\"name\":\"Unix 時間 + 時區轉換\",\"summary\":\"秒 / 毫秒 / ISO 互轉,任意時區即時顯示\"},\"jsonx\":{\"name\":\"JSON formatter + Schema validator\",\"summary\":\"格式化 / minify / 排序 + JSON Schema 驗證\"},\"mockapi\":{\"name\":\"Mock API 設計器\",\"summary\":\"設計 endpoint → 輸出 Mockoon / Playwright / Postman / json-server config\"},\"colorconv\":{\"name\":\"顏色格式轉換器\",\"summary\":\"hex / rgb / hsl / oklch / oklab 即時雙向轉換,附近似 Tailwind class\"},\"imgbase64\":{\"name\":\"圖片 ↔ Base64 互轉\",\"summary\":\"拖曳圖片 → data URI / 原始 base64 / HTML / CSS 一鍵複製;貼 base64 → 預覽 + 下載\"},\"heic\":{\"name\":\"HEIC → JPG / PNG / WebP\",\"summary\":\"iPhone 拍的 .heic 一鍵轉檔,支援批次處理 + ZIP 下載,完全在瀏覽器跑\"},\"img2pdf\":{\"name\":\"圖片 → PDF\",\"summary\":\"多張圖片拖曳排序合併成 PDF,可調紙張 / 方向 / 多 up / 邊距 / 畫質,純前端不上傳\"},\"pdfsplit\":{\"name\":\"PDF 合併 / 分割 / 抽頁\",\"summary\":\"多檔合併、依範圍分割成多檔 ZIP、抽出指定頁成新檔。純前端,機密文件 / 合約適用\"},\"pdfcompress\":{\"name\":\"PDF 壓縮\",\"summary\":\"兩種模式 — 無損輕量壓縮(保留文字)或重壓 rasterize(50-80% 縮減,文字變圖)\"},\"pdfedit\":{\"name\":\"PDF 頁面編輯\",\"summary\":\"縮圖網格中選取頁面 → 旋轉 / 刪除 / 複製 / 重排,輸出新 PDF。純前端\"},\"palette\":{\"name\":\"Tailwind 色階產生器\",\"summary\":\"從一個品牌色生成完整 50-950 色階,輸出 v4 @theme / v3 config / CSS variables\"},\"imgsize\":{\"name\":\"圖片壓到指定大小\",\"summary\":\"二分搜尋 JPEG 畫質,壓到 300KB / 500KB / 2MB 等指定大小。報名 / 履歷 / 政府表單必備\"},\"pdfunlock\":{\"name\":\"PDF 解鎖 / 移除密碼\",\"summary\":\"移除 PDF 列印 / 複製限制(無需密碼),或用你自己的密碼解開加密 PDF\"},\"bezier\":{\"name\":\"cubic-bezier 編輯器\",\"summary\":\"視覺化 CSS easing 曲線,SVG 拖曳兩個控制點,輸出 CSS / Tailwind v4 / Framer Motion / @keyframes\"},\"favicon\":{\"name\":\"Favicon 全套產生器\",\"summary\":\"三模式輸入(emoji / 文字 / 上傳),一次輸出 favicon.ico、PNG 全尺寸、PWA maskable、HTML snippet,打包 ZIP\"},\"mdtrans\":{\"name\":\"Markdown 批次翻譯\",\"summary\":\"自帶 OpenAI / Anthropic / Google API key,批次翻譯 .md 檔,保留 frontmatter / code / 連結結構\"},\"contrast\":{\"name\":\"WCAG 對比 + APCA 檢查器\",\"summary\":\"前景背景色即時對比 (WCAG 2.1 + APCA Lc),不合格時自動推薦最近合格色\"},\"gradient\":{\"name\":\"CSS 漸層編輯器\",\"summary\":\"linear / radial / conic 三種漸層即時編輯,輸出 CSS / Tailwind v4 任意 class / SVG\"},\"typescale\":{\"name\":\"Type Scale + Fluid clamp() 字級產生器\",\"summary\":\"用 modular ratio + 雙視窗 clamp() 算出整套字級,輸出 Tailwind v4 @theme / CSS vars / SCSS\"},\"boxshadow\":{\"name\":\"box-shadow 編輯器(多層 + Material elevation)\",\"summary\":\"多層陰影視覺化編輯,內建 Tailwind 5 級 + Material elevation 9 級 preset\"},\"glassneu\":{\"name\":\"Glassmorphism + Neumorphism 二合一\",\"summary\":\"毛玻璃(backdrop-filter)+ 柔質感(雙陰影 raised/inset)一站搞定,3 種預覽背景\"},\"qr\":{\"name\":\"QR Code 產生器(可加 Logo)\",\"summary\":\"支援 URL / WiFi / vCard / Email,可自訂顏色 + 中央 Logo,輸出 PNG / SVG\"},\"pdfwm\":{\"name\":\"PDF 加浮水印 + 頁碼\",\"summary\":\"文字 / 圖片浮水印,可平鋪斜紋整頁、調整透明度與旋轉,並自動加上頁碼。純前端\"},\"codefmt\":{\"name\":\"程式碼美化 / 壓縮(10 種語言)\",\"summary\":\"Prettier 引擎美化 JS / TS / CSS / HTML / JSON / Markdown / YAML,並可一鍵 minify JSON / CSS / HTML。自動判語言\"},\"mdedit\":{\"name\":\"Markdown 編輯器(即時預覽)\",\"summary\":\"雙欄即時預覽,支援 GFM 表格 / 任務清單 / 程式區塊,輸出 HTML 與含樣式的單檔 HTML\"},\"urlenc\":{\"name\":\"URL / Base64 / HTML 編解碼\",\"summary\":\"六種格式即時互轉 — URL、URI component、Base64、Base64URL、HTML entities、Unicode escape。後端 / 爬蟲 / debug 神器\"},\"jsondiff\":{\"name\":\"JSON 差異視覺化(deep diff)\",\"summary\":\"兩份 JSON 並排即時 diff,路徑 + 新增 / 移除 / 變更顏色高亮,陣列 by index 比對。後端 / API / config 比對神器\"},\"csv\":{\"name\":\"CSV / TSV 表格預覽 + 互轉\",\"summary\":\"RFC 4180 解析,表格化預覽 + 欄位統計(unique / empty / numeric),輸出 JSON / TSV / Markdown / CSV\"},\"imgcrop\":{\"name\":\"圖片裁切(自由 / 比例 / 圓形)\",\"summary\":\"拖框視覺化裁切,鎖固定比例(1:1 / 16:9 / 3:2…)、圓形 mask,輸出 PNG / JPG / WebP,可指定輸出寬度\"},\"clippath\":{\"name\":\"CSS clip-path 編輯器\",\"summary\":\"拖點生成 polygon / circle / ellipse / inset,9 種預設(三角 / 六邊 / 星 / 箭頭…),輸出 CSS / Tailwind v4 / SVG path\"},\"mermaid\":{\"name\":\"Mermaid 流程圖編輯器\",\"summary\":\"純文字寫流程圖 / 序列圖 / 甘特圖 / 心智圖 / 類別圖 / 圓餅圖,即時預覽,下載 SVG / PNG。docs / readme / blog 神器\"},\"cssgrid\":{\"name\":\"CSS Grid 視覺化產生器\",\"summary\":\"拖點編輯 rows / cols / gap / 命名 areas,即時預覽 + 一鍵輸出 CSS。內建 Holy Grail / Dashboard 12-col 等範本\"},\"pdf2img\":{\"name\":\"PDF 拆成圖片(PNG / JPG / WebP)\",\"summary\":\"PDF 每頁渲染為高解析圖片,可選頁數範圍 + 倍率,多頁打包成 ZIP。純前端,合約 / 報表 / 機密文件適用\"},\"gifmake\":{\"name\":\"多張圖 → GIF 動畫\",\"summary\":\"拖入多張圖片,可拖曳排序、改 delay / 循環 / 尺寸 / 顏色數,純前端 GIF encoder(gifenc),不上傳\"},\"imgresize\":{\"name\":\"圖片改尺寸(等比 / 上限 / 百分比)\",\"summary\":\"4 種模式:等比塞進指定框、限定最長邊、百分比縮放、強制指定尺寸,輸出 JPG / PNG / WebP。預設防放大,純前端\"},\"hashes\":{\"name\":\"Hash 計算(MD5 / SHA-1/256/384/512)\",\"summary\":\"文字即時 hash + 檔案完整性校驗,5 種演算法同時輸出。WebCrypto + 自實作 MD5,純前端\"},\"uuid\":{\"name\":\"UUID 產生器(v4 / v7 批次)\",\"summary\":\"一次產生 1-1000 個 UUID v4 隨機或 v7 時序版,大小寫 / 去連字符 / 加大括號可選。後端 / 測試資料剛需\"},\"lorem\":{\"name\":\"假文產生器(拉丁 / 繁中 / Tech)\",\"summary\":\"三種詞庫:經典 Lorem Ipsum、繁中假文(設計師剛需)、英文 Tech 詞彙。輸出字 / 句 / 段,seed 可重現\"},\"ts\":{\"name\":\"Unix timestamp ↔ 多時區\",\"summary\":\"貼 epoch(秒 / 毫秒)或 ISO 字串,即時顯示多時區當地時間 + 相對時間。後端 log debug 神器\"},\"textdiff\":{\"name\":\"文字 diff(行對比)\",\"summary\":\"純文字 LCS 演算法行 diff,雙欄並排 + 新增 / 移除 / 變更分色,可忽略空白 / 大小寫,輸出 unified diff\"},\"casecvt\":{\"name\":\"命名格式互轉\",\"summary\":\"camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / dot / path 等 9 種命名格式一次列出,任貼任轉\"},\"slugify\":{\"name\":\"Slugify(URL 友善化,含 CJK)\",\"summary\":\"把任意標題轉成 URL slug:去重音 / 統一大小寫 / 切割標點,中日韓字保留或可選去除,支援長度截斷\"},\"emoji\":{\"name\":\"Emoji 資訊查詢\",\"summary\":\"250+ 常用 emoji 速查 + 分類過濾,單擊看 codepoint / shortcode / HTML entity,支援貼 emoji 反查\"},\"vid2gif\":{\"name\":\"影片轉 GIF\",\"summary\":\"MP4 / WebM / MOV 拖入,選秒數區間與 fps,瀏覽器內 seek + canvas + gifenc 輸出 GIF。檔案不上傳\"},\"httpcodes\":{\"name\":\"HTTP 狀態碼大全\",\"summary\":\"60+ 個 HTTP 狀態碼速查,5 分類過濾、即時搜尋(輸入數字或關鍵字),附 RFC 參考與常見誤用提示\"},\"regexr\":{\"name\":\"正則替換 + 捕捉組預覽\",\"summary\":\"三欄即時:pattern / replacement / input,捕捉組 $1 $2 / 命名群組 $\u003cname\u003e 預覽,所有 flags 可調,跟既有 regex 工具互補\"},\"cron\":{\"name\":\"Cron 表達式視覺化\",\"summary\":\"5 欄拆解 + 自然語言描述 + 下 N 次觸發時間預覽。支援 @daily 等 alias、月份 / 星期英文名、step、range\"},\"pwstrength\":{\"name\":\"密碼強度 + 破解時間估算\",\"summary\":\"純前端熵估算 + 5 種攻擊者破解時間(從 rate-limited 到 GPU 暴力),弱模式偵測,密碼絕不離開瀏覽器\"},\"tokens\":{\"name\":\"AI Token 估算器(GPT / Claude / Gemini)\",\"summary\":\"貼 prompt 估算 tokens 數量與 5 種模型的成本,即時看是否超過 context window,AI 預算必備\"},\"json2ts\":{\"name\":\"JSON 推 TypeScript type\",\"summary\":\"貼 JSON 即時推 type / interface,自動命名巢狀型別、合併陣列共同 shape、識別 optional 欄位、支援 readonly\"},\"cvd\":{\"name\":\"色盲模擬器(8 種 + 正常)\",\"summary\":\"Brettel / Machado 矩陣模擬 8 種色盲,色票或圖片同時並排顯示。設計無障礙界面必備\"},\"svgo\":{\"name\":\"SVG 最佳化\",\"summary\":\"純前端 SVG 瘦身:移除註解 / metadata / 編輯器屬性 / 預設值、空 group、捨入小數,前後並排預覽 + 顯示節省 %\"},\"bundle\":{\"name\":\"npm 套件大小(bundle size)查詢\",\"summary\":\"查 minified / gzip 大小 + 相依數 + tree-shake 狀況,多套件可並排比較。前端選 dep 必看\"}},\"relatedTools\":{\"title\":\"相關工具\"},\"common\":{\"input\":\"輸入\",\"output\":\"輸出\",\"copy\":\"複製\",\"copied\":\"已複製\",\"clear\":\"清空\",\"generate\":\"產生\",\"back\":\"返回\",\"search\":\"搜尋\"},\"percentile\":{\"title\":\"百分位計算\",\"description\":\"貼上一排 response time(逗號、空白或換行分隔),即時計算 p50 / p90 / p95 / p99 與 Apdex。\",\"inputLabel\":\"Response times(毫秒)\",\"placeholder\":\"120, 145, 168, 200, 230, 280, 340, 410, 520, 800\",\"count\":\"樣本數\",\"min\":\"最小\",\"max\":\"最大\",\"mean\":\"平均\",\"median\":\"中位數\",\"apdex\":\"Apdex (T={t}ms)\",\"apdexHint\":\"Apdex = (滿意數 + 容忍數 / 2) / 總樣本。T 為滿意門檻,4T 為容忍門檻。\"},\"jwt\":{\"title\":\"JWT decoder / generator\",\"description\":\"解析 JWT 三段內容、檢查過期時間;也可以給 secret 重新簽章。資料只在瀏覽器運算。\",\"decode\":\"解碼\",\"encode\":\"簽章\",\"tokenLabel\":\"JWT Token\",\"secretLabel\":\"Secret(HS256)\",\"headerLabel\":\"Header\",\"payloadLabel\":\"Payload\",\"signatureLabel\":\"Signature\",\"expired\":\"已過期\",\"valid\":\"有效\",\"noExp\":\"未設定 exp\",\"invalidToken\":\"無法解析此 JWT\"},\"selector\":{\"title\":\"CSS / XPath Selector 測試器\",\"description\":\"貼 HTML 與 selector,即時看到命中哪些元素,並列出 outerHTML 預覽。\",\"htmlLabel\":\"HTML\",\"selectorLabel\":\"Selector\",\"mode\":\"模式\",\"css\":\"CSS\",\"xpath\":\"XPath\",\"matches\":\"命中元素\",\"noMatch\":\"沒有命中\",\"error\":\"Selector 語法錯誤\"},\"twdata\":{\"title\":\"台灣測試資料產生器\",\"description\":\"產出格式合法的身分證字號、統編、行動電話與信用卡卡號(Luhn 通過)。僅供測試,請勿用於真實業務。\",\"type\":\"類型\",\"count\":\"筆數\",\"gender\":\"性別\",\"male\":\"男\",\"female\":\"女\",\"any\":\"不指定\",\"id\":\"身分證字號\",\"tax\":\"統一編號\",\"phone\":\"行動電話\",\"credit\":\"信用卡(Luhn)\",\"gate\":{\"title\":\"請輸入存取密碼\",\"subtitle\":\"為了避免被自動化濫用,本工具改為密碼制。需要 access 請與站長聯繫。\",\"passwordLabel\":\"密碼\",\"submit\":\"進入\",\"submitting\":\"驗證中…\",\"wrong\":\"密碼錯誤\",\"remaining\":\"再失敗 {n} 次將鎖定 IP 24 小時\",\"banned\":\"你已被鎖定,請 24 小時後再試,或與站長聯繫。\",\"serverError\":\"伺服器錯誤,請稍後重試\",\"notice\":\"⚠️ 為了防止濫用,所有驗證事件(成功 / 失敗 / 鎖定)會通知站長,並記錄 IP 與 User Agent。請勿嘗試暴力破解。\"}},\"cheatsheet\":{\"title\":\"測試框架 Cheatsheet\",\"description\":\"Robot Framework / Playwright / Appium 常用語法速查。\",\"framework\":\"框架\",\"searchPlaceholder\":\"搜尋指令或描述...\"},\"regex\":{\"title\":\"Regex builder 即時測試\",\"description\":\"貼 pattern + 測試字串,即時看到命中 highlight、capture groups 與 named groups。\",\"patternLabel\":\"Pattern\",\"flagsLabel\":\"Flags\",\"inputLabel\":\"測試字串\",\"highlighted\":\"命中\",\"groups\":\"Capture groups\",\"gAlways\":\"(g 永遠開啟)\",\"error\":\"錯誤\"},\"curl\":{\"title\":\"cURL ↔ fetch ↔ Python 互轉\",\"description\":\"貼 cURL 指令,自動轉成 fetch / Python requests / HTTPie。支援多行 \\\\ 續行、單雙引號。\",\"curlLabel\":\"cURL 指令\",\"targetLabel\":\"目標格式\",\"parseError\":\"無法解析\"},\"timex\":{\"title\":\"Unix 時間 + 時區轉換\",\"description\":\"秒 / 毫秒 / ISO 自動判斷;選任一時區顯示在地時間,跨日邊界會提示。\",\"inputLabel\":\"時間(秒 / 毫秒 / ISO)\",\"seconds\":\"Unix 秒\",\"ms\":\"Unix 毫秒\",\"timezone\":\"時區\",\"parseError\":\"無法解析,請輸入秒、毫秒或 ISO 8601 格式\",\"dayBoundary\":\"⚠️ 跨日邊界,跨日期/月底測試請小心\",\"format\":{\"seconds\":\"判讀為秒\",\"ms\":\"判讀為毫秒\",\"iso\":\"判讀為 ISO 8601\"}},\"jsonx\":{\"title\":\"JSON formatter + Schema validator\",\"description\":\"格式化 / minify / 排序 keys;選 Validate 可貼 JSON Schema 做驗證(支援 type / required / properties / items / enum / pattern 等)。\",\"output\":\"輸出\",\"sortKeys\":\"排序 keys\",\"mode\":{\"format\":\"格式化\",\"minify\":\"Minify\",\"validate\":\"驗證\"}},\"mockapi\":{\"title\":\"Mock API 設計器\",\"description\":\"設計 endpoint + response,輸出可直接用於 Mockoon、Playwright、Postman、json-server 的 config 檔。純前端、零成本、自己拿回去跑。\",\"endpoints\":\"Endpoints\",\"addEndpoint\":\"新增\",\"remove\":\"刪除\",\"status\":\"Status\",\"delay\":\"Delay (ms)\",\"body\":\"Response body\",\"target\":\"輸出格式\",\"download\":\"下載\",\"safetyNote\":\"⚠️ 本工具不在伺服器開啟任何 endpoint,輸出的 config 請自己拿回去跑(本機 / CI / 自己的 server)。\"},\"colorconv\":{\"title\":\"顏色格式轉換器\",\"description\":\"貼任一格式(hex / rgb / hsl / oklch / oklab / CSS 命名色),即時雙向轉換五種格式,並推薦最接近的 Tailwind class。完全在瀏覽器跑。\",\"inputLabel\":\"輸入顏色(任一格式)\",\"inputPlaceholder\":\"#1e90ff、rgb(30,144,255)、oklch(64% 0.19 250)、dodgerblue …\",\"pickerLabel\":\"色票\",\"detected\":\"偵測格式\",\"parseError\":\"無法解析此顏色,請檢查格式\",\"preview\":\"預覽\",\"nearestNamed\":\"最接近 CSS 命名色\",\"nearestTailwind\":\"近似 Tailwind class\",\"format\":{\"hex\":\"Hex\",\"rgb\":\"RGB\",\"hsl\":\"HSL\",\"oklch\":\"OKLCH\",\"lab\":\"OKLab\"}},\"qr\":{\"title\":\"職稱\",\"description\":\"支援 URL / 純文字 / WiFi / vCard / Email 五種內容,自訂前景背景色、加中央 Logo、選錯誤更正等級。即時預覽,輸出 PNG / SVG。完全免費、無浮水印。\",\"kind\":\"內容類型\",\"url\":\"URL\",\"text\":\"純文字\",\"wifi\":\"WiFi\",\"vcard\":\"聯絡卡 vCard\",\"email\":\"Email\",\"urlLabel\":\"URL 連結\",\"textLabel\":\"純文字\",\"password\":\"密碼\",\"security\":\"加密類型\",\"openNetwork\":\"開放(無密碼)\",\"hiddenNetwork\":\"隱藏網路\",\"firstName\":\"名\",\"lastName\":\"姓\",\"org\":\"公司 / 組織\",\"phone\":\"電話\",\"emailField\":\"Email\",\"emailTo\":\"收件人\",\"emailSubject\":\"主旨\",\"emailBody\":\"內文\",\"fg\":\"前景色(模組)\",\"bg\":\"背景色\",\"size\":\"輸出尺寸\",\"margin\":\"邊距(modules)\",\"ec\":\"錯誤更正等級\",\"logo\":\"中央 Logo(可選)\",\"logoHint\":\"拖入 PNG / SVG;加 Logo 後 EC 自動設為 H 確保可掃描\",\"logoForcesH\":\"加 Logo 時 EC 已鎖為 H(避免掃不到)\",\"logoSize\":\"Logo 大小\",\"removeLogo\":\"移除 Logo\",\"preview\":\"預覽\",\"downloadPng\":\"下載 PNG\",\"downloadSvg\":\"下載 SVG\",\"empty\":\"輸入內容後即時顯示\",\"error\":\"產生失敗\"},\"glassneu\":{\"title\":\"Glassmorphism + Neumorphism 產生器\",\"description\":\"兩種現代 UI 風格一站搞定:**Glass**(毛玻璃,用 backdrop-filter)與 **Neumorphism**(柔質感,用兩層 light+dark 陰影做凸起/凹陷)。即時預覽多種背景,輸出 CSS 與 Tailwind v4 class。\",\"mode\":\"風格\",\"glass\":\"Glass(毛玻璃)\",\"neumorphism\":\"Neumorphism(柔質感)\",\"glassHint\":\"在彩色 / 圖片背景上加半透明 + 模糊,蘋果系統 control panel 風格。需要瀏覽器支援 backdrop-filter(Safari 14+ / Chrome 76+ / Firefox 103+)。\",\"neuHint\":\"雙陰影模擬光源在物體上方,做出凸起(raised)或凹陷(inset)效果。intensity 拉負值就是 inset 模式。\",\"previewBg\":\"預覽背景\",\"bg\":{\"photo\":\"照片\",\"vivid\":\"鮮豔漸層\",\"dark\":\"深色漸層\"},\"tint\":\"玻璃色(rgba 帶 alpha)\",\"blur\":\"模糊\",\"saturate\":\"彩度\",\"border\":\"邊框色\",\"borderWidth\":\"邊框粗細\",\"radius\":\"圓角\",\"shadow\":\"陰影\",\"surface\":\"表面色\",\"distance\":\"光源距離\",\"intensity\":\"強度(負值=凹陷)\",\"output\":\"輸出格式\"},\"boxshadow\":{\"title\":\"box-shadow 編輯器(多層陰影 + Material elevation)\",\"description\":\"多層 CSS 陰影視覺化編輯,每層獨立調 x/y/blur/spread/color + inset。內建 Tailwind 5 個 shadow preset 與 Material Design 9 個 elevation preset。\",\"tailwindPresets\":\"Tailwind 預設\",\"materialPresets\":\"Material elevation\",\"preview\":\"預覽\",\"boxColor\":\"方塊顏色\",\"boxBg\":\"背景色\",\"radius\":\"圓角\",\"layers\":\"陰影層(可疊加)\",\"addLayer\":\"+ 加一層\",\"layer\":\"層\",\"removeLayer\":\"移除此層\",\"color\":\"陰影色(支援 rgba)\",\"output\":\"輸出格式\"},\"typescale\":{\"title\":\"Type Scale + Fluid clamp() 字級產生器\",\"description\":\"輸入 base size + 比例,自動算 -3 到 +6 共 10 階字級。**Fluid 模式**可同時設兩個視窗 base,輸出 clamp() 跨視窗自適應。一鍵輸出 Tailwind v4 @theme / CSS variables / SCSS。\",\"mode\":\"模式\",\"fixed\":\"固定 px / rem\",\"fluid\":\"Fluid clamp()\",\"fixedHint\":\"傳統做法:每個 step 給固定 px 值。簡單但不會隨視窗自適應。\",\"fluidHint\":\"現代做法:每個 step 給 clamp(),在小視窗到大視窗間平滑縮放。Tailwind v4 / Astro / 現代 SSG 推薦。\",\"ratio\":\"modular ratio\",\"ratioName\":{\"minorSecond\":\"Minor Second(1.067)\",\"majorSecond\":\"Major Second(1.125)\",\"minorThird\":\"Minor Third(1.2)\",\"majorThird\":\"Major Third(1.25)\",\"perfectFourth\":\"Perfect Fourth(1.333)\",\"augmentedFourth\":\"Augmented Fourth(1.414)\",\"perfectFifth\":\"Perfect Fifth(1.5)\",\"goldenRatio\":\"Golden Ratio(1.618)\"},\"base\":\"Base 字級\",\"baseMin\":\"Base 字級(小視窗)\",\"baseMax\":\"Base 字級(大視窗)\",\"vpMin\":\"小視窗寬度\",\"vpMax\":\"大視窗寬度\",\"loStep\":\"最小 step\",\"hiStep\":\"最大 step\",\"preview\":\"字級預覽\",\"previewText\":\"The quick brown fox jumps over the lazy dog\",\"output\":\"輸出格式\",\"table\":\"純文字表格\"},\"gradient\":{\"title\":\"CSS 漸層編輯器(linear / radial / conic 全支援)\",\"description\":\"三種漸層模式即時編輯 — 拖滑桿改角度 / 中心 / 起始角,色階任意增刪、改色、改位置,即時預覽 + 輸出 CSS / Tailwind v4 任意 class / SVG 漸層定義。\",\"kind\":\"漸層類型\",\"linear\":\"Linear\",\"radial\":\"Radial\",\"conic\":\"Conic\",\"preview\":\"預覽\",\"angle\":\"角度\",\"shape\":\"形狀\",\"circle\":\"圓形\",\"ellipse\":\"橢圓\",\"cx\":\"中心 X\",\"cy\":\"中心 Y\",\"fromAngle\":\"起始角\",\"stops\":\"色階(可拖、可改色、可加減)\",\"addStop\":\"+ 加一個\",\"removeStop\":\"移除這個\",\"presets\":\"預設\",\"preset\":{\"sunset\":\"日落\",\"vaporwave\":\"Vaporwave\",\"aurora\":\"極光\",\"spotlight\":\"聚光燈\",\"rainbow\":\"彩虹輪盤\"},\"output\":\"輸出格式\"},\"contrast\":{\"title\":\"WCAG 對比 + APCA 無障礙檢查器\",\"description\":\"輸入前景與背景色,即時看到 WCAG 2.1 對比度與 APCA Lc 值,AA / AAA / 大字 / UI 元件每項目分別 Pass/Fail。不合格時自動沿 OKLab L 軸找最近合格色推薦給你。\",\"foreground\":\"前景色(文字)\",\"background\":\"背景色\",\"swap\":\"前景/背景對調\",\"parseError\":\"無法解析其中一個顏色\",\"previewHeading\":\"標題範例\",\"previewBody\":\"這是一段內文範例,請確認在這個對比下你能舒服閱讀。\",\"previewFine\":\"更小的說明文字 / 註腳,a11y 標準對小字最嚴格。\",\"previewButton\":\"按鈕範例\",\"wcagTitle\":\"WCAG 2.1 對比\",\"aaNormal\":\"AA 內文 (≥ 4.5)\",\"aaLarge\":\"AA 大字 (≥ 3.0)\",\"aaaNormal\":\"AAA 內文 (≥ 7.0)\",\"aaaLarge\":\"AAA 大字 (≥ 4.5)\",\"uiComponent\":\"UI 元件 / Icon\",\"apcaTitle\":\"APCA(WCAG 3 草案)\",\"apcaBody\":\"內文 / 小字\",\"apcaLarger\":\"較大字 / 次要\",\"apcaNonText\":\"非文字最低\",\"apcaDraft\":\"APCA 為 WCAG 3 草案,實務上會比 WCAG 2 更準。\",\"suggestion\":\"對比不足 — 建議改用\",\"apply\":\"套用\",\"copy\":\"複製\"},\"mdtrans\":{\"title\":\"Markdown 批次翻譯(BYO LLM API key)\",\"description\":\"自帶 OpenAI / Anthropic / Google API key 翻譯 .md 檔,保留 frontmatter、code block、連結、表格等 markdown 結構。Key 只存在本機,從不離開你的瀏覽器。\",\"provider\":\"Provider\",\"model\":\"模型\",\"apiKey\":\"API Key\",\"apiKeyPlaceholder\":\"sk-... / AIza... — 只存在本機,不上傳\",\"keyHint\":\"Key 透過 localStorage 儲存在這個瀏覽器,從本機 fetch 直接呼叫供應商,我們連看都看不到。\",\"from\":\"原文語言\",\"to\":\"目標語言\",\"dropzoneHint\":\"拖曳一個或多個 .md / .mdx 檔案(單檔上限 5 MB)\",\"summary\":\"{n} 個檔案 · {done} 已完成 · 約 {tokens} tokens\",\"tokensSuffix\":\"tokens\",\"translateAll\":\"全部翻譯\",\"cancel\":\"取消\",\"clearAll\":\"清空\",\"downloadZip\":\"下載 ZIP ({n} 檔)\",\"download\":\"下載\",\"remove\":\"移除\",\"noKey\":\"請先填入 API Key\",\"state\":{\"pending\":\"等待中\",\"running\":\"翻譯中…\",\"done\":\"完成\",\"error\":\"失敗\"}},\"favicon\":{\"title\":\"Favicon / App icon 全套產生器\",\"description\":\"三種輸入方式(emoji / 1-3 個字 / 上傳圖片)→ 一次輸出 favicon.ico、PNG 全尺寸(16/32/48/96/180/192/512)、PWA maskable icon、Microsoft tile、HTML snippet 與 site.webmanifest,打包 ZIP 下載。\",\"modeLabel\":\"輸入模式\",\"modeEmoji\":\"Emoji\",\"modeText\":\"文字\",\"modeImage\":\"上傳\",\"emojiLabel\":\"Emoji\",\"textLabel\":\"文字(1-3 個字元)\",\"textHint\":\"可以是品牌縮寫(如 9N、AI)、單個漢字、或字母數字組合。\",\"textColor\":\"文字顏色\",\"bold\":\"粗體\",\"background\":\"背景色\",\"transparent\":\"透明\",\"padding\":\"邊距\",\"rounded\":\"圓角(僅 iOS 風格用)\",\"uploadHint\":\"拖曳一張圖片或點此選檔(建議至少 512×512)\",\"changeFile\":\"換檔\",\"appName\":\"應用名稱(會寫進 manifest)\",\"generate\":\"產生 favicon\",\"building\":\"產生中…\",\"downloadZip\":\"下載 ZIP ({n} 檔)\",\"noSource\":\"請先選擇輸入(emoji / 文字 / 圖片)\",\"preview\":\"預覽\",\"sizes\":\"全尺寸\",\"htmlSnippetTitle\":\"HTML \u003clink\u003e 片段(貼進 \u003chead\u003e)\",\"manifestSnippetTitle\":\"site.webmanifest 內容\"},\"bezier\":{\"title\":\"cubic-bezier 視覺化編輯器\",\"description\":\"拖曳兩個控制點即時設計 CSS easing 曲線,內建 11 個 preset(ease / Material / Tailwind / anticipate 等),預覽動畫,一鍵輸出 CSS / Tailwind v4 / Framer Motion 程式碼。\",\"canvasLabel\":\"曲線(拖控制點)\",\"axes\":\"控制點數值\",\"duration\":\"動畫時長\",\"presets\":\"Preset\",\"preset\":{\"ease\":\"ease\",\"easeIn\":\"ease-in\",\"easeOut\":\"ease-out\",\"easeInOut\":\"ease-in-out\",\"linear\":\"linear\",\"materialStandard\":\"Material standard\",\"materialEmphasized\":\"Material emphasized\",\"tailwindIn\":\"Tailwind in\",\"tailwindOut\":\"Tailwind out\",\"tailwindInOut\":\"Tailwind in-out\",\"anticipate\":\"anticipate(回彈)\"},\"preview\":\"動畫預覽\",\"output\":\"輸出格式\"},\"pdfunlock\":{\"title\":\"PDF 解鎖 / 移除密碼\",\"description\":\"兩種模式 — 移除 PDF 的列印 / 複製限制(無需密碼),或用你已知的密碼解開加密 PDF。完全在瀏覽器內處理,文件不上傳。\",\"legalNotice\":\"本工具僅供解鎖你**擁有**或**已授權**的 PDF。請勿用於破解他人 PDF。\",\"mode\":\"解鎖模式\",\"ownerTab\":\"移除限制\",\"userTab\":\"輸入密碼\",\"ownerHint\":\"PDF 能開啟但被禁止列印 / 複製的情況。**無需密碼**,使用 pdf-lib 重新存檔即可移除 owner-level 限制。文字 / 表單 / 結構完整保留。\",\"userHint\":\"PDF 開啟時就要求輸入密碼的情況。需要你**知道密碼**;透過 pdf.js 解密後,把每頁渲染成圖再重組 PDF,**文字會變成圖**(失去複製 / 搜尋)。\",\"passwordLabel\":\"PDF 密碼\",\"wrongPassword\":\"密碼錯誤\",\"userWarning\":\"本模式會把文字變成圖,結果 PDF 失去文字選取與搜尋功能\",\"dropzoneHint\":\"拖曳加密的 PDF(單檔上限 200 MB)\",\"unlock\":\"解鎖\",\"reunlock\":\"重新解鎖\",\"working\":\"處理中…\",\"download\":\"下載解鎖後 PDF\",\"changeFile\":\"換檔\",\"pages\":\"{n} 頁\",\"error\":\"解鎖失敗\"},\"imgsize\":{\"title\":\"圖片壓到指定大小(KB / MB)\",\"description\":\"用二分搜尋自動找出能壓到目標大小的最佳 JPEG / WebP 畫質。內建台灣常用 preset(政府表單 300KB、104 履歷 500KB),完全在瀏覽器跑。\",\"target\":\"目標大小\",\"preset\":{\"gov300kb\":\"政府表單 300KB\",\"resume500kb\":\"104 履歷 500KB\",\"generic2mb\":\"一般上傳 2MB\",\"linkedin8mb\":\"LinkedIn 8MB\",\"custom\":\"自訂\"},\"targetAchieved\":\"目標 ≤ {size}\",\"targetSuffix\":\"(目標)\",\"format\":\"輸出格式\",\"dropzoneHint\":\"拖曳圖片 JPG / PNG / WebP(單檔上限 50 MB)\",\"compress\":\"開始壓縮\",\"recompress\":\"重新壓縮\",\"working\":\"搜尋最佳畫質中…\",\"download\":\"下載\",\"changeFile\":\"換檔\",\"achieved\":\"實際大小\",\"quality\":\"畫質\",\"dimensions\":\"尺寸\",\"attempts\":\"嘗試次數\",\"exceeded\":\"即使縮小尺寸 + 最低畫質仍無法達標 — 試試降低目標或先裁切\",\"error\":\"壓縮失敗\"},\"palette\":{\"title\":\"Tailwind 色階產生器(50-950)\",\"description\":\"輸入一個品牌色,自動生成完整 11 階色階(50-950),透過 OKLab 感知色彩空間計算,保留色相與品牌一致性。一鍵輸出 Tailwind v4 @theme / v3 config / CSS variables。\",\"colorLabel\":\"品牌色\",\"colorPlaceholder\":\"#3b82f6、rgb(...)、oklch(...) 都可以\",\"pickerLabel\":\"色票\",\"nameLabel\":\"名稱\",\"namePlaceholder\":\"brand、primary、accent…\",\"shades\":\"色階預覽\",\"nearestSource\":\"離原色最近的階差 ΔE = {delta}\",\"output\":\"輸出格式\",\"parseError\":\"無法解析此顏色\"},\"pdfedit\":{\"title\":\"PDF 頁面編輯\",\"description\":\"PDF 縮圖網格 — 點頁選取、旋轉、刪除、複製、上下移動,任意整理頁面後輸出新檔。所有操作在瀏覽器內完成,文件不上傳。\",\"dropzoneHint\":\"拖曳一個 PDF 或點此選檔(單檔上限 200 MB)\",\"loading\":\"渲染縮圖中… ({done}/{total})\",\"loadError\":\"讀檔失敗\",\"pages\":\"{n} 頁\",\"selected\":\"已選 {n} 頁\",\"changeFile\":\"換檔\",\"selectAll\":\"全選\",\"selectNone\":\"全不選\",\"invert\":\"反選\",\"rotateLeft\":\"左轉 90°\",\"rotateRight\":\"右轉 90°\",\"deleteSelected\":\"刪除選取\",\"duplicate\":\"複製此頁\",\"remove\":\"刪除此頁\",\"moveUp\":\"前移\",\"moveDown\":\"後移\",\"download\":\"下載新 PDF\",\"building\":\"產生中…\",\"togglePage\":\"切換頁 {n} 選取\"},\"pdfcompress\":{\"title\":\"PDF 壓縮\",\"description\":\"兩種模式 — 無損輕量壓縮(保留文字 / 表單,5-20% 縮減)或 rasterize 重壓(每頁變圖,50-80% 縮減)。完全在瀏覽器跑,文件不上傳。\",\"modeLabel\":\"壓縮模式\",\"lossless\":\"無損輕量\",\"rasterize\":\"Rasterize 重壓\",\"losslessHint\":\"保留文字、表單、註解;透過 pdf-lib resave + 移除 metadata 達成 5-20% 壓縮。\",\"rasterizeHint\":\"每頁渲染成 JPEG,可達 50-80% 壓縮但**文字會變成圖**,失去選取 / 搜尋功能。適合機密文件或需要極限壓縮時。\",\"stripMetadata\":\"移除 metadata(作者、軟體、標題等)\",\"qualityLabel\":\"畫質\",\"quality\":{\"high\":\"高(150 DPI)\",\"medium\":\"中(96 DPI)\",\"low\":\"低(72 DPI)\"},\"qualityHint\":{\"high\":\"印刷可用畫質,壓縮率較低\",\"medium\":\"螢幕閱讀預設,平衡點\",\"low\":\"極限壓縮,僅供預覽用\"},\"grayscale\":\"轉灰階(可再多壓 20-30%)\",\"dropzoneHint\":\"拖曳一個 PDF 或點此選檔(單檔上限 200 MB)\",\"compress\":\"開始壓縮\",\"recompress\":\"重新壓縮\",\"working\":\"壓縮中…\",\"download\":\"下載\",\"changeFile\":\"換檔\",\"original\":\"原始\",\"compressed\":\"壓縮後\",\"savings\":\"縮減\",\"error\":\"壓縮失敗\"},\"pdfsplit\":{\"title\":\"PDF 合併 / 分割 / 抽頁\",\"description\":\"三合一 PDF 操作 — 合併多檔、依範圍分割成多檔、抽出指定頁成新檔。完全在瀏覽器內處理,適合合約、機密文件、個資。\",\"mode\":\"模式\",\"merge\":\"合併\",\"split\":\"分割\",\"extract\":\"抽頁\",\"mergeDropzoneHint\":\"拖曳兩個以上 PDF 或點此選檔(單檔上限 100 MB)\",\"splitDropzoneHint\":\"拖曳一個 PDF,然後輸入分頁範圍\",\"extractDropzoneHint\":\"拖曳一個 PDF,然後輸入要保留的頁碼\",\"mergeSummary\":\"{n} 個檔案 · 共 {pages} 頁\",\"splitRangeLabel\":\"每段範圍(每段會輸出獨立檔)\",\"extractRangeLabel\":\"要抽出的頁碼\",\"rangePlaceholder\":\"例如:1-3, 5, 8-10\",\"rangeHint\":\"支援 `,` `;` `、` 分隔;範圍用 `-`。文件共 {max} 頁\",\"splitPreview\":\"將輸出 {n} 個檔案\",\"extractPreview\":\"將抽出 {n} 頁\",\"downloadMerged\":\"下載合併\",\"downloadSplit\":\"下載分割 ZIP\",\"downloadExtract\":\"下載抽頁\",\"merging\":\"合併中…\",\"working\":\"處理中…\",\"clearAll\":\"清空全部\",\"moveUp\":\"上移\",\"moveDown\":\"下移\",\"removeItem\":\"移除\",\"changeFile\":\"換檔\",\"loadError\":\"讀檔失敗,可能不是有效的 PDF\",\"pages\":\"{n} 頁\",\"pageCountError\":\"讀頁失敗\",\"error\":{\"empty\":\"請輸入頁碼或範圍\",\"syntax\":\"格式不正確,請參考例子 `1-3, 5`\",\"out_of_range\":\"超過文件實際頁數\",\"no_document\":\"請先選一個 PDF\"}},\"img2pdf\":{\"title\":\"圖片 → PDF 合併\",\"description\":\"拖入多張照片(JPG / PNG / WebP / HEIC),自訂紙張、方向、單頁張數、邊距,一鍵輸出 PDF。完全在瀏覽器跑,照片不上傳。\",\"pageSize\":\"紙張\",\"orientation\":\"方向\",\"auto\":\"自動\",\"portrait\":\"直\",\"landscape\":\"橫\",\"itemsPerPage\":\"單頁張數\",\"margin\":\"邊距\",\"quality\":\"JPEG 畫質\",\"dropzoneHint\":\"拖曳照片或點此選檔(可多選;HEIC 自動解碼)\",\"count\":\"{n} 張 · 預計 {pages} 頁\",\"clearAll\":\"清空全部\",\"downloadPdf\":\"下載 PDF\",\"building\":\"產生中…\",\"buildError\":\"產生失敗\",\"moveUp\":\"上移\",\"moveDown\":\"下移\",\"removeItem\":\"移除\"},\"heic\":{\"title\":\"HEIC → JPG / PNG / WebP 轉檔\",\"description\":\"iPhone 拍的 .heic 照片轉成通用格式,支援多檔批次處理與 ZIP 下載。整個流程在瀏覽器內跑,照片不會上傳到任何伺服器。\",\"formatLabel\":\"輸出格式\",\"qualityLabel\":\"畫質\",\"pngNoQuality\":\"PNG 為無損格式,不需要設定畫質。\",\"dropzoneHint\":\"拖曳 HEIC / HEIF 或一般圖片,或點此選檔(單檔上限 50 MB)\",\"summary\":\"{total} 個檔案 · 成功 {done} · 失敗 {error}\",\"clearAll\":\"清空全部\",\"downloadZip\":\"下載 ZIP({n} 檔)\",\"download\":\"下載\",\"state\":{\"pending\":\"等待中\",\"converting\":\"轉換中…\",\"done\":\"完成\",\"error\":\"失敗\"}},\"imgbase64\":{\"title\":\"圖片 ↔ Base64 互轉\",\"description\":\"拖曳圖片即可輸出 data URI、原始 base64、HTML img、CSS background 四種片段;反向貼 base64 即時預覽 + 下載。完全在瀏覽器跑,不上傳。\",\"mode\":\"模式\",\"encode\":\"圖片 → Base64\",\"decode\":\"Base64 → 圖片\",\"dropzoneHint\":\"拖曳一張或多張圖片,或點此選檔(單檔上限 10 MB)\",\"filesCount\":\"{n} 個檔案\",\"clearAll\":\"清空\",\"dataUri\":\"data URI\",\"rawBase64\":\"原始 base64\",\"htmlSnippet\":\"HTML \u003cimg\u003e 片段\",\"cssSnippet\":\"CSS background-image 片段\",\"readError\":\"讀取檔案失敗\",\"inputLabel\":\"貼上 data URI 或 base64\",\"inputPlaceholder\":\"data:image/png;base64,... 或純 base64 字串\",\"mimeLabel\":\"MIME 類型\",\"mimeHint\":\"貼 data URI 時自動沿用其 MIME;只有純 base64 才用上方下拉\",\"decodeBtn\":\"解碼預覽\",\"clear\":\"清空\",\"emptyInput\":\"請貼入 base64 或 data URI\",\"notBase64\":\"data URI 不是 base64 編碼\",\"invalidBase64\":\"base64 內容不合法\",\"decodeError\":\"解碼失敗,內容可能不是圖片\",\"detectedMime\":\"MIME\",\"decodedSize\":\"解碼後大小\",\"download\":\"下載\"},\"pdfwm\":{\"title\":\"PDF 加浮水印 + 頁碼\",\"description\":\"在 PDF 加上文字或圖片浮水印,可平鋪斜紋整頁、調整透明度與旋轉;另可自動加頁碼。完全在瀏覽器內處理,合約 / 機密文件 / 證件副本適用。\",\"dropzoneHint\":\"拖曳一個 PDF 或點此選檔(單檔上限 200 MB)\",\"changeFile\":\"換檔\",\"watermark\":\"浮水印\",\"wmNone\":\"不加\",\"wmText\":\"文字\",\"wmImage\":\"圖片(LOGO)\",\"text\":\"文字內容\",\"fontSize\":\"字級\",\"opacity\":\"透明度\",\"rotation\":\"旋轉\",\"color\":\"顏色\",\"tile\":\"斜紋平鋪整頁(防複印)\",\"position\":\"位置\",\"logoHint\":\"拖入 PNG / JPG(建議透明背景 PNG)\",\"changeLogo\":\"換 LOGO\",\"scale\":\"縮放(相對頁寬)\",\"addPageNumbers\":\"自動加頁碼\",\"format\":\"格式\",\"pnPosition\":\"頁碼位置\",\"bottomLeft\":\"左下\",\"bottomCenter\":\"下方置中\",\"bottomRight\":\"右下\",\"apply\":\"套用並下載\",\"working\":\"處理中…\",\"imageFormatError\":\"LOGO 只支援 PNG 或 JPG\",\"nothingSelected\":\"請至少開啟浮水印或頁碼其中一項\"},\"codefmt\":{\"title\":\"程式碼美化 / 壓縮\",\"description\":\"用 **Prettier** 引擎美化 10 種語言(JS / TS / JSX / TSX / JSON / CSS / SCSS / HTML / Markdown / YAML),並能一鍵 minify JSON / CSS / HTML。內容只在你瀏覽器內處理,不上傳。\",\"mode\":\"模式\",\"beautify\":\"美化\",\"minify\":\"壓縮\",\"language\":\"語言\",\"autoDetect\":\"自動判讀\",\"advanced\":\"進階選項(Prettier)\",\"printWidth\":\"每行寬度\",\"tabWidth\":\"縮排寬度\",\"useTabs\":\"使用 Tab 縮排\",\"singleQuote\":\"使用單引號\",\"semi\":\"保留分號\",\"input\":\"原始碼\",\"output\":\"輸出\",\"inputPlaceholder\":\"貼上 JS / TS / JSON / CSS / HTML / Markdown / YAML…\",\"outputPlaceholder\":\"美化或壓縮後的結果會顯示在這裡\",\"paste\":\"貼上\",\"openFile\":\"選檔\",\"clear\":\"清空\",\"copy\":\"複製\",\"copied\":\"已複製\",\"download\":\"下載檔案\",\"doBeautify\":\"美化\",\"doMinify\":\"壓縮\",\"working\":\"處理中…\",\"emptyInput\":\"請貼入內容或選一個檔案\",\"minifyUnsupported\":\"目前壓縮只支援 JSON / CSS / SCSS / HTML\",\"minifyHint\":\"{lang} 不支援壓縮(會切回美化)\"},\"mdedit\":{\"title\":\"Markdown 編輯器(即時預覽)\",\"description\":\"左邊寫 Markdown,右邊**即時看到**渲染結果。支援 GFM(表格、任務清單、刪除線),輸出純 HTML 片段或含樣式的單檔 HTML。內容只在你瀏覽器內處理,**不上傳**。\",\"breakLines\":\"換行轉 `\u003cbr\u003e`(breaks)\",\"words\":\"字\",\"characters\":\"字元\",\"lines\":\"列\",\"headings\":\"標題\",\"readTime\":\"閱讀時間\",\"openFile\":\"開檔\",\"loadSample\":\"載入範例\",\"clear\":\"清空\",\"source\":\"Markdown 原文\",\"placeholder\":\"在這裡輸入 Markdown…\",\"view\":\"預覽模式\",\"preview\":\"預覽\",\"html\":\"HTML 原始\",\"toc\":\"目錄\",\"noHeadings\":\"沒有任何標題(`#` 開頭)。\",\"copyMd\":\"複製 MD\",\"copyHtml\":\"複製 HTML\",\"copied\":\"已複製\",\"downloadMd\":\"下載 .md\",\"downloadHtml\":\"下載 .html\",\"docTitle\":\"Markdown 輸出\"},\"urlenc\":{\"title\":\"URL / Base64 / HTML 編解碼\",\"description\":\"六種編碼格式即時互轉:**URL**(encodeURI)、**URI component**(encodeURIComponent)、**Base64**(標準 padding)、**Base64URL**(JWT / OAuth 用)、**HTML entities**、**Unicode escape**(`\\\\uXXXX`)。完全在瀏覽器內處理。\",\"direction\":\"方向\",\"encode\":\"編碼\",\"decode\":\"解碼\",\"format\":\"格式\",\"fmt\":{\"url\":\"URL (encodeURI)\",\"urlComponent\":\"URI component\",\"base64\":\"Base64\",\"base64url\":\"Base64URL (JWT)\",\"htmlEntities\":\"HTML entities\",\"unicodeEscape\":\"Unicode escape\"},\"swap\":\"輸出當輸入\",\"input\":\"輸入\",\"output\":\"輸出\",\"placeholder\":\"貼上要編 / 解碼的字串…\",\"outputPlaceholder\":\"結果會即時顯示在這裡\",\"clear\":\"清空\",\"copy\":\"複製\",\"copied\":\"已複製\",\"error\":\"錯誤\"},\"jsondiff\":{\"title\":\"JSON 差異視覺化(deep diff)\",\"description\":\"貼兩份 JSON,即時看到 deep diff:新增、移除、變更分顏色高亮,陣列 by index 比對,可一鍵複製 diff 報告。完全在瀏覽器內處理。\",\"left\":\"左(原始)\",\"right\":\"右(更新)\",\"added\":\"新增\",\"removed\":\"移除\",\"changed\":\"變更\",\"unchanged\":\"不變\",\"showUnchanged\":\"顯示不變的欄位\",\"noChanges\":\"✓ 完全相同 — 沒有任何差異\",\"path\":\"路徑\",\"leftValue\":\"左值\",\"rightValue\":\"右值\",\"waiting\":\"兩邊都填合法 JSON 後即時比對\",\"copyReport\":\"複製 diff 報告\",\"copied\":\"已複製\"},\"csv\":{\"title\":\"CSV / TSV 表格預覽 + 互轉\",\"description\":\"貼 CSV 或 TSV,**自動判分隔符** + 解析 RFC 4180(支援引號、跳脫 `\\\"\\\"`、欄內換行)。表格化預覽 + 欄位統計(unique / empty / 數值比),一鍵轉 JSON / TSV / Markdown / CSV。\",\"hasHeader\":\"首列為標題\",\"delimiter\":\"分隔符\",\"openFile\":\"開檔\",\"loadSample\":\"載入範例\",\"clear\":\"清空\",\"input\":\"原始資料\",\"placeholder\":\"貼上 CSV、TSV 或其他分隔字元表格…\",\"summary\":\"{rows} 列 · {cols} 欄\",\"truncated\":\"預覽顯示前 {shown} 列,共 {total} 列(輸出區會包含全部)\",\"outputFormat\":\"輸出格式\",\"copy\":\"複製\",\"copied\":\"已複製\",\"download\":\"下載\"},\"imgcrop\":{\"title\":\"圖片裁切(自由 / 比例 / 圓形)\",\"description\":\"拖框視覺化裁切,可鎖固定比例(1:1 / 16:9 / 3:2 等 8 種)或自由裁切,圓形 mask 適合大頭貼,輸出 PNG / JPG / WebP 並可指定輸出寬度。完全在瀏覽器內處理,**檔案不上傳**。\",\"dropzoneHint\":\"拖入圖片或點此選檔(支援 JPG / PNG / WebP / GIF)\",\"aspect\":\"比例\",\"circular\":\"圓形 mask(適合大頭貼)\",\"changeImage\":\"換圖\",\"format\":\"輸出格式\",\"quality\":\"畫質\",\"outputWidth\":\"輸出寬度(px)\",\"outputHint\":\"原圖 {src};留空 = 用裁切框實際大小\",\"willExport\":\"將輸出\",\"circularJpegHint\":\"⚠ JPG 不支援透明,圓形 mask 在 JPG 會變方形,請選 PNG / WebP\",\"download\":\"下載裁切後圖片\",\"working\":\"處理中…\"},\"cssgrid\":{\"title\":\"CSS Grid 視覺化產生器\",\"description\":\"視覺化編輯 CSS Grid:**rows / cols 自由增刪**(支援 fr / px / % / auto)、**gap**、**命名 grid areas**(可任意覆蓋多格)。即時預覽 + 自動產生 `grid-template-areas` 字串 + 完整 CSS 輸出(包含每個 area 的 `grid-area`)。內建 Holy Grail、2-col split、Dashboard 12-col 範本。\",\"presets\":\"範本\",\"rows\":\"Rows(列)\",\"cols\":\"Cols(欄)\",\"gap\":\"Gap\",\"areas\":\"命名 areas\",\"preview\":\"即時預覽\",\"css\":\"輸出 CSS\",\"copy\":\"複製\",\"copied\":\"已複製\"},\"mermaid\":{\"title\":\"Mermaid 流程圖編輯器\",\"description\":\"用純文字寫流程圖、序列圖、甘特圖、心智圖、類別圖、圓餅圖,即時預覽,可下載 SVG / PNG。**Mermaid** 是 GitHub / Notion / Slack / GitLab 都原生支援的圖表語法,版本控制友善(diff 看得到改了什麼)。內建 6 種範本,套上就改就有。\",\"samples\":\"範本\",\"sampleKeys\":{\"flowchart\":\"流程圖\",\"sequence\":\"序列圖\",\"gantt\":\"甘特圖\",\"classDiagram\":\"類別圖\",\"pie\":\"圓餅圖\",\"mindmap\":\"心智圖\"},\"source\":\"Mermaid 原始碼\",\"preview\":\"即時預覽\",\"placeholder\":\"貼或寫 Mermaid 語法…\",\"copySource\":\"複製原始碼\",\"copySvg\":\"複製 SVG\",\"copied\":\"已複製\"},\"clippath\":{\"title\":\"CSS clip-path 編輯器\",\"description\":\"視覺化編輯 CSS `clip-path` 形狀:**polygon**(任意多邊形,拖點 / 雙擊刪 / 右鍵在邊上加新點)、**circle**、**ellipse**、**inset**(帶圓角)。9 種預設(三角 / 菱形 / 六邊 / 星 / 箭頭…),輸出 CSS、Tailwind v4 bracket class、SVG path。\",\"preset\":\"預設\",\"presets\":{\"triangle\":\"三角形\",\"rhombus\":\"菱形\",\"hexagon\":\"六邊形\",\"star\":\"五角星\",\"arrow\":\"箭頭\",\"parallelogram\":\"平行四邊形\",\"circle\":\"圓形\",\"ellipse\":\"橢圓\",\"inset\":\"內縮\"},\"editor\":\"編輯器(拖點 / 雙擊刪 / 右鍵加點)\",\"appliedTo\":\"套用在圖片上預覽\",\"pointHint\":\"拖移 · 雙擊刪除 · 右鍵在後加新點\",\"polygonHint\":\"目前 {n} 個點(右鍵在點後加新點,雙擊刪除)\",\"pointsLabel\":\"頂點座標(%)\",\"centerX\":\"中心 X\",\"centerY\":\"中心 Y\",\"radius\":\"半徑\",\"radiusX\":\"X 半徑\",\"radiusY\":\"Y 半徑\",\"insetTop\":\"上邊內縮\",\"insetRight\":\"右邊內縮\",\"insetBottom\":\"下邊內縮\",\"insetLeft\":\"左邊內縮\",\"borderRadius\":\"圓角\",\"output\":\"輸出\",\"copy\":\"複製\",\"copied\":\"已複製\"},\"pdf2img\":{\"title\":\"PDF 拆成圖片(PNG / JPG / WebP)\",\"description\":\"把 PDF 每一頁渲染成高解析圖片,可選範圍 + 倍率(1× = 72dpi,4× ≈ 288dpi)。單頁直接下載,多頁打包成 ZIP。完全在瀏覽器內處理,**檔案不上傳**。\",\"dropzoneHint\":\"拖入一個 PDF 或點此選檔(單檔上限 200 MB)\",\"changeFile\":\"換檔\",\"pageCount\":\"{n} 頁\",\"loading\":\"讀取中…\",\"loadError\":\"讀檔失敗,可能不是有效的 PDF\",\"format\":\"輸出格式\",\"scale\":\"倍率(渲染解析度)\",\"quality\":\"畫質\",\"pages\":\"頁面\",\"allPages\":\"全部\",\"rangePages\":\"指定範圍\",\"rangeHint\":\"例如 `1-3, 5, 8-10`(文件共 {max} 頁)\",\"rangePreview\":\"將輸出 {n} 頁\",\"rangeInvalid\":\"格式錯誤或超出文件頁數\",\"renderAndDownload\":\"渲染並下載\",\"renderingProgress\":\"渲染中 {done} / {total}…\",\"working\":\"處理中…\"},\"gifmake\":{\"title\":\"多張圖 → GIF 動畫\",\"description\":\"把多張圖片(JPG / PNG / WebP)合成一支 GIF 動畫。可拖曳排序、調整 delay、循環、輸出尺寸、palette 顏色數。純前端 GIF encoder(gifenc),**圖片不上傳**。\",\"dropzoneHint\":\"拖入多張圖片(JPG / PNG / WebP)或點此選檔\",\"dropzoneAddHint\":\"再拖入更多(目前 {current} / 上限 {max})\",\"frameCount\":\"{n} 個影格\",\"clearAll\":\"清空\",\"width\":\"寬度(px)\",\"height\":\"高度(px)\",\"delay\":\"每張延遲\",\"loop\":\"循環播放(開 = 無限循環,關 = 播一次)\",\"fit\":\"縮放模式\",\"fitContain\":\"Contain(填滿,留邊)\",\"fitCover\":\"Cover(填滿,裁邊)\",\"maxColors\":\"Palette 顏色數\",\"buildGif\":\"建立 GIF\",\"encodingProgress\":\"編碼中 {done} / {total}…\",\"working\":\"處理中…\"},\"imgresize\":{\"title\":\"圖片改尺寸(等比 / 上限 / 百分比)\",\"description\":\"4 種改尺寸模式:**等比塞進指定框**(maxFit,常用於上傳限制)、**限定最長邊**、**百分比縮放**、**強制指定尺寸**(exact,會變形)。輸出 JPG / PNG / WebP,預設防放大保品質。純前端,**檔案不上傳**。\",\"dropzoneHint\":\"拖入圖片或點此選檔(JPG / PNG / WebP / GIF)\",\"loadError\":\"讀檔失敗\",\"changeImage\":\"換圖\",\"mode\":\"模式\",\"modes\":{\"maxFit\":\"上限框(等比)\",\"longestEdge\":\"最長邊\",\"scale\":\"百分比\",\"exact\":\"強制尺寸\"},\"maxWidth\":\"上限寬\",\"maxHeight\":\"上限高\",\"longestEdge\":\"最長邊(px)\",\"percent\":\"縮放比\",\"width\":\"寬度\",\"height\":\"高度\",\"exactWarn\":\"⚠ 強制尺寸會讓圖片變形,不會保留原比例\",\"preventUpscale\":\"禁止放大(小於目標就保留原尺寸)\",\"format\":\"輸出格式\",\"quality\":\"畫質\",\"willOutput\":\"將輸出\",\"download\":\"下載\",\"working\":\"處理中…\"},\"hashes\":{\"title\":\"Hash 計算工具\",\"description\":\"**MD5 / SHA-1 / SHA-256 / SHA-384 / SHA-512** 五種演算法同時計算。文字模式即時輸出,檔案模式可校驗完整性(下載驗證)。WebCrypto + 自實作 MD5,**完全在瀏覽器內處理**。\",\"mode\":\"模式\",\"textMode\":\"文字\",\"fileMode\":\"檔案\",\"inputText\":\"輸入文字\",\"textPlaceholder\":\"貼上文字、密碼、API key…即時計算 hash\",\"computeHashes\":\"計算 Hash\",\"hashing\":\"計算中…\",\"copy\":\"複製\",\"copied\":\"已複製\"},\"uuid\":{\"title\":\"UUID 產生器(v4 / v7)\",\"description\":\"一次產生 1-1000 個 UUID。**v4** 是 122-bit 隨機(RFC 4122);**v7** 是 48-bit Unix 毫秒時間戳 + 74-bit 隨機(RFC 9562),**可排序**、適合作資料庫主鍵。可調大小寫、加 / 去連字符、加大括號。\",\"version\":\"版本\",\"count\":\"數量(1-1000)\",\"generate\":\"產生\",\"case\":\"大小寫\",\"lower\":\"小寫\",\"upper\":\"大寫\",\"hyphens\":\"保留連字符 `-`\",\"braces\":\"包大括號 `{...}`\",\"countResult\":\"已產生 {n} 個\",\"copyAll\":\"複製全部\",\"copied\":\"已複製\",\"download\":\"下載 .txt\",\"v7embed\":\"v7 內嵌時間:{ts}\"},\"lorem\":{\"title\":\"假文產生器(拉丁 / 繁中 / Tech)\",\"description\":\"三種詞庫:**拉丁 Lorem Ipsum**(設計界傳統)、**繁中假文**(避免英文 mockup 在中文版面看起來不協調)、**英文 Tech 詞彙**(產品 demo 用詞)。輸出 字 / 句 / 段,可設 seed 重現相同假文。\",\"lang\":\"語言\",\"latin\":\"拉丁 Lorem\",\"zh\":\"繁體中文\",\"tech\":\"英文 Tech\",\"unit\":\"單位\",\"words\":\"字\",\"sentences\":\"句\",\"paragraphs\":\"段\",\"count\":\"數量\",\"startLorem\":\"從 `Lorem ipsum dolor sit amet…` 開頭\",\"reroll\":\"重新抽\",\"stats\":\"{chars} 字元 · {words} 字\",\"copy\":\"複製\",\"copied\":\"已複製\"},\"ts\":{\"title\":\"Unix timestamp ↔ 多時區\",\"description\":\"貼 **epoch 秒(10 位)**、**epoch 毫秒(13 位)** 或 **ISO 8601 字串**,自動判讀並即時轉換。同時顯示多個時區的當地時間 + 相對時間描述,可加 / 移除時區。後端 log debug、跨時區協作必備。\",\"input\":\"輸入時間戳 / ISO\",\"placeholder\":\"例如 1700000000、1700000000000、2024-01-01T00:00:00Z\",\"now\":\"現在\",\"kind\":{\"ms\":\"毫秒\",\"s\":\"秒\",\"iso\":\"ISO 8601\"},\"detected\":\"已判讀為:{kind}\",\"parseError\":\"無法解析(請貼 epoch 數字或 ISO 字串)\",\"relative\":\"相對時間\",\"zoneList\":\"各時區當地時間\",\"addZone\":\"+ 加入時區\",\"copy\":\"複製\",\"copied\":\"已複製\"},\"emoji\":{\"title\":\"Emoji 資訊查詢\",\"description\":\"250+ 常用 emoji 一頁速查,8 大分類可過濾(笑臉 / 人物 / 動物自然 / 食物 / 旅行 / 物件 / 符號 / 國旗),輸入英文關鍵字或 shortcode(`thumbs`、`fire`、`rocket`),或**直接貼 emoji 反查 codepoint / shortcode / HTML entity**。\",\"placeholder\":\"搜尋(關鍵字、shortcode 或貼 emoji 反查)…\",\"all\":\"全部\",\"categories\":{\"smileys\":\"笑臉表情\",\"people\":\"人物身體\",\"animals\":\"動物自然\",\"food\":\"食物飲料\",\"travel\":\"旅行地點\",\"objects\":\"物件\",\"symbols\":\"符號\",\"flags\":\"國旗\"},\"countLabel\":\"{n} 個結果\",\"char\":\"字元\",\"codepoints\":\"Codepoints\",\"shortcode\":\"Shortcode\",\"htmlEntity\":\"HTML entity\"},\"slugify\":{\"title\":\"Slugify(URL 友善化)\",\"description\":\"把任意標題轉成 URL slug:**Unicode NFD + 去重音**(café → cafe)、**標點切成分隔符**、**統一大小寫**。預設保留中日韓字(CJK URL 現代瀏覽器與搜尋引擎都支援),也可選擇移除。最大長度可設,自動以單字邊界截斷。\",\"input\":\"輸入標題\",\"placeholder\":\"貼任意標題,例如:JavaScript 入門教學:從 ES6 到 React Hooks\",\"separator\":\"分隔符\",\"case\":\"大小寫\",\"maxLength\":\"最大長度(0=不限)\",\"stripAccents\":\"去掉重音(café → cafe)\",\"dropCjk\":\"移除中日韓字元\",\"result\":\"結果\",\"variants\":\"其他變體預覽\",\"copy\":\"複製\",\"copied\":\"已複製\"},\"casecvt\":{\"title\":\"命名格式互轉\",\"description\":\"貼任何格式的字串(camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / 句子 / 標題式 / dot.notation / path/notation),一次列出 9 種轉換結果。專門處理 `XMLHttpRequest` 這種連續大寫的邊界,不會切錯。\",\"input\":\"輸入字串\",\"placeholder\":\"貼任何命名:userProfileData、user_profile_data、User Profile Data…\",\"hint\":\"支援連續大寫(如 `XMLHttpRequest` → xml http request)與任意符號分隔\",\"kinds\":{\"camel\":\"camelCase\",\"pascal\":\"PascalCase\",\"snake\":\"snake_case\",\"kebab\":\"kebab-case\",\"constant\":\"CONSTANT_CASE\",\"title\":\"Title Case\",\"sentence\":\"Sentence case\",\"dot\":\"dot.notation\",\"path\":\"path/notation\"},\"copy\":\"複製\",\"copied\":\"已複製\"},\"textdiff\":{\"title\":\"文字 diff(行對比)\",\"description\":\"左右貼兩段文字,LCS 演算法逐行 diff,**新增 / 移除 / 變更** 分色顯示。可選忽略 **空白** 或 **大小寫**,可輸出 **unified diff** 格式(git / patch 通用)。\",\"left\":\"左(原始)\",\"right\":\"右(更新)\",\"added\":\"新增\",\"removed\":\"移除\",\"changed\":\"變更\",\"unchanged\":\"不變\",\"ignoreWhitespace\":\"忽略空白差異\",\"ignoreCase\":\"忽略大小寫\",\"copyUnified\":\"複製 unified diff\",\"copied\":\"已複製\"},\"vid2gif\":{\"title\":\"影片轉 GIF(MP4 / WebM / MOV → GIF)\",\"description\":\"拖入影片,選 **起 / 訖秒數**、**fps**、**輸出寬度**,瀏覽器內 seek + canvas 截圖 → gifenc 量化打包 GIF。整段流程在你瀏覽器內跑,**影片不上傳**。\",\"dropzoneHint\":\"拖入影片或點此選檔(MP4 / WebM / MOV)\",\"changeFile\":\"換檔\",\"start\":\"起點\",\"end\":\"終點\",\"fps\":\"fps\",\"width\":\"輸出寬度\",\"maxColors\":\"Palette 顏色數\",\"fit\":\"縮放模式\",\"fitContain\":\"Contain(留邊)\",\"fitCover\":\"Cover(裁邊)\",\"loop\":\"循環播放\",\"estimate\":\"預估產生 {frames} 個影格 · {size}\",\"convert\":\"轉成 GIF 並下載\",\"encodingProgress\":\"編碼中 {done} / {total}…\",\"working\":\"處理中…\"},\"httpcodes\":{\"title\":\"HTTP 狀態碼大全(速查表)\",\"description\":\"60+ 個 HTTP 狀態碼一頁完整列出,5 大類別(**1xx 資訊 / 2xx 成功 / 3xx 重導 / 4xx 客戶端錯誤 / 5xx 伺服器錯誤**)可過濾,輸入數字前綴或關鍵字即時搜尋,附 RFC 參考與常見誤用提示(401 vs 403、302 vs 307 等)。\",\"placeholder\":\"輸入數字(40)或關鍵字(rate limited)…\",\"countLabel\":\"{found} / {total} 個狀態碼\",\"noResults\":\"找不到符合的狀態碼。\",\"copyCode\":\"複製狀態碼\"},\"regexr\":{\"title\":\"正則替換 + 捕捉組預覽\",\"description\":\"三欄即時編輯:**Pattern**(/.../flags) + **Replacement**($1 $2 / $\u003cname\u003e) + **Input**。下方原文高亮所有命中、輸出顯示替換結果、表格列出每一個 match 的捕捉組(含命名群組)。所有 6 個 flags 可即時切換。\",\"pattern\":\"Pattern\",\"replacement\":\"Replacement\",\"replacementPlaceholder\":\"$$1、$2、$\u003cname\u003e 都支援\",\"replacementHint\":\"$$1-$9 = 捕捉組;$\u003cname\u003e = 命名群組;$\u0026 = 整段 match;$$ = 字面 $\",\"flags\":\"Flags\",\"input\":\"輸入(原文)\",\"output\":\"替換結果\",\"highlight\":\"原文高亮(每個命中以 hl 標記)\",\"groupsTable\":\"捕捉組表格\",\"matchCount\":\"{n} 個命中\",\"matchCol\":\"Match\",\"groupsCol\":\"捕捉組\",\"truncated\":\"只顯示前 {shown} 個(總共 {total})\",\"empty\":\"(輸入為空)\",\"copy\":\"複製輸出\",\"copied\":\"已複製\"},\"cron\":{\"title\":\"Cron 表達式視覺化 + 下次觸發預覽\",\"description\":\"貼上 cron 表達式(`* * * * *`),立即看到 **5 欄拆解** + **自然語言描述** + **下 N 次觸發時間**(本地 + ISO + 距現在)。支援 `@daily` / `@hourly` 等 alias、月份 / 星期英文名(`jan`、`mon-fri`)、step(`*/5`)、range(`9-17`)、混合 list。\",\"expression\":\"Cron 表達式\",\"presets\":\"常用範本\",\"nextN\":\"下幾次觸發\",\"local\":\"本地時間\",\"iso\":\"ISO 8601\",\"delta\":\"距現在\",\"copyAll\":\"複製全部(ISO)\",\"copied\":\"已複製\"},\"json2ts\":{\"title\":\"JSON → TypeScript\",\"description\":\"貼任意 JSON,**即時推斷 TypeScript 型別** — 自動命名巢狀型別(`users → User`)、合併陣列內共同 shape、把缺漏欄位標為 optional、混合型別 array 推 union。可選 interface / type、根名稱、`readonly`。完全本地,JSON 不上傳。\",\"input\":\"JSON\",\"output\":\"TypeScript\",\"format\":\"格式\",\"rootName\":\"根型別名\",\"immutable\":\"加 readonly\",\"loadSample\":\"載入範例\",\"placeholder\":\"貼任意 JSON…\",\"copy\":\"複製\",\"copied\":\"已複製\",\"download\":\"下載 .ts\"},\"tokens\":{\"title\":\"AI Token 估算器\",\"description\":\"貼任意 prompt,**即時估算 5 種主流 AI 模型**(GPT-4 / GPT-3.5 / Claude / Gemini / Llama 3)的 token 數、成本與 context window 使用率。**啟發式估算**(無需 1MB tiktoken WASM),英文文本精確度 ±10%,中文按字元加權更貼近真實 BPE 行為。\",\"input\":\"Prompt / 文字\",\"placeholder\":\"貼任意 prompt 或對話內容…\",\"clear\":\"清空\",\"characters\":\"字元\",\"words\":\"詞\",\"cjk\":\"CJK\",\"tokens\":\"Tokens\",\"model\":\"模型\",\"cost\":\"成本\",\"context\":\"Context\",\"caveatTitle\":\"為什麼是估算?\",\"caveatBody\":\"真實 BPE 分詞要靠 tiktoken / SentencePiece,WASM bundle 約 1MB。我們用「英文 4 字元 ≈ 1 token、CJK 1 字元 ≈ 1.5 token」的啟發法,對英文 / 中文混合文本誤差 ±10%。用來估算成本與 context 是否爆是夠的;真正要精確,請用 OpenAI / Anthropic 官方 API tokenizer。\"},\"pwstrength\":{\"title\":\"密碼強度 + 破解時間估算\",\"description\":\"純前端熵估算 + 5 種攻擊者情境(從 rate-limited 線上 API 到 GPU 暴力破 MD5)的預估破解時間。偵測弱模式(全同字、單純數字、鍵盤連續、常見字典)。**密碼絕不離開瀏覽器**。\",\"input\":\"密碼\",\"placeholder\":\"在這裡輸入密碼…\",\"show\":\"顯示密碼\",\"hide\":\"隱藏密碼\",\"chars\":\"字元\",\"charset\":\"字元池大小\",\"strength\":\"強度\",\"crackTime\":\"破解時間估算(按攻擊者類型)\",\"charsets\":\"包含的字元類型\",\"lower\":\"小寫字母 a-z\",\"upper\":\"大寫字母 A-Z\",\"digit\":\"數字 0-9\",\"symbol\":\"符號 !@#$ 等\",\"other\":\"Unicode / CJK 等其他字元\"},\"cvd\":{\"title\":\"色盲模擬器(8 種 + 正常)\",\"description\":\"用 Brettel / Machado 矩陣模擬 **8 種色盲**(全色盲 / 紅綠盲 / 藍黃盲,各分完全 / 部分)+ 正常,**色票或圖片** 同時並排顯示。設計師檢驗 dashboard / 圖表 / 標誌系統的無障礙必備。\",\"paletteMode\":\"色票模式\",\"imageMode\":\"圖片模式\",\"dropzoneHint\":\"拖入圖片(最長邊會縮至 400px)\",\"noImage\":\"請選擇圖片\",\"types\":{\"normal\":\"正常視覺\",\"protanopia\":\"紅色盲(Protanopia)\",\"protanomaly\":\"紅色弱(Protanomaly)\",\"deuteranopia\":\"綠色盲(Deuteranopia)\",\"deuteranomaly\":\"綠色弱(Deuteranomaly)\",\"tritanopia\":\"藍色盲(Tritanopia)\",\"tritanomaly\":\"藍色弱(Tritanomaly)\",\"achromatopsia\":\"全色盲(Achromatopsia)\",\"achromatomaly\":\"部分全色盲(Achromatomaly)\"}},\"svgo\":{\"title\":\"SVG 最佳化器\",\"description\":\"純前端 SVG 瘦身工具:**移除註解 / metadata / 編輯器特有屬性**(Sketch / Figma / Inkscape)/ **預設屬性值**(opacity=1、stroke=none 等)/ 空 group + defs / **數字捨入到指定精度**,並 collapse whitespace。前後並排預覽 + 顯示節省 %。\",\"optsLabel\":\"啟用的最佳化\",\"opts\":{\"removeComments\":\"移除 \u003c!-- 註解 --\u003e\",\"removeXmlDeclaration\":\"移除 \u003c?xml ?\u003e\",\"removeDoctype\":\"移除 \u003c!DOCTYPE\u003e\",\"removeMetadata\":\"移除 \u003cmetadata\u003e\",\"removeEditorAttributes\":\"移除編輯器屬性 (Sketch / Figma / Inkscape)\",\"removeDefaultAttributes\":\"移除預設屬性值\",\"removeEmptyGroups\":\"移除空 \u003cg\u003e\",\"removeEmptyDefs\":\"移除空 \u003cdefs\u003e\",\"roundNumbers\":\"捨入小數\",\"collapseWhitespace\":\"折疊空白\"},\"precision\":\"精度\",\"openFile\":\"開檔\",\"input\":\"原始 SVG\",\"output\":\"最佳化後\",\"copy\":\"複製\",\"copied\":\"已複製\",\"download\":\"下載 .svg\",\"previewBefore\":\"原始預覽\",\"previewAfter\":\"最佳化後預覽\"},\"bundle\":{\"title\":\"npm 套件大小查詢(bundle size)\",\"description\":\"查詢 npm 套件的 **minified / gzip 大小**、**相依數量**、**是否 tree-shakeable**。可加入多個套件並排比較(綠色長條反映 gzip 體積)。前端選 dep、評估 bundle 影響時最常用。資料來自 bundlephobia.com 公開 API。\",\"placeholder\":\"輸入 npm 套件名(可帶版本:react@19、@vercel/analytics@2)\",\"query\":\"查詢\",\"popular\":\"熱門套件\",\"empty\":\"輸入套件名稱開始查詢,或選下方熱門套件。\",\"loading\":\"查詢中…\",\"invalid\":\"套件名稱格式不正確\",\"minified\":\"Min\",\"gzip\":\"Gzip\",\"deps\":\"Deps\",\"sideEffects\":\"Side effects\"},\"meta\":{\"qr\":{\"title\":\"QR Code 產生器 — 可加 Logo,支援 WiFi / vCard / Email(免費)\",\"description\":\"URL / 純文字 / WiFi / vCard / Email 五種內容,自訂顏色 + 中央 Logo,輸出 PNG / SVG,完全免費無浮水印。對標 qr-code-generator.com 但 Logo 不收費。\",\"keywords\":[\"qr code 產生\",\"qr code 加 logo\",\"wifi qr code\",\"vcard qr\",\"email qr\",\"free qr generator\",\"qr code generator\",\"qr code 免費\"]},\"glassneu\":{\"title\":\"Glassmorphism + Neumorphism 產生器(毛玻璃 + 柔質感二合一)\",\"description\":\"兩種現代 UI 風格一站搞定 — Glass 用 backdrop-filter 做毛玻璃,Neumorphism 用雙陰影做凸起/凹陷。3 種預覽背景,輸出 CSS 與 Tailwind v4。\",\"keywords\":[\"glassmorphism\",\"neumorphism\",\"毛玻璃\",\"柔質感\",\"backdrop-filter\",\"ui 風格\",\"glassmorphism.com 替代\",\"neumorphism.io 替代\"]},\"boxshadow\":{\"title\":\"box-shadow 編輯器 — 多層陰影 + Material elevation 內建\",\"description\":\"多層 CSS 陰影視覺化編輯器,Tailwind 5 級 + Material 9 級 preset,輸出 CSS / Tailwind v4 任意 class。\",\"keywords\":[\"box-shadow\",\"css 陰影\",\"material elevation\",\"tailwind shadow\",\"shadow generator\",\"多層陰影\"]},\"typescale\":{\"title\":\"Type Scale + Fluid clamp() 字級產生器 — Tailwind v4 @theme\",\"description\":\"modular ratio + 雙視窗 clamp() 自動算字級,8 種音樂比例可選,輸出 Tailwind v4 @theme / CSS variables / SCSS。比 utopia.fyi 簡潔。\",\"keywords\":[\"type scale\",\"fluid typography\",\"clamp css\",\"字級計算\",\"modular scale\",\"tailwind typography\",\"utopia.fyi 替代\"]},\"gradient\":{\"title\":\"CSS 漸層編輯器 — linear / radial / conic 全支援(純前端)\",\"description\":\"三種漸層模式即時編輯:拖滑桿改角度與中心、色階任意增刪、即時預覽,輸出 CSS / Tailwind v4 任意 class / SVG 漸層定義。\",\"keywords\":[\"css gradient\",\"漸層產生器\",\"linear-gradient\",\"radial-gradient\",\"conic-gradient\",\"gradient editor\",\"tailwind gradient\",\"cssgradient.io 替代\"]},\"contrast\":{\"title\":\"WCAG 對比 + APCA 檢查器 — 不合格自動推薦合格色\",\"description\":\"前景背景色即時對比 (WCAG 2.1 ratio + APCA Lc),AA / AAA / 大字 / UI 分別判定。不合格時沿 OKLab L 軸找最近合格色一鍵套用。\",\"keywords\":[\"wcag 對比\",\"contrast checker\",\"apca\",\"a11y 顏色\",\"無障礙顏色\",\"webaim 替代\",\"color contrast\",\"對比檢查器\"]},\"mdtrans\":{\"title\":\"Markdown 批次翻譯 — BYO API key,保留 frontmatter / code(純前端)\",\"description\":\"自帶 OpenAI / Anthropic / Google API key 批次翻譯 .md 檔,完整保留 frontmatter、code block、連結結構。Hugo / Astro / Docusaurus i18n 利器。\",\"keywords\":[\"markdown 翻譯\",\"md 檔翻譯\",\"批次翻譯\",\"byo api key\",\"openai 翻譯\",\"claude 翻譯\",\"gemini 翻譯\",\"hugo i18n\",\"docusaurus i18n\",\"astro i18n\"]},\"favicon\":{\"title\":\"Favicon 全套產生器 — favicon.ico + PWA maskable(純前端,不上傳)\",\"description\":\"三模式輸入(emoji / 文字 / 圖片)→ 全套 favicon.ico、PNG、PWA maskable、apple-touch-icon、HTML snippet、site.webmanifest,打包 ZIP。\",\"keywords\":[\"favicon 產生器\",\"favicon generator\",\"app icon\",\"pwa icon\",\"apple touch icon\",\"maskable icon\",\"realfavicongenerator 替代\",\"favicon io 替代\"]},\"bezier\":{\"title\":\"cubic-bezier 編輯器 — 視覺化 CSS easing 曲線\",\"description\":\"拖曳兩個控制點即時設計 CSS cubic-bezier 曲線,內建 11 個 preset,預覽動畫,輸出 CSS / Tailwind v4 / Framer Motion 程式碼。\",\"keywords\":[\"cubic-bezier\",\"css easing\",\"緩動函式\",\"ease-in-out\",\"css 動畫曲線\",\"bezier editor\",\"cubic bezier generator\",\"framer motion easing\"]},\"pdfunlock\":{\"title\":\"PDF 解鎖 / 移除密碼(純前端,不上傳)\",\"description\":\"移除 PDF 列印 / 複製限制(免密碼),或用你自己的密碼解開加密 PDF。完全在瀏覽器跑,適合機密合約 / 個資文件。\",\"keywords\":[\"pdf 解鎖\",\"pdf 移除密碼\",\"pdf unlock\",\"remove pdf password\",\"pdf 限制移除\",\"pdf 列印解鎖\",\"ilovepdf 替代\"]},\"imgsize\":{\"title\":\"圖片壓到指定大小 — 300KB / 500KB / 2MB(純前端不上傳)\",\"description\":\"二分搜尋找出能達標的最佳 JPEG / WebP 畫質,把照片壓到剛好低於指定大小。內建台灣政府表單 / 104 履歷 / LinkedIn 等 preset。\",\"keywords\":[\"圖片壓縮 300kb\",\"照片壓到 500kb\",\"圖片壓縮 2mb\",\"履歷照片壓縮\",\"政府表單照片\",\"104 照片大小\",\"image compress to specific size\"]},\"palette\":{\"title\":\"Tailwind 色階產生器(50-950)— v4 @theme 即時輸出\",\"description\":\"輸入品牌色 → 自動生成完整 11 階(50-950)。OKLab 感知色彩空間計算,色相一致。一鍵複製 Tailwind v4 @theme、v3 config、CSS variables。\",\"keywords\":[\"tailwind 色階\",\"tailwind palette\",\"色階產生器\",\"tailwind v4 theme\",\"tailwind shades\",\"design system colors\",\"oklch palette\",\"uicolors 替代\"]},\"pdfedit\":{\"title\":\"PDF 頁面編輯 — 旋轉 / 刪除 / 重排(純前端不上傳)\",\"description\":\"縮圖網格中選取頁面 → 旋轉、刪除、複製、上下重排;支援多選批次操作。完全在瀏覽器跑,適合機密文件。\",\"keywords\":[\"pdf 頁面編輯\",\"pdf 旋轉\",\"pdf 刪頁\",\"pdf 重排\",\"organize pdf\",\"pdf page editor\",\"ilovepdf 替代\"]},\"pdfcompress\":{\"title\":\"PDF 壓縮 — 無損 / Rasterize 雙模式(純前端不上傳)\",\"description\":\"PDF 線上壓縮兩種模式:無損輕量(保留文字 5-20% 壓縮)或 Rasterize 重壓(每頁變圖 50-80% 壓縮)。完全在瀏覽器跑,適合機密文件。\",\"keywords\":[\"pdf 壓縮\",\"縮小 pdf\",\"pdf 變小\",\"compress pdf\",\"reduce pdf size\",\"pdf 大小\",\"ilovepdf 替代\",\"smallpdf 替代\"]},\"pdfsplit\":{\"title\":\"PDF 合併 / 分割 / 抽頁 — 線上工具(純前端不上傳)\",\"description\":\"三合一 PDF 操作:多檔合併、依範圍分割成多檔 ZIP、抽出指定頁成新檔。完全在瀏覽器跑,合約 / 機密 / 個資文件適用,永不上傳。\",\"keywords\":[\"pdf 合併\",\"pdf 分割\",\"pdf 抽頁\",\"merge pdf\",\"split pdf\",\"extract pdf pages\",\"合併 pdf 免上傳\",\"ilovepdf 替代\"]},\"img2pdf\":{\"title\":\"圖片 → PDF 線上合併(JPG / PNG / HEIC,純前端不上傳)\",\"description\":\"多張照片合併成單一 PDF,可拖曳排序、選紙張(A4 / Letter / A5 / Legal)、方向、單頁 1 / 2 / 4 張、邊距。完全在瀏覽器跑,適合機密文件 / 收據 / 報帳。\",\"keywords\":[\"圖片轉 pdf\",\"jpg 轉 pdf\",\"png 轉 pdf\",\"照片轉 pdf\",\"heic 轉 pdf\",\"合併圖片 pdf\",\"image to pdf\",\"jpg to pdf\"]},\"heic\":{\"title\":\"HEIC → JPG / PNG / WebP 線上轉檔(純前端,不上傳)\",\"description\":\"iPhone 拍的 .heic 照片轉成通用格式,可批次處理 + ZIP 下載。完全在瀏覽器跑,照片不會離開你的裝置。\",\"keywords\":[\"heic 轉 jpg\",\"heic 轉檔\",\"iphone 照片轉檔\",\"heic to jpg\",\"heic to png\",\"heif\",\"heic 開啟\",\"ios 照片格式\"]},\"imgbase64\":{\"title\":\"圖片 ↔ Base64 互轉 — data URI / HTML / CSS 一鍵複製\",\"description\":\"拖曳圖片產出 data URI 與原始 base64、HTML img、CSS background 片段。反向也可貼 base64 預覽 + 下載。純前端,圖片不上傳。\",\"keywords\":[\"圖片轉 base64\",\"base64 轉圖片\",\"data uri\",\"image to base64\",\"base64 to image\",\"圖片 base64\",\"data url\"]},\"colorconv\":{\"title\":\"顏色格式轉換器 — Hex / RGB / HSL / OKLCH / OKLab\",\"description\":\"五種顏色格式即時雙向轉換,支援 CSS Color Level 4 的 oklch / oklab,附近似 Tailwind class 與顏色預覽。純前端,免註冊。\",\"keywords\":[\"顏色轉換\",\"hex to rgb\",\"rgb to hex\",\"hsl 轉換\",\"oklch 轉換\",\"oklab\",\"css color 4\",\"tailwind 對應色\"]},\"pdfwm\":{\"title\":\"PDF 加浮水印 + 頁碼 — 線上工具(純前端不上傳)\",\"description\":\"在 PDF 加上文字 / 圖片浮水印與自動頁碼,可斜紋平鋪整頁、調整透明度與旋轉。完全在瀏覽器內處理,合約 / 機密文件 / 證件副本適用。\",\"keywords\":[\"pdf 浮水印\",\"pdf 加文字\",\"pdf logo\",\"pdf 頁碼\",\"watermark pdf\",\"add page numbers pdf\",\"ilovepdf 替代\",\"smallpdf 替代\"]},\"codefmt\":{\"title\":\"程式碼美化 / 壓縮 — Prettier 線上版(10 種語言,純前端)\",\"description\":\"用 Prettier 引擎美化 JS / TS / CSS / HTML / JSON / Markdown / YAML 等 10 種語言;一鍵 minify JSON / CSS / HTML。內容只在瀏覽器內處理,不上傳。可調進階選項(印刷寬度、tab 寬、單引號等)。\",\"keywords\":[\"程式碼美化\",\"code formatter\",\"prettier 線上\",\"json 美化\",\"css 美化\",\"html 美化\",\"json minify\",\"css minify\",\"html minify\",\"beautify js\"]},\"bundle\":{\"title\":\"npm 套件大小查詢線上工具 — Bundle Size + Tree-shake 比較\",\"description\":\"查詢 npm 套件 minified / gzip 大小、相依數、tree-shake 狀況,可並排比較多個套件。資料源 bundlephobia.com。\",\"keywords\":[\"bundle size\",\"npm package size\",\"bundlephobia 替代\",\"tree shaking\",\"gzip size\",\"套件大小\",\"前端 bundle 分析\",\"dep 比較\"]},\"svgo\":{\"title\":\"SVG 最佳化線上工具 — 移除冗餘 / 捨入小數 / 並排預覽(純前端)\",\"description\":\"瀏覽器內 SVG 瘦身,移除註解 / metadata / 編輯器屬性 / 預設值、空 group、捨入小數、折疊空白,前後並排預覽 + 顯示節省 %。\",\"keywords\":[\"svg 最佳化\",\"svgo online\",\"svg optimizer\",\"sketch svg\",\"figma svg\",\"svg 瘦身\",\"svg minify\",\"vector clean\"]},\"cvd\":{\"title\":\"色盲模擬器線上工具 — 8 種色盲並排,色票 / 圖片皆可(純前端)\",\"description\":\"用 Brettel / Machado 矩陣模擬 8 種色盲(紅綠盲 / 藍黃盲 / 全色盲,各分完全與部分),色票或圖片同時並排對比。設計師檢驗無障礙必備,純前端不上傳。\",\"keywords\":[\"色盲模擬\",\"color blindness simulator\",\"deuteranopia\",\"protanopia\",\"tritanopia\",\"achromatopsia\",\"無障礙設計\",\"wcag accessibility\"]},\"pwstrength\":{\"title\":\"密碼強度檢測 + 破解時間估算 — 純前端,密碼不上傳\",\"description\":\"純前端熵估算 + 5 種攻擊者破解時間(線上 rate-limited、bcrypt offline、SHA / MD5 GPU 暴力),弱模式偵測,密碼完全本地處理。\",\"keywords\":[\"密碼強度\",\"password strength\",\"crack time\",\"密碼破解時間\",\"entropy\",\"zxcvbn 替代\",\"密碼檢測\",\"password checker\"]},\"cron\":{\"title\":\"Cron 表達式視覺化線上工具 — 自然語言描述 + 下次觸發時間\",\"description\":\"貼 cron 表達式,即時看到 5 欄拆解、自然語言描述、下 N 次觸發時間。支援 @daily alias、月份星期英文名、step、range,純前端、零依賴。\",\"keywords\":[\"cron 表達式\",\"cron 線上\",\"crontab guru 替代\",\"cron 視覺化\",\"next fire time\",\"cron parser\",\"cron generator\",\"排程 線上\"]},\"regexr\":{\"title\":\"正則替換工具 — 捕捉組 + 命名群組 $\u003cname\u003e 即時預覽(純前端)\",\"description\":\"三欄式正則替換:pattern + replacement + input,即時看到捕捉組、命名群組、替換結果與原文高亮。所有 JS RegExp 6 個 flags 可調,跟既有 regex 測試工具互補。\",\"keywords\":[\"regex replace\",\"正則替換\",\"regexp 替換\",\"捕捉組 $1\",\"命名群組\",\"regex 線上\",\"regex tester\",\"find replace regex\"]},\"httpcodes\":{\"title\":\"HTTP 狀態碼大全(速查表)— 5 類別 + 即時搜尋(純前端)\",\"description\":\"完整 HTTP 狀態碼速查,60+ 個 codes 含名稱、用途、RFC 參考與常見誤用提示。可用數字前綴或關鍵字搜尋,五大類別可過濾。\",\"keywords\":[\"http 狀態碼\",\"http status codes\",\"http code 大全\",\"404 401 403\",\"422 429 500\",\"http rfc 9110\",\"status code 速查\",\"rest api 狀態碼\"]},\"vid2gif\":{\"title\":\"影片轉 GIF 線上工具 — MP4 / WebM / MOV → GIF(純前端不上傳)\",\"description\":\"拖入影片,選秒數區間 + fps + 輸出寬度,瀏覽器內 seek + canvas + gifenc 量化打包 GIF。整段流程在你瀏覽器內,影片完全不上傳。\",\"keywords\":[\"影片轉 gif\",\"mp4 to gif\",\"video to gif\",\"webm to gif\",\"mov to gif\",\"screen recording to gif\",\"ezgif 替代\",\"gif maker\"]},\"textdiff\":{\"title\":\"文字 diff 線上工具 — 行對比 + Unified diff 輸出(純前端)\",\"description\":\"左右雙欄文字 LCS 行 diff,新增 / 移除 / 變更分色,可忽略空白與大小寫,輸出 git-compatible unified diff 格式。後端 log 比對、PR review、文件版本對比通用。\",\"keywords\":[\"text diff\",\"字串比對\",\"文字 diff\",\"line diff\",\"unified diff\",\"diff online\",\"比對工具\",\"lcs 演算法\"]},\"ts\":{\"title\":\"Unix Timestamp ↔ 多時區轉換器 — 即時 + 相對時間(純前端)\",\"description\":\"Unix epoch 秒 / 毫秒 / ISO 8601 自動判讀,15 個常用時區一次顯示,含相對時間描述。後端 log debug、跨時區協作必備。\",\"keywords\":[\"unix timestamp\",\"epoch converter\",\"時間戳轉換\",\"timestamp 轉換\",\"iso 8601\",\"時區轉換\",\"epoch to date\",\"timezone converter\"]},\"lorem\":{\"title\":\"假文產生器 — 拉丁 / 繁中 / Tech 三種詞庫(純前端)\",\"description\":\"經典 Lorem Ipsum 之外,加上繁中假文與英文 Tech 詞庫,設計師 / 工程師排版時直接用,不會出現英文 mockup 配中文界面的視覺斷層。\",\"keywords\":[\"lorem ipsum\",\"假文產生\",\"繁中假文\",\"中文 lorem\",\"lorem zh\",\"dummy text\",\"filler text\",\"lipsum\"]},\"uuid\":{\"title\":\"UUID 線上產生器 — v4 / v7 批次,可調大小寫 / 連字符 / 大括號\",\"description\":\"一次產生 1-1000 個 UUID v4(隨機)或 v7(時序),格式選項齊全。WebCrypto getRandomValues 高品質亂數,完全在瀏覽器內。\",\"keywords\":[\"uuid 產生器\",\"uuid generator\",\"uuid v4\",\"uuid v7\",\"guid generator\",\"uuid 線上\",\"rfc 4122\",\"rfc 9562\"]},\"hashes\":{\"title\":\"MD5 / SHA-256 線上計算工具 — 五種 hash 同時輸出(純前端)\",\"description\":\"MD5 / SHA-1 / SHA-256 / SHA-384 / SHA-512 五種演算法同時輸出。文字即時計算、檔案完整性校驗,完全在瀏覽器內處理,不上傳。\",\"keywords\":[\"md5 線上\",\"sha256 計算\",\"hash generator\",\"file hash\",\"checksum\",\"sha1 sha256\",\"md5 calculator\",\"hash online\"]},\"imgresize\":{\"title\":\"圖片改尺寸線上工具 — 等比 / 最長邊 / 百分比(純前端不上傳)\",\"description\":\"4 種改尺寸模式:等比塞進框、限定最長邊、百分比縮放、強制指定尺寸。輸出 JPG / PNG / WebP,預設防放大保品質。完全在瀏覽器內處理,**不上傳**。\",\"keywords\":[\"圖片縮小\",\"image resize\",\"等比縮放\",\"圖片改尺寸\",\"resize image online\",\"縮圖工具\",\"圖片限制大小\",\"圖片變小\"]},\"gifmake\":{\"title\":\"圖片合成 GIF 動畫線上工具 — 多張圖排序、調 delay(純前端)\",\"description\":\"把多張圖合成 GIF 動畫,可拖曳排序、改 delay / 循環 / 尺寸 / palette 顏色數。純前端 gifenc 編碼,圖片完全不上傳。\",\"keywords\":[\"圖片轉 gif\",\"image to gif\",\"make gif\",\"gif maker\",\"frame to gif\",\"gif 製作\",\"ezgif 替代\",\"純前端 gif\"]},\"pdf2img\":{\"title\":\"PDF 拆成圖片線上工具 — PNG / JPG / WebP 高解析輸出(純前端不上傳)\",\"description\":\"PDF 每頁渲染為高解析圖片,可選頁數範圍 + 倍率,多頁打包 ZIP。完全在瀏覽器內處理,合約 / 報表 / 機密文件適用。\",\"keywords\":[\"pdf 轉圖片\",\"pdf to png\",\"pdf to jpg\",\"pdf 拆頁\",\"pdf to image online\",\"convert pdf to image\",\"ilovepdf 替代\",\"smallpdf 替代\"]},\"clippath\":{\"title\":\"CSS clip-path 編輯器 — 視覺化拖點生成 polygon / circle / inset\",\"description\":\"拖點生成 CSS clip-path 形狀,9 種預設(三角 / 六邊 / 星 / 箭頭等),輸出 CSS / Tailwind v4 bracket class / SVG path。即時預覽,純前端。\",\"keywords\":[\"css clip-path\",\"clip path generator\",\"polygon generator\",\"css polygon\",\"clip-path 線上\",\"tailwind clip-path\",\"svg shape generator\",\"clip path maker\"]},\"imgcrop\":{\"title\":\"圖片裁切線上工具 — 自由 / 比例 / 圓形 mask(純前端不上傳)\",\"description\":\"拖框視覺化裁切,8 種固定比例可鎖、圓形 mask 適合大頭貼,輸出 PNG / JPG / WebP 並指定輸出寬度。完全在瀏覽器內處理,適合機密 / 證件 / 個人照片。\",\"keywords\":[\"圖片裁切\",\"image crop\",\"crop online\",\"圓形大頭貼\",\"square crop\",\"16:9 crop\",\"ig 大頭貼\",\"頭像裁切\"]},\"csv\":{\"title\":\"CSV / TSV 線上表格預覽 — 自動判分隔符 + JSON 互轉(純前端)\",\"description\":\"RFC 4180 標準 CSV / TSV 解析,自動判分隔符,表格化預覽 + 欄位統計(unique / empty / 數值比),一鍵轉 JSON / TSV / Markdown / CSV。\",\"keywords\":[\"csv viewer\",\"csv to json\",\"tsv 解析\",\"csv 預覽\",\"csv 轉 json\",\"csv 轉 markdown\",\"csv parser online\",\"rfc 4180\"]},\"jsondiff\":{\"title\":\"JSON Diff 線上工具 — deep diff 視覺化(純前端、免註冊)\",\"description\":\"兩份 JSON 並排即時 deep diff,新增 / 移除 / 變更分色高亮,陣列 by index 比對,輸出 diff 報告。後端 API 變更比對、config 審查、回歸測試最常用。\",\"keywords\":[\"json diff\",\"json compare\",\"json 比對\",\"json 差異\",\"deep diff\",\"object diff\",\"api 比對\",\"config diff\",\"jsondiff online\"]},\"urlenc\":{\"title\":\"URL / Base64 / HTML 編解碼器 — 六種格式即時互轉(純前端)\",\"description\":\"URL、URI component、Base64、Base64URL、HTML entities、Unicode escape 六種格式雙向轉換,即時輸出。完全在瀏覽器內處理,後端 debug / OAuth / JWT / 爬蟲必備。\",\"keywords\":[\"url encode\",\"url decode\",\"base64 encode\",\"base64url\",\"html entities\",\"unicode escape\",\"encodeuricomponent\",\"編碼工具\",\"解碼工具\"]},\"mdedit\":{\"title\":\"Markdown 編輯器 — 即時預覽 + HTML 輸出(純前端、免費)\",\"description\":\"雙欄 Markdown 編輯器,即時預覽 GFM(表格、任務清單、刪除線、程式碼區塊),可輸出純 HTML 片段或含樣式單檔 HTML。字數 / 字元 / 閱讀時間統計,目錄一鍵看。\",\"keywords\":[\"markdown 編輯器\",\"md 預覽\",\"markdown 線上\",\"markdown to html\",\"md 轉 html\",\"gfm 編輯器\",\"online markdown editor\",\"stackedit 替代\",\"dillinger 替代\"]},\"percentile\":{\"title\":\"百分位計算器 — p50 / p90 / p95 / p99 + Apdex(SLO 必備)\",\"description\":\"貼一排 response time 即時算出 p50 / p90 / p95 / p99 與 Apdex 分數。SLO 報告、JMeter 結果分析、壓測解讀利器,可調 Apdex T 門檻,純前端不上傳。\",\"keywords\":[\"百分位計算器\",\"p95 計算\",\"p99 計算\",\"apdex 計算\",\"slo 分析\",\"response time\",\"jmeter 分析\",\"k6 結果\",\"壓測分析\",\"percentile calculator 中文\"]},\"jwt\":{\"title\":\"JWT decoder / generator — HS256 解碼簽章(secret 不外洩)\",\"description\":\"貼 JWT 立刻解出 header / payload,顯示 exp 是否過期;切到 Sign 改 payload + secret 即時重簽。WebCrypto 純瀏覽器,secret 與 token 都不離開本機。\",\"keywords\":[\"jwt decoder\",\"jwt 解碼\",\"jwt generator\",\"jwt 線上產生\",\"hs256\",\"jwt.io 替代\",\"json web token 中文\",\"2fa 測試\",\"bearer token 解析\",\"token 過期 檢查\"]},\"curl\":{\"title\":\"cURL ↔ fetch ↔ Python requests ↔ HTTPie 互轉\",\"description\":\"貼一行 cURL 指令,即時轉成 JavaScript fetch、Python requests 或 HTTPie。支援多行續行、單雙引號、basic auth、-G、JSON body 自動辨識。\",\"keywords\":[\"curl 轉 fetch\",\"curl to python\",\"curl converter 中文\",\"fetch generator\",\"httpie 轉換\",\"curlconverter 替代\",\"postman 取代\",\"api 測試 工具\",\"rest api 轉換\"]},\"selector\":{\"title\":\"CSS / XPath Selector 即時測試器(貼 HTML 看命中)\",\"description\":\"貼 HTML 與 selector,即時看到命中元素 outerHTML 與 textContent 預覽。CSS / XPath 雙模式,寫 Playwright / Robot Framework / Appium 定位器必備。\",\"keywords\":[\"css selector 測試\",\"xpath 測試\",\"selector 練習\",\"playwright selector\",\"robot framework 定位器\",\"appium 定位器\",\"queryselectorall 線上\",\"selector playground 中文\"]},\"regex\":{\"title\":\"Regex builder 即時測試 — capture / named groups 全列出\",\"description\":\"貼 pattern + 測試字串,即時 highlight 命中範圍、列出 capture groups 與 named groups。i / m / s / u 旗標切換,g 自動開啟,JavaScript 引擎。\",\"keywords\":[\"regex 測試\",\"正則表達式 練習\",\"regex builder 中文\",\"regex101 替代\",\"regexr 替代\",\"javascript regex\",\"named group\",\"capture group\",\"正則 即時\"]},\"mockapi\":{\"title\":\"Mock API 設計器 — 輸出 Playwright / Mockoon / Postman / json-server config\",\"description\":\"在 UI 設計 endpoint(method / path / status / delay / body),一鍵輸出可直接跑的 config。純前端不 host endpoint,設計完拿回本機或 CI 跑。\",\"keywords\":[\"mock api 產生器\",\"playwright mock\",\"mockoon 設定\",\"json-server config\",\"postman mock\",\"api 模擬\",\"假 api server\",\"前端 mock\",\"beeceptor 替代\"]},\"twdata\":{\"title\":\"台灣測試假資料產生器 — 身分證 / 統編 / 手機 / Luhn 信用卡\",\"description\":\"產出格式合法的台灣身分證字號(內政部校驗碼)、統一編號(含第 7 位 7 規則)、行動電話、Luhn 通過信用卡(Visa / Master / JCB)。批次 1~1000 筆,僅供測試。\",\"keywords\":[\"台灣身分證 產生器\",\"假身分證\",\"統編 產生器\",\"luhn 信用卡 產生\",\"測試 卡號\",\"fake taiwan id\",\"test credit card\",\"stripe 測試卡號\",\"綠界 測試\",\"藍新 測試\"]},\"jsonx\":{\"title\":\"JSON formatter + JSON Schema 驗證器(瀏覽器內運算)\",\"description\":\"格式化 / minify / 排序 keys + JSON Schema 驗證(支援 type / required / properties / items / enum / pattern / minLength / maximum)。1MB 上限,純前端不上傳。\",\"keywords\":[\"json formatter 中文\",\"json beautifier\",\"json schema 驗證\",\"json validator\",\"jsonlint 替代\",\"json minify\",\"json 排序\",\"json 線上驗證\"]},\"timex\":{\"title\":\"Unix 時間 + 時區轉換器 — 秒 / 毫秒 / ISO 自動判讀\",\"description\":\"貼數字或 ISO 字串自動判讀格式,選任意時區即時顯示在地時間,跨日邊界自動提示。跨時區測試、月底 bug、夏令時間驗證利器。\",\"keywords\":[\"unix timestamp 轉換\",\"時間戳 轉換\",\"timezone converter\",\"epoch 轉換 中文\",\"iso 8601 轉換\",\"跨時區 測試\",\"dst 測試\",\"unixtimestamp.com 替代\"]},\"cheatsheet\":{\"title\":\"測試框架速查表 — Robot Framework / Playwright / Appium\",\"description\":\"三大自動化測試框架常用語法速查:開瀏覽器、定位器、wait、assertion、capabilities、滑動。即時搜尋、一鍵複製到測試檔。\",\"keywords\":[\"robot framework cheatsheet\",\"playwright cheatsheet\",\"appium cheatsheet\",\"測試框架 速查\",\"e2e 測試\",\"自動化測試 中文\",\"qa 自動化\",\"selenium 替代\"]},\"casecvt\":{\"title\":\"命名格式互轉 — camelCase / snake_case / kebab-case 9 種一次列出\",\"description\":\"貼任意字串即時列出 camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / Title / Sentence / dot / path 共 9 種命名格式,一鍵複製。寫 code、改變數命名、跨語言搬程式必備,純前端不上傳。\",\"keywords\":[\"命名格式轉換\",\"camelcase 轉 snake_case\",\"kebab case 轉換\",\"case converter 中文\",\"變數命名工具\",\"字串命名互轉\",\"constant case\",\"pascalcase 轉換\"]},\"cssgrid\":{\"title\":\"CSS Grid 視覺化產生器 — 拖點編 rows / cols / named areas\",\"description\":\"視覺化編輯 CSS Grid 的 rows、cols、gap、命名 areas,即時預覽 + 一鍵複製 CSS。內建 Holy Grail、Dashboard 12-col 等常見版面範本,適合 RWD、後台、首頁 hero 版型,純前端不上傳。\",\"keywords\":[\"css grid 產生器\",\"grid template areas\",\"holy grail 版型\",\"css grid 教學\",\"dashboard 12 欄\",\"grid generator 中文\",\"css 排版工具\",\"grid-template-areas 產生器\"]},\"emoji\":{\"title\":\"Emoji 資訊查詢 — codepoint / shortcode / HTML entity 一鍵看\",\"description\":\"250+ 常用 emoji 速查 + 分類過濾(臉部 / 手勢 / 動物 / 食物 / 國旗...),點任一個顯示 Unicode codepoint、Discord/Slack shortcode、HTML entity、CSS escape。可貼 emoji 反查,純前端。\",\"keywords\":[\"emoji 查詢\",\"emoji unicode\",\"emoji shortcode\",\"discord emoji 代碼\",\"slack emoji 代碼\",\"html entity emoji\",\"emoji 反查\",\"emoji codepoint\"]},\"json2ts\":{\"title\":\"JSON → TypeScript type 線上轉換器 — 自動命名 + readonly + optional\",\"description\":\"貼任意 JSON 即時推 TypeScript type / interface,智慧命名巢狀型別、合併陣列共同 shape、自動識別 optional 欄位、支援 readonly。串 API、寫 SDK、產出 model class 必備,純前端不上傳。\",\"keywords\":[\"json 轉 typescript\",\"json to ts\",\"json to interface\",\"typescript 型別推導\",\"ts 型別產生器\",\"json2ts 中文\",\"api response 轉 type\",\"interface 自動產生\"]},\"mermaid\":{\"title\":\"Mermaid 流程圖編輯器 — 純文字寫流程圖 / 序列 / 甘特,下載 SVG / PNG\",\"description\":\"用 Mermaid 語法寫流程圖、序列圖、甘特圖、心智圖、類別圖、ER、圓餅圖,即時預覽 + 下載 SVG / PNG。docs、README、架構圖、技術 blog 必備,可直接貼進 GitHub / Notion 用。\",\"keywords\":[\"mermaid 線上編輯器\",\"mermaid 流程圖\",\"mermaid 序列圖\",\"mermaid 甘特圖\",\"流程圖工具\",\"架構圖工具\",\"mermaid live editor\",\"mermaid 語法\"]},\"slugify\":{\"title\":\"Slugify 線上工具 — 標題轉 URL slug(中日韓 / 去重音 / 截斷)\",\"description\":\"把任意標題轉成 SEO 友善的 URL slug:去除重音、統一大小寫、切割標點、空白變連字號。中日韓字可保留或選擇去除,支援長度截斷。寫 blog、產文章 URL、生 CMS slug 必備。\",\"keywords\":[\"slugify 中文\",\"url slug 產生器\",\"標題轉 slug\",\"中文 slug\",\"seo url 工具\",\"slug generator\",\"去重音\",\"ascii url 轉換\"]},\"tokens\":{\"title\":\"AI Token 估算器 — GPT / Claude / Gemini 5 模型即時試算 + 成本\",\"description\":\"貼 prompt 即時估算 tokens 數量、成本與 5 種主流模型的 context window 是否塞得下(GPT-4o / Claude 3.5 / Gemini Pro 等)。AI 預算控管、prompt 壓縮、選模型必備,heuristic 估算 ±10%。\",\"keywords\":[\"token 計算器\",\"gpt token 計算\",\"claude token 計算\",\"ai 成本計算\",\"context window 試算\",\"tokenizer 線上\",\"prompt token 估算\",\"openai token cost\"]}},\"usage\":{\"percentile\":{\"title\":\"如何使用\",\"steps\":[\"貼上一排 response time 進左邊輸入框,**逗號、空格、換行**都可以混用。\",\"(可選)調整 **Apdex T**:T 是「滿意」門檻(ms),小於 T 算滿意、T~4T 算容忍、大於 4T 算挫敗。\",\"右側立刻看到 p50 / p90 / p95 / p99 + Apdex,**反白 = 重點指標**。\",\"做 SLO 報告時直接複製數字進文件,T 預設 500ms 是 Web App 常用值。\"],\"tips\":[\"p95 跳得比 p90 多很多 → 通常表示有少數慢請求(雪崩)而非整體變慢。\",\"Apdex \u003c 0.7 通常代表使用者體驗開始顯著惡化。\"]},\"jwt\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[貼入 JWT] --\u003e B{Decode / Sign?}\\n    B --\u003e|Decode| C[Base64URL 解三段]\\n    C --\u003e D[Header + Payload + Signature]\\n    D --\u003e E{有 exp 嗎?}\\n    E --\u003e|有| F[比對當前時間]\\n    F --\u003e G[Valid / Expired badge]\\n    B --\u003e|Sign| H[編輯 Payload JSON]\\n    H --\u003e I[輸入 Secret]\\n    I --\u003e J[Web Crypto HMAC-SHA256]\\n    J --\u003e K[新 token]\",\"steps\":[\"**Decode**:把 JWT 貼到左欄,header / payload 立刻解出,過期時間自動標 `Expired` / `Valid`。\",\"**Sign**:切到右上 `Sign` tab,改 payload(JSON)+ secret(HS256),右側即時產出新 token。\",\"整個流程跑在你的瀏覽器內,**secret 跟 token 都不離開本機**,可以放心測登入流程。\"],\"tips\":[\"想模擬「已過期」token?把 `exp` 改成過去的 Unix 秒數。\",\"目前只支援 HS256,RS256 / ES256 之後會加。\"],\"note\":\"⚠️ 不要把生產環境 secret 貼進任何線上工具(包含這個)。要驗證重要 token 請在隔離環境跑。\"},\"selector\":{\"title\":\"如何使用\",\"steps\":[\"左邊貼 HTML 片段,中間打 selector,右邊立刻看到命中元素的 `outerHTML` 與 textContent 預覽。\",\"用 toggle 切 **CSS / XPath** 模式 — CSS 走 `querySelectorAll`,XPath 走 `document.evaluate`。\",\"Selector 寫錯會在右側顯示紅字錯誤訊息(瀏覽器原生回的)。\"],\"tips\":[\"想驗證 Playwright 的 `getByText` 等價 CSS?貼 HTML 後切 CSS,試 `text=` 是不會 work 的(那是 Playwright 自家語法)。\",\"iframe 內容不會被解析(只看一層 HTML)。\"]},\"twdata\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart TD\\n    A[訪問 /tools/tw-test-data] --\u003e B{已有 session?}\\n    B --\u003e|否| C[顯示密碼門]\\n    C --\u003e D[輸入密碼]\\n    D --\u003e E{POST /api/twdata/auth}\\n    E --\u003e|正確| F[發 session cookie + TG 通知成功]\\n    E --\u003e|錯誤| G{失敗 \u003c 3 次?}\\n    G --\u003e|是| H[TG 通知 + 計數++]\\n    G --\u003e|否| I[Ban 24 小時 + TG 警報]\\n    F --\u003e J[顯示資料產生器]\\n    B --\u003e|是| J\\n    J --\u003e K[選類型 / 性別 / 卡別 / 筆數]\\n    K --\u003e L[本機產生資料]\",\"steps\":[\"左邊側欄選 **類型**(身分證 / 統編 / 行動電話 / 信用卡)。\",\"身分證可指定**性別**,信用卡可指定 **Visa / Mastercard / JCB**。\",\"設定**筆數**(1~1000),按 `Generate`,右側列出結果,可一次複製全部。\",\"信用卡會通過 **Luhn 演算法**,可丟給 Stripe / 綠界 / 藍新等的測試端點。\"],\"tips\":[\"身分證碼校驗碼計算公式與內政部官方一致,可以拿去填表單(假名請自己填)。\",\"統編加入官方第 7 位是 7 的特殊規則,所以可以通過大多數驗證器。\"],\"note\":\"⚠️ 僅供測試。不要把這些資料拿去做身分驗證、申辦業務或任何真實用途。\"},\"cheatsheet\":{\"title\":\"如何使用\",\"steps\":[\"上面三個 tab 切換 **Robot Framework / Playwright / Appium**。\",\"輸入框輸入關鍵字(e.g. `wait`, `click`, `iOS`),會即時過濾 snippet。\",\"每段右上角的 `Copy` 直接複製到你的測試檔。\"],\"tips\":[\"找不到的語法?開 issue 在 [MarkwwLiu/dev](https://github.com/MarkwwLiu/dev) 跟我說,我加。\"]},\"regex\":{\"title\":\"如何使用\",\"steps\":[\"左上的 Pattern 框輸入正則,**不要加開頭結尾的 `/`**。\",\"下方 flags 按鈕切換 `i` / `m` / `s` / `u` / `y`,`g` 永遠開啟以拿到全部 match。\",\"右邊立刻看到**命中數量**、**反白範圍**、**capture / named groups** 列表。\",\"Pattern 寫錯會在右邊顯示瀏覽器原生錯誤訊息。\"],\"tips\":[\"想抓 email?試試 `(?\u003cuser\u003e[\\\\w.+-]+)@(?\u003chost\u003e[\\\\w.-]+\\\\.\\\\w+)`\",\"為了避免災難性回溯凍結瀏覽器,輸入字串上限 100,000 字元、最多顯示 500 個 match。\"]},\"curl\":{\"title\":\"如何使用\",\"steps\":[\"把 cURL 指令貼進左邊(支援 `\\\\` 多行續行、單引號雙引號)。\",\"右上切目標格式:**fetch**(JS)、**Python requests**、**HTTPie**。\",\"右側即時產出對應程式碼,按 `Copy` 直接貼到你的專案。\"],\"tips\":[\"支援的 cURL flag:`-X` `-H` `-d` `--data-raw` `--data-urlencode` `-u` `-A` `-b` `-G`。其他無關 flag(`-k` `-s` `--compressed` 等)自動忽略。\",\"**fetch 輸出預設用 await / async**,需要包在 async function 裡用。\"]},\"timex\":{\"title\":\"如何使用\",\"steps\":[\"輸入框直接貼數字或 ISO 字串,**自動辨識**是秒、毫秒還是 ISO 8601。\",\"按 `Now` 把現在時間填入。\",\"下方下拉選任意時區,即時顯示**該時區的當地時間**。\",\"判讀為跨日邊界(23:00~01:00)時會跳出黃色警告 — 提醒你做跨日 / 月底測試。\"],\"tips\":[\"時區清單來自瀏覽器 `Intl.supportedValuesOf('timeZone')`,Node 22+ 與 Chrome 99+ 都支援完整 IANA 列表。\"]},\"jsonx\":{\"title\":\"如何使用\",\"steps\":[\"**Format**:貼進來的 JSON 自動 pretty print(2 空格)。勾「排序 keys」可整齊 diff。\",\"**Minify**:同樣的 JSON 壓成一行,適合塞進環境變數或 query string。\",\"**Validate**:左邊貼 JSON,中間貼 JSON Schema → 右邊列出所有違規的 path 與原因。\"],\"tips\":[\"Validator 支援:`type` / `required` / `properties` / `items` / `enum` / `pattern` / `minLength` / `maxLength` / `minimum` / `maximum` / `additionalProperties: false`。\",\"輸入上限 1MB,超過會跳錯訊息。\"]},\"qr\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[選內容類型] --\u003e B{URL/文字/WiFi/vCard/Email?}\\n    B --\u003e C[填內容]\\n    C --\u003e D[組合 payload string]\\n    D --\u003e E[qrcode lib 編碼]\\n    E --\u003e F[Canvas render]\\n    G[Logo PNG/SVG] --\u003e H{有 Logo?}\\n    H --\u003e|是| I[EC 鎖 H + 中央覆蓋 + pad ring]\\n    H --\u003e|否| J[使用使用者選的 EC]\\n    F --\u003e I\\n    F --\u003e J\\n    I --\u003e K[輸出 PNG / SVG]\\n    J --\u003e K\",\"steps\":[\"上方選 **內容類型**(URL / 純文字 / WiFi / vCard / Email)。每種有自己的填寫表單。\",\"右側設定 **前景 / 背景色、尺寸(128-1024px)、邊距、錯誤更正等級** (L/M/Q/H)。\",\"可選加 **中央 Logo**(拖入 PNG/SVG)— **加 Logo 後 EC 自動鎖為 H**,並在 Logo 周圍留白邊確保可掃描。\",\"下方即時預覽,按 **下載 PNG** 或 **下載 SVG**。\"],\"tips\":[\"**錯誤更正等級** L=7%、M=15%、Q=25%、H=30% 容錯。加 Logo 必須用 H 才不會掃不到。\",\"**WiFi QR** 是 Android / iOS 14+ 內建相機支援的格式 — 對到家裡 router 印一張貼牆上,客人來不用報密碼。\",\"**vCard QR** 名片背後印一個,別人掃就直接加入聯絡人。\",\"**對標 qr-code-generator.com**:他們 Logo 要付費,我們完全免費 + 無浮水印。\"]},\"glassneu\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[選風格 Glass 或 Neu] --\u003e B{Glass?}\\n    B --\u003e|是| C[選預覽背景 照片/漸層/深色]\\n    C --\u003e D[調 blur / 彩度 / tint / 邊框 / 陰影]\\n    D --\u003e E[CSS backdrop-filter recipe]\\n    B --\u003e|否| F[選表面色]\\n    F --\u003e G[調距離 / blur / 強度 / 圓角]\\n    G --\u003e H[算 light + dark 雙陰影]\\n    H --\u003e I{強度為負?}\\n    I --\u003e|是| J[加 inset 變凹陷]\\n    I --\u003e|否| K[凸起 raised]\\n    E --\u003e L{選輸出}\\n    J --\u003e L\\n    K --\u003e L\\n    L --\u003e M[CSS]\\n    L --\u003e N[Tailwind v4]\",\"steps\":[\"上方選 **Glass(毛玻璃)** 或 **Neumorphism(柔質感)**。\",\"**Glass 模式**:選一個 **預覽背景**(照片 / 鮮豔漸層 / 深色漸層)— 毛玻璃要有底色才看得出效果。然後調 **blur / 彩度 / tint(rgba 帶 alpha)/ 邊框 / 陰影**。\",\"**Neu 模式**:選 **表面色** + 拉 **距離 / blur / 強度 / 圓角**。**強度設負值** 會切換到凹陷(inset)模式。\",\"下面 **輸出** tab 切 CSS / Tailwind v4 任意 class。\"],\"tips\":[\"**Glass 要 backdrop-filter 支援** — Safari 14+ / Chrome 76+ / Firefox 103+ 都 OK,老瀏覽器看不到效果(但會 fallback 顯示半透明色)。\",\"**Neu 表面色不能是純白 / 純黑** — 演算法需要邊界值來算 light/dark 陰影,**淺灰**(#e0e5ec)是經典 neu 表面。\",\"**Glass 在深色背景** 通常用 `rgba(255,255,255,0.1)` 左右的白色 tint;**淺色背景** 用 `rgba(0,0,0,0.1)` 黑色 tint。\",\"對標 glassmorphism.com 與 neumorphism.io — **二合一同站** 是強差異化。\"]},\"boxshadow\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[Tailwind / Material preset] --\u003e B[多層陰影 stack]\\n    C[手動編輯每層 x/y/blur/spread/color + inset] --\u003e B\\n    B --\u003e D[即時預覽方塊]\\n    B --\u003e E{選輸出格式}\\n    E --\u003e F[CSS block]\\n    E --\u003e G[CSS value]\\n    E --\u003e H[Tailwind v4 bracket class]\",\"steps\":[\"上方點 **Tailwind preset**(`shadow-sm/md/lg/xl/2xl`)或 **Material elevation**(1-24,共 9 級)套用。\",\"右側可改 **方塊顏色 / 背景色 / 圓角**,讓預覽更貼近你實際的使用情境。\",\"下方 **陰影層** 區可疊加任意數量的陰影,每層調 **x / y / blur / spread / 色彩 / inset**;點 ✕ 刪除、+ 加一層。\",\"底部 **輸出** 切 3 種格式:CSS block / CSS value / Tailwind v4 任意 class。\"],\"tips\":[\"**多層陰影** 是現代設計的標配 — 一個淺一個深疊起來,真實感比單層強很多。Material 的每個 elevation 都是 **3 層疊加**(umbra / penumbra / ambient)。\",\"**inset** 讓陰影往內陷,適合做 **neumorphism** 效果(我們也有專門的 neumorphism 工具)。\",\"Tailwind v4 任意 class 直接吃 `shadow-[...]`,複製即用,**不用改 tailwind.config**。\",\"**spread = 0** 時會省略不輸出,讓 CSS 更乾淨。\"]},\"typescale\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[選 Fluid 或 Fixed] --\u003e B[選 modular ratio]\\n    B --\u003e C[Base 字級 px]\\n    C --\u003e D{Fluid 模式?}\\n    D --\u003e|是| E[小視窗 base + 大視窗 base + 兩個視窗寬度]\\n    D --\u003e|否| F[單一 base 就夠]\\n    E --\u003e G[算每個 step px min/max]\\n    F --\u003e H[算每個 step px = base × ratio^step]\\n    G --\u003e I[組 clamp 表達式]\\n    H --\u003e J[組 rem]\\n    I --\u003e K{選輸出格式}\\n    J --\u003e K\\n    K --\u003e L[Tailwind v4 at-theme]\\n    K --\u003e M[CSS variables]\\n    K --\u003e N[SCSS]\\n    K --\u003e O[純文字表格]\",\"steps\":[\"上方選 **Fluid clamp()**(現代,推薦)或 **固定 px / rem**(傳統)模式。\",\"選 **modular ratio**:Minor Second 1.067(密集)到 Golden Ratio 1.618(誇張)8 種音樂比例。多數 SaaS 用 Major Third(1.25)或 Perfect Fourth(1.333)。\",\"**Fixed 模式**:設 Base 字級(預設 16px)+ 最小 / 最大 step 範圍。\",\"**Fluid 模式**:設小視窗 base(手機,如 16px)+ 大視窗 base(桌面,如 20px)+ 兩個視窗寬度(預設 320 / 1440 px)。\",\"中間 **字級預覽** 即時顯示每階大小;下面 **輸出** tab 切 Tailwind v4 / CSS vars / SCSS / 純文字表格。\"],\"tips\":[\"**為什麼用 Fluid**:文字大小自動隨視窗縮放,**手機 / 平板 / 桌面 / 大螢幕都剛好**,不用寫一堆 @media query。\",\"**ratio 怎麼選**:文字密集的 dashboard 用 1.2-1.25;品牌 landing page 用 1.333-1.5;極簡 hero 用 1.618。\",\"Tailwind v4 直接吃 `@theme { --text-xl: ... }` 然後在 class 上用 `text-xl`,不用改 config 檔。\",\"對標 **utopia.fyi**(知名 fluid type scale 計算器),我們的輸出格式更乾淨、Tailwind v4 直接整合。\"]},\"gradient\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[選漸層類型] --\u003e B{Linear / Radial / Conic?}\\n    B --\u003e|Linear| C[調角度滑桿 0-360]\\n    B --\u003e|Radial| D[選圓形或橢圓 + 中心 XY]\\n    B --\u003e|Conic| E[起始角 + 中心 XY]\\n    C --\u003e F[色階編輯區]\\n    D --\u003e F\\n    E --\u003e F\\n    F --\u003e G[加色階 / 改色 / 改位置]\\n    G --\u003e H[即時預覽]\\n    H --\u003e I{選輸出格式}\\n    I --\u003e J[CSS block]\\n    I --\u003e K[CSS value]\\n    I --\u003e L[Tailwind v4 bg-bracket-class]\\n    I --\u003e M[SVG gradient]\",\"steps\":[\"上方選 **漸層類型**:**Linear**(線性)、**Radial**(放射)、**Conic**(圓錐 / 彩虹輪盤)。\",\"右邊側欄調 **角度 / 中心 / 形狀** 等漸層幾何參數。三種類型有不同的可調選項。\",\"下方 **色階** 區可任意拖滑桿改位置、點色塊改色、按 ✕ 刪除、按 +加一個。每個漸層至少要 2 個色階。\",\"**Preset** 列點任一個套用範例(日落 / Vaporwave / 極光 / 聚光燈 / 彩虹輪盤)。\",\"底部 **輸出** 切 4 種格式:CSS block / CSS value / Tailwind v4 任意 class / SVG `\u003clinearGradient\u003e` 定義。\"],\"tips\":[\"**Linear gradient 角度** CSS 規範是 **0° = 向上**,90° = 向右,跟我們直覺的時鐘方向一致(不是數學那種 0°=向右)。\",\"**Conic gradient** 在 SVG **不原生支援**,工具會輸出註解提示你改用 `\u003cforeignObject\u003e` 或 CSS background。\",\"**多色階漸層** 適合做 mesh gradient 替代品;放 5-7 個色階可以做出很滑順的效果。\",\"Tailwind v4 起 `bg-[...]` 任意 class **支援所有 CSS gradient 函式**,不用再寫自訂 utility。\"]},\"contrast\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[輸入前景色] --\u003e C[即時計算]\\n    B[輸入背景色] --\u003e C\\n    C --\u003e D[WCAG 2.1 ratio]\\n    C --\u003e E[APCA Lc]\\n    D --\u003e F{AA 內文 ≥ 4.5?}\\n    F --\u003e|不合格| G[沿 OKLab L 軸搜尋]\\n    G --\u003e H[推薦最近合格色]\\n    H --\u003e I[一鍵套用]\\n    F --\u003e|合格| J[✓]\",\"steps\":[\"上方填入 **前景色**(通常是文字)與 **背景色**,可用色票或直接輸入 hex / rgb / hsl / oklch。\",\"中間 **即時預覽** 顯示真實 UI 元件在這個配色下的樣子(標題 / 內文 / 小字 / 按鈕)。\",\"下方 **WCAG 2.1** 列出 ratio + 5 個檢查點(AA 內文 / AA 大字 / AAA 內文 / AAA 大字 / UI 元件),每項 Pass/Fail。\",\"右邊 **APCA**(WCAG 3 草案)列 Lc 值 + 3 個檢查點(內文 / 較大字 / 非文字)。\",\"**不合格時** 會跳出黃色推薦欄,顯示沿 OKLab L 軸找到的最近合格色 — 按 **套用** 直接換掉前景色。\"],\"tips\":[\"**WCAG 2.1 ratio** 範圍 1-21,黑白配對 = 21:1(滿分)。AA 是最低法定門檻(歐盟、美國政府網站要求),AAA 是進階。\",\"**APCA Lc** 是 WCAG 3 的草案演算法,**對亮度感知更準**,沒有 WCAG 2 對深色/淺色的偏差問題,Apple HIG 已開始參考。\",\"**前景/背景 互換 ⇅** 適合測試 dark mode 配色 — 點一下兩個顏色顛倒。\",\"**狀態同步到 URL hash** — 例如 `#1e90ff|ffffff`,複製網址直接分享配色測試。\"]},\"mdtrans\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[你的 .md 檔] --\u003e B[本機解析]\\n    B --\u003e C{選 LLM Provider}\\n    C --\u003e|OpenAI| D[fetch openai]\\n    C --\u003e|Anthropic| E[fetch anthropic]\\n    C --\u003e|Google| F[fetch gemini]\\n    D --\u003e G[翻譯後 markdown]\\n    E --\u003e G\\n    F --\u003e G\\n    G --\u003e H[下載 notes.en.md]\",\"steps\":[\"上方選 **Provider**(OpenAI / Anthropic / Google)+ **Model**(各家都有平價快速款 gpt-4o-mini / claude-haiku / gemini-flash)。\",\"貼入你自己的 **API Key** — 會存在這個瀏覽器的 localStorage,**永遠不上傳到我們的伺服器**。換 provider 時 key 各自獨立保留。\",\"選 **原文 → 目標** 語言(內建繁中、簡中、英、日、韓、法、德、西、越、泰)。\",\"拖入一個或多個 `.md` / `.mdx` 檔,按 **全部翻譯**。每個檔案會自動排隊,可隨時 **取消**。\"],\"tips\":[\"**Markdown 結構完整保留**:frontmatter (YAML) 結構、code block、inline code、連結 URL、HTML 標籤都不會被翻爛。\",\"翻譯結果檔名自動帶語言代碼(`notes.md` → `notes.en.md`),適合直接放進 SSG 的 i18n 目錄(Astro / Hugo / Docusaurus / VitePress 都吃)。\",\"Token 估算用 ~3 char/token 粗算僅供費用參考,實際以 provider 計費為準;**gpt-4o-mini / haiku / gemini-flash** 翻 100 篇文章通常不超過 1 美金。\",\"API Key 取得:OpenAI → platform.openai.com,Anthropic → console.anthropic.com,Google → aistudio.google.com(Gemini 還有免費 quota)。\"]},\"favicon\":{\"title\":\"如何使用\",\"flowchart\":\"mindmap\\n  root((Favicon 全套))\\n    輸入\\n      Emoji 🚀\\n      文字 9N\\n      上傳 logo\\n    渲染\\n      Canvas\\n      Padding\\n      背景色\\n      圓角\\n    輸出\\n      favicon.ico\\n      PNG 16-512\\n      apple-touch-icon\\n      Android Chrome\\n      PWA maskable\\n      MS tile\\n      HTML link\\n      manifest.json\\n    打包 ZIP\",\"steps\":[\"上方選 **輸入模式**:**Emoji**(快速可愛)、**文字**(品牌縮寫如 `9N`)、**上傳**(已有 logo)。\",\"依模式設定背景色、文字色、padding 等;**上傳** 模式可選圓角(iOS 風)、padding、背景。\",\"下方填 **應用名稱**(會寫進 `site.webmanifest`),按 **產生 favicon**。\",\"成功後右邊看到全尺寸預覽,展開 HTML / manifest snippet 區可直接複製,或按 **下載 ZIP** 拿全套檔案。\"],\"tips\":[\"ZIP 包含:`favicon.ico`(多解析度 16/32/48)、16-512 PNG 全套、apple-touch-icon、Android Chrome、**PWA maskable**、Microsoft tile、HTML snippet 與 site.webmanifest。\",\"**maskable icon** 是 Android 12+ 必備(讓桌面圖示能被裁成圓 / 圓角矩形而不變形);我們預留 10% 安全區。\",\"Emoji 模式在 macOS / iOS 用 Apple Color Emoji,Windows / Android 是系統 emoji,跨平台外觀會略有差異。\",\"**整個流程在你的瀏覽器** Canvas API 渲染,圖片**完全不上傳**(對比 realfavicongenerator.net 必上傳)。\"]},\"bezier\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖曳 SVG 控制點] --\u003e B[即時更新 x1 y1 x2 y2]\\n    C[點 Preset] --\u003e B\\n    B --\u003e D[參數方程取樣 60 點]\\n    D --\u003e E[SVG polyline 重繪曲線]\\n    B --\u003e F[動畫預覽 bar 套新 cubic-bezier]\\n    B --\u003e G{選輸出格式}\\n    G --\u003e H[CSS]\\n    G --\u003e I[Tailwind v4 ease-bracket-class]\\n    G --\u003e J[Framer Motion ease 陣列]\\n    G --\u003e K[at-keyframes 樣板]\",\"steps\":[\"左邊 **SVG 曲線** 拖曳兩個彩色圓圈控制點,即時看曲線變化。x 軸會自動 clamp 到 0-1(CSS 規範),y 軸可超出做 anticipate / overshoot。\",\"右邊 **數值欄** 可直接輸入精確數字,或上方的 **動畫時長** 切換 300/600/1000 ms 預覽。\",\"下方 **Preset** 點任一個套用(ease / Material / Tailwind 各家典型)。\",\"底部 **動畫預覽** 即時跑你目前的曲線;下面 **輸出** 切 tab 看 CSS / Tailwind v4 / Framer Motion / @keyframes 四種片段,點右上 Copy。\"],\"tips\":[\"**狀態同步到 URL hash** — 例如 `#0.25,0.1,0.25,1`,複製網址直接分享曲線。\",\"想做**回彈**(overshoot)?把 `y1` 設負數、`y2` 大於 1。`anticipate` preset 就是這樣做的。\",\"Tailwind v4 起支援 `ease-[cubic-bezier(...)]` 任意 class,**不用再寫 tailwind.config**。\",\"Framer Motion 的 `ease: [...]` 直接餵 4 個數字陣列,順序與 CSS 一樣。\"]},\"pdfunlock\":{\"title\":\"如何使用\",\"steps\":[\"上方選 **解鎖模式**:**移除限制**(免密碼,適合 owner-protected PDF)或 **輸入密碼**(真加密 PDF)。\",\"**移除限制** 模式直接拖檔 → 按解鎖 → 下載(用 pdf-lib 的 `ignoreEncryption` 重新存檔)。文字 / 表單完整保留。\",\"**輸入密碼** 模式先在上方輸入你**已知**的 PDF 密碼,然後拖檔 → 按解鎖。pdf.js 解密後我們會把每頁渲染成 JPEG 再重組成新 PDF。\",\"結果在右下角會顯示 **頁數** 與新檔大小。\"],\"tips\":[\"**重要**:本工具只能解鎖你**自己擁有**或**已被授權使用**的 PDF。請勿用於破解他人 PDF — 法律自負。\",\"如果你拖入的 PDF 真的需要密碼,卻選了「移除限制」模式,**會直接失敗**(pdf-lib 不接受真加密)。請切換到「輸入密碼」。\",\"**輸入密碼** 模式因為要 rasterize,**文字會變圖**,失去複製 / 搜尋。如果文件之後要編輯,先在原本能開啟的軟體取消密碼再拖進來。\",\"整個流程 pdf-lib + pdf.js **完全在你的瀏覽器** 跑,**密碼與檔案內容絕不離開本機**。\"]},\"imgsize\":{\"title\":\"如何使用\",\"steps\":[\"上方選一個 **preset**(政府 300KB、104 履歷 500KB、一般 2MB、LinkedIn 8MB)或選 **自訂** 輸入 KB 數。\",\"選輸出 **格式**:**JPEG**(相容性高,通吃)或 **WebP**(較小但部分舊系統不認)。\",\"拖入圖片,按 **開始壓縮**。我們用**二分搜尋**找能達標的最佳畫質,通常 5-7 次嘗試內完成。\",\"看「實際大小」/「畫質」/「尺寸」/「嘗試次數」四項結果,滿意就 **下載**。\"],\"tips\":[\"**如果單純調畫質無法達標**,我們會自動把圖片**縮小 25%** 再試,最多縮到 32×32 為止。\",\"**仍無法達標時** 會跳警告,通常代表目標太小;建議改 WebP(同畫質檔案 ~30% 小)或自己先裁切。\",\"**檔名會自動帶上目標大小**(例如 `照片-300kb.jpg`),方便上傳前確認。\",\"**所有運算在瀏覽器內 Canvas API**,照片完全不上傳。\"]},\"palette\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[輸入品牌色] --\u003e B[轉成 OKLCH]\\n    B --\u003e C[保留 H 不變]\\n    B --\u003e D[對 11 個 shade 套 TARGET_L]\\n    B --\u003e E[對 11 個 shade 套 C_SCALE]\\n    C --\u003e F[組合 50 100 200 ... 950]\\n    D --\u003e F\\n    E --\u003e F\\n    F --\u003e G{選輸出格式}\\n    G --\u003e H[Tailwind v4 at-theme]\\n    G --\u003e I[Tailwind v3 config]\\n    G --\u003e J[CSS variables]\\n    G --\u003e K[Hex 列表]\",\"steps\":[\"上方輸入你的**品牌色**(hex / rgb / hsl / oklch 都可以)+ 一個**名稱**(會出現在輸出的 class 名,如 `brand-500`)。\",\"中間色階預覽即時更新,**點任一色塊複製 hex**;最左淡、最右深,共 11 階。\",\"下方四個 tab 切換輸出格式:**Tailwind v4 `@theme`**、**v3 config**、**CSS variables**、**Hex 列表**,點右上 Copy 直接複製。\",\"整個工具狀態同步進 URL hash,**複製網址就能分享配色**。\"],\"tips\":[\"演算法在 **OKLab 感知色彩空間** 操作 — 色相不漂移、亮度均勻,比傳統 HSL 直接調 L 值的結果好很多。\",\"Tailwind v4 起內建 OKLCH 支援,**`@theme` 是最推薦的輸出**(可享受 v4 的色彩混合功能)。\",\"**名稱規則**:任意輸入會自動清理成 `kebab-case`(`My Brand!` → `my-brand`),空白會 fallback 成 `brand`。\",\"想對齊現有 Tailwind 色?把預設的 `bg-sky-500` (#0ea5e9) 等貼進來看色階差異 — 我們生成的 500 跟原色非常接近,但其他階會略有不同(本工具優先**品牌一致性**而非匹配官方數字)。\"]},\"pdfedit\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart TD\\n    A[拖入 PDF] --\u003e B[pdf.js 渲染每頁縮圖]\\n    B --\u003e C[網格顯示]\\n    C --\u003e D{點選縮圖}\\n    D --\u003e E[加入多選]\\n    E --\u003e F{要做什麼?}\\n    F --\u003e|批次旋轉| G[更新 PageOp.rotate]\\n    F --\u003e|批次刪除| H[移除選取頁]\\n    F --\u003e|單頁複製| I[duplicateAt]\\n    F --\u003e|拖曳排序| J[moveBy]\\n    G --\u003e K[縮圖即時轉角度]\\n    H --\u003e K\\n    I --\u003e K\\n    J --\u003e K\\n    K --\u003e L[按下載]\\n    L --\u003e M[pdf-lib copyPages + setRotation]\\n    M --\u003e N[新 PDF]\",\"steps\":[\"拖入一個 PDF,我們會把**每頁渲染成縮圖**顯示在網格中(大檔渲染需 5-20 秒)。\",\"**點任一頁縮圖**可選取,可多選;選取後上方工具列的「左/右轉、刪除」會作用在所有選取頁。\",\"每張縮圖底下還有 **個別操作**:↑↓ 排序、↺↻ 旋轉、⎘ 複製、✕ 刪除。\",\"順序就是輸出 PDF 的頁序,旋轉度數會直接寫進新檔。按 **下載新 PDF** 即時產出。\"],\"tips\":[\"**選取後再操作**比一頁一頁設定快 10 倍;例如把所有橫頁一鍵旋正。\",\"縮圖會即時顯示**旋轉角度**(右上角小標,例:90°),可預覽結果是否如預期。\",\"**複製**功能適合做章節分隔頁、夾入空白頁等場景。\",\"**所有操作純前端**,大檔案會吃較多瀏覽器記憶體,但**文件絕不上傳**。\"]},\"pdfcompress\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入 PDF] --\u003e B{壓縮模式?}\\n    B --\u003e|無損輕量| C[pdf-lib 重新存檔]\\n    C --\u003e D{勾選移除 metadata?}\\n    D --\u003e|是| E[清空 title author 等]\\n    D --\u003e|否| F[保留]\\n    E --\u003e G[output PDF 5-20 percent 縮減]\\n    F --\u003e G\\n    B --\u003e|Rasterize 重壓| H[pdf.js 渲染每頁]\\n    H --\u003e I[選 DPI 150 / 96 / 72]\\n    I --\u003e J{灰階?}\\n    J --\u003e|是| K[Canvas 轉灰階]\\n    J --\u003e|否| L[彩色保留]\\n    K --\u003e M[JPEG 編碼]\\n    L --\u003e M\\n    M --\u003e N[pdf-lib 組新 PDF 50-80 percent 縮減]\",\"steps\":[\"上方先選 **壓縮模式**:**無損輕量**(保留文字 / 表單)或 **Rasterize 重壓**(極限壓縮)。\",\"**無損**:勾選「移除 metadata」會額外省幾 KB(預設開啟)。\",\"**Rasterize**:選 **畫質**(高/中/低,對應 150/96/72 DPI)+ 可選 **灰階**(可再多壓 20-30%)。\",\"拖曳一個 PDF 進來,按 **開始壓縮**,看到原始 / 壓縮後 / 縮減百分比,滿意就 **下載**。\"],\"tips\":[\"**重要差異**:Rasterize 模式會把**文字變成圖**,失去複製 / 搜尋 / 機器可讀性。如果文件之後要再編輯,**用無損模式**。\",\"如果無損模式只壓 1-2%(罕見),代表你的 PDF 已經被別的工具優化過了 — 想再小只能 rasterize。\",\"Rasterize **高品質 150 DPI** 通常足以印刷;**中 96 DPI** 適合螢幕閱讀 + email 附件;**低 72 DPI** 只給預覽用。\",\"整個過程 pdf-lib + pdf.js **完全在你的瀏覽器** 跑,**文件永不離開本機**。\"]},\"pdfsplit\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart TD\\n    A[拖入 PDF] --\u003e B{選擇模式}\\n    B --\u003e|合併| C[多檔 + ↑↓ 排序]\\n    C --\u003e D[下載合併 PDF]\\n    B --\u003e|分割| E[輸入範圍 1-3, 5, 8-10]\\n    E --\u003e F[輸出 3 個檔]\\n    F --\u003e G[自動 ZIP]\\n    B --\u003e|抽頁| H[輸入頁碼]\\n    H --\u003e I[組成單一新 PDF]\",\"steps\":[\"上方三個 tab 切換 **合併 / 分割 / 抽頁** 模式。\",\"**合併**:拖入 2 個以上 PDF,用 ↑ ↓ 排序後按下載,輸出一個合併好的 PDF。\",\"**分割**:拖入一個 PDF,輸入範圍(例如 `1-3, 5, 8-10`),每段會輸出獨立檔,**自動打包成 ZIP** 下載。\",\"**抽頁**:同樣輸入範圍,但所有指定頁會被組成**一個** PDF。\"],\"tips\":[\"範圍支援多種分隔符:**逗號 / 分號 / 全形逗號 / 頓號** 都可以;範圍用 `-` 或 `–`(en-dash)。\",\"**分割**和**抽頁**的差別:`1-3, 5` 分割 → 兩個檔(1-3 一份、5 一份);抽頁 → 一個檔含 4 頁。\",\"合併時頁面順序就是上方列表的順序,**拖檔順序與排序按鈕**都會影響。\",\"整個流程 **pdf-lib 在你的瀏覽器** 處理,**文件永不離開本機**,合約、HR 文件、個資都可放心丟。\"]},\"img2pdf\":{\"title\":\"如何使用\",\"steps\":[\"上方先設定 **紙張**(A4 預設)、**方向**(自動會依第一張比例決定)、**單頁張數**(1/2/4 up,4-up 適合收據排版)、**邊距** 與 **JPEG 畫質**。\",\"拖曳一張或多張照片(支援 JPG / PNG / WebP / HEIC),縮圖會出現在下方。\",\"用 **↑ ↓** 按鈕調整順序,或按 **✕** 移除單張;順序就是 PDF 內頁的順序。\",\"確認後按 **下載 PDF**,本機 WebAssembly 即時組裝後送下載框。\"],\"tips\":[\"HEIC 會自動透過 WASM 解碼,**第一次拖檔較慢**(載解碼器約 600 KB),之後秒處理。\",\"**4-up** 配 A4 直式適合貼收據;**1-up** 配 Letter 適合 PDF 履歷照片。\",\"JPEG 畫質預設 92,文字密集的截圖建議拉到 95+,純照片 80-85 就夠。\",\"所有圖片**完全在你的瀏覽器**轉成 JPEG 後嵌入 PDF,**沒有任何資料上傳**到伺服器。\"]},\"heic\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入檔案] --\u003e B{副檔名判斷}\\n    B --\u003e|HEIC/HEIF| C[載入 heic2any WASM]\\n    B --\u003e|JPG/PNG/WebP| D[Canvas 直接讀]\\n    C --\u003e E[Canvas 重編碼]\\n    D --\u003e E\\n    E --\u003e F[單檔下載]\\n    E --\u003e G[2+ 檔 ZIP 打包]\",\"steps\":[\"上方先選**輸出格式**(JPG 預設、PNG 無損、WebP 較小),JPG / WebP 可調**畫質**(預設 92%)。\",\"拖曳或選檔(可多選 .heic / .heif),每個檔案會自動排隊轉換。\",\"轉好後可單檔下載,**兩檔以上**可一鍵打包 ZIP 一次抓走。\",\"若拖入的是 JPG / PNG / WebP,本工具會直接重新編碼成你選的格式(順便壓縮)。\"],\"tips\":[\"HEIC 解碼模組(約 600 KB)在拖第一張檔時才會載入,**首張會稍慢**,後續秒處理。\",\"整個過程在瀏覽器內 WebAssembly 完成,**照片不上傳**,適合處理私人 / 機密影像。\",\"EXIF / GPS metadata **不會保留**(隱私考量);需要保留請見後續 `exif-tool`(未上線)。\",\"iPhone 預設拍 HEIC 較省空間,**很多平台不認**(履歷網、政府系統、舊版 Windows),這時用此工具轉一下。\"]},\"imgbase64\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[切 Tab] --\u003e B{Encode / Decode?}\\n    B --\u003e|Encode| C[拖入多張圖]\\n    C --\u003e D[FileReader 讀進記憶體]\\n    D --\u003e E[base64 編碼]\\n    E --\u003e F[輸出 4 種片段]\\n    F --\u003e F1[data URI]\\n    F --\u003e F2[原始 base64]\\n    F --\u003e F3[HTML img tag]\\n    F --\u003e F4[CSS background-image]\\n    B --\u003e|Decode| G[貼 base64 或 data URI]\\n    G --\u003e H[Canvas decode]\\n    H --\u003e I[magic bytes 偵測真實 MIME]\\n    I --\u003e J[自動修正 + 預覽 + 下載]\",\"steps\":[\"**圖片 → Base64**:拖曳檔案或點選擇檔,每張圖會顯示縮圖、原始 / data URI 大小、增加百分比。\",\"點任一段 (data URI / 原始 base64 / HTML / CSS) 右上角的 `Copy` 直接複製。\",\"**Base64 → 圖片**:切到第二個 tab,把字串貼進去 → 按 `解碼預覽`,右側預覽 + 下載按鈕。\",\"純 base64(沒有 `data:` 前綴)記得先選正確的 MIME;貼完整 data URI 會自動沿用其 MIME。\"],\"tips\":[\"data URI 比原始檔大約 **33%**,塞 CSS / HTML 前評估一下是否會炸 bundle。\",\"data URI 適合**小圖**(icons、placeholder);大圖建議放 CDN 或用 `\u003cimg\u003e` 引用。\",\"若 base64 內容其實是 JPEG 但你選了 PNG,我們會自動偵測 magic bytes 修正 MIME 並產正確副檔名的下載檔。\",\"整個流程**完全在你的瀏覽器**進行,圖片從不離開本機。\"]},\"colorconv\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[貼任意格式顏色] --\u003e B[parseColor 自動偵測]\\n    B --\u003e C{解析成功?}\\n    C --\u003e|否| D[顯示錯誤]\\n    C --\u003e|是| E[轉成內部 sRGB 浮點]\\n    E --\u003e F[Hex]\\n    E --\u003e G[RGB]\\n    E --\u003e H[HSL]\\n    E --\u003e I[OKLCH via Ottosson 矩陣]\\n    E --\u003e J[OKLab]\\n    E --\u003e K[計算到 22 個 Tailwind 500 的 ΔE OK]\\n    K --\u003e L[列出最近 3 個 Tailwind class]\",\"steps\":[\"輸入框貼任何格式的顏色:`#1e90ff`、`rgb(30, 144, 255)`、`hsl(210, 100%, 56%)`、`oklch(64% 0.19 250)`、`dodgerblue` 都可以。\",\"右側即時顯示**五種格式**,點任一行的 `Copy` 直接複製。\",\"下方會列出**最接近的 Tailwind class**(用 OKLab 感知距離 ΔE 排序),做品牌色對應很方便。\",\"整個工具狀態會同步到 URL hash(`#1e90ff`),可以直接複製網址分享配色。\"],\"tips\":[\"**OKLCH** 是新一代色彩格式 (CSS Color Level 4),Tailwind v4 已內建支援,在亮度感知上比 HSL 更準。\",\"**ΔE** 是顏色距離指標,越小越接近;ΔE \u003c 1 一般人眼分不出來。\",\"支援 8 位 hex(含 alpha):`#1e90ff80` 代表 50% 不透明。\"]},\"mockapi\":{\"title\":\"怎麼用(這是設計器,不是 live mock server)\",\"steps\":[\"在左邊**新增 endpoint**:選 method、寫 path、設 status / delay / response body。\",\"右上選輸出格式(**Playwright / Mockoon / Postman / json-server**)。\",\"右側即時看到產出的 config,按 **Copy** 或 **Download**。\",\"拿到你選的工具裡跑(往下看 Tips)。\"],\"tips\":[\"**Playwright**:把下載的 `.ts` 加進你的測試專案,在每個 test 前呼叫 `await mockEndpoints(page)`。\",\"**Mockoon**:打開 Mockoon GUI → File → Open environment → 選下載的 JSON → 按啟動,API 在 `http://localhost:3001`。\",\"**json-server**:在 terminal 跑 `npx json-server db.json` → API 在 `http://localhost:3000`。\",\"**Postman**:File → Import → 選 collection,在 Postman 裡建 mock server。\"],\"note\":\"⚠️ 為避免被濫用,我們**沒有**在 `dev.9niche.com` 直接開出 endpoint。要 hosted mock 服務未來會另外做(Phase 2),需要登入 + rate limit + TTL 才會上。\"},\"bundle\":{\"title\":\"如何使用\",\"steps\":[\"輸入 npm 套件名稱(`react`、`lodash`、`@vercel/analytics`),也可指定版本(`react@19.2.4`)。\",\"按 **查詢** 或從下方 **熱門套件** chip 直接點。多次查詢會堆疊在下方,可並排比較。\",\"每筆結果顯示:**Min**(minified)、**Gzip**(實際傳輸大小,綠字)、**Deps**(相依套件數)、**Side effects**(可 tree-shake 的會顯示綠色)。\",\"綠色長條反映 gzip 體積(以目前清單中最大者為 100%),一眼看出哪個套件比較肥。\",\"點套件名連到 bundlephobia.com 詳細頁面;按 ✕ 移除一筆。\"],\"tips\":[\"**Gzip 大小** 才是真正用戶下載的量(比 minified 通常少 60-80%)。`lodash` 全包 25KB gzip,但 `lodash-es` 可 tree-shake 到只剩你用的那幾個函式。\",\"**Side effects = false** 表示套件標示為「無副作用」,bundler 可 tree-shake 掉沒用到的 exports。`react`、`lodash` 都是 yes。\",\"**date-fns vs dayjs vs moment**:這三個對比是經典 — moment 200KB gzip(別用)、dayjs 2KB、date-fns ~12KB 但可 tree-shake。\",\"**注意 deps 數**:相依越多,你的 lockfile 越長、CI install 越慢、CVE 風險越大。\",\"對標 bundlephobia.com:他們是來源,我們把多套件並排比較做得更順手,適合做 dep 評估會議。\"],\"note\":\"💡 本工具會發 fetch 到 **bundlephobia.com 公開 API**(這部分不是純本地)。**套件名稱會傳給 bundlephobia**,但這對開源套件名來說不算敏感資訊。\"},\"svgo\":{\"title\":\"如何使用\",\"steps\":[\"貼上 SVG 原始碼到左欄,或按 **開檔** 上傳 `.svg` 檔。\",\"右側網格切換 10 種最佳化(預設全開,可依需求關閉某些);**精度** 控制捨入小數位數(預設 2)。\",\"右欄即時顯示最佳化後 SVG,**節省 %** 直接顯示綠色 −X%。\",\"下方並排顯示 **前後渲染預覽**,確認最佳化沒破壞畫面(理論上不會,因為我們只移除無視覺影響的內容)。\",\"**複製** 直接拿去用,或 **下載 .svg**。\"],\"tips\":[\"**Sketch / Figma 匯出的 SVG** 通常多 30-60% 編輯器專屬屬性,啟用「移除編輯器屬性」一個動作就可以大瘦身。\",\"**精度 2 通常足夠** — 路徑座標 0.123456 跟 0.12 在 1000px 圖上肉眼分不出來。極簡 icon 可調 1,複雜 illustration 才需要 3。\",\"**移除預設屬性值** 涵蓋 `opacity=1`、`stroke=none`、`stroke-width=1` 等,瀏覽器渲染時自動套用同樣的預設,所以可放心移除。\",\"**對標 svgo / svgomg**:那邊功能更完整(70+ plugins),我們是「貼上即用、合理預設」的輕量版。\"],\"note\":\"💡 完全本地處理,**SVG 內容不會離開瀏覽器**。並排預覽用 `dangerouslySetInnerHTML` 直接嵌入,只在這個工具內信任你貼上的 SVG(不會用在別處)。\"},\"cvd\":{\"title\":\"如何使用\",\"steps\":[\"選 **色票模式**(顯示 12 色 swatches)或 **圖片模式**(上傳你的 dashboard / mock / chart)。\",\"九個面板同時顯示:**正常視覺** + **8 種色盲**,每個面板標題附該類型的人口比例。\",\"色票模式適合快速看品牌主色在色盲眼中變什麼樣;圖片模式適合檢查實際畫面(圖表、色階、icon、警告色)。\",\"看到某幾種色盲下兩個原本不同的顏色變成相近 → 你的設計需要加 **形狀 / icon / 文字標籤** 來輔助,不能只靠顏色區分。\"],\"tips\":[\"**紅綠色盲(Protan + Deutan)** 占男性 8% 左右,是最常見的,是無障礙第一優先檢驗對象。\",\"**藍黃色盲(Tritan)** 極罕見(\u003c0.01%)但仍要照顧 — 別讓黃藍對比成為唯一資訊。\",\"**用顏色 + 形狀 / 文字** 是黃金法則(WCAG 1.4.1),例如錯誤訊息加 ⚠ icon 而不只是紅色。\",\"**圖表用 ColorBrewer / Viridis** 等色盲友善 palette,避開純紅綠對比。\",\"矩陣源自 Brettel \u0026 Viénot \u0026 Mollon (1997) 與 Machado et al. (2009),業界標準。\"],\"note\":\"💡 全在瀏覽器內運算(canvas getImageData 像素操作),**圖片不上傳**。圖片超過 400px 會自動縮放以維持流暢度。\"},\"pwstrength\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[輸入密碼] --\u003e B[偵測字元類型 lower/upper/digit/symbol/other]\\n    B --\u003e C[計算字元池大小 N]\\n    C --\u003e D[bits = length × log2 N]\\n    D --\u003e E[弱模式扣分]\\n    E --\u003e F[全同字 / 純數字 / 常見字串 / 鍵盤連續]\\n    F --\u003e G[最終 entropy bits]\\n    G --\u003e H[bits → 5 級強度]\\n    G --\u003e I[bits → 5 種攻擊者破解時間]\\n    I --\u003e J[人類可讀 instant / minutes / years / billion years]\",\"steps\":[\"在密碼框輸入要檢測的密碼。按右側 👁 切換顯示 / 隱藏。\",\"上方 **強度條** 與 **bits 數字** 即時更新(0-120+ bits)。\",\"**弱模式提示** 出現黃色警告,例如「全同字元」、「純數字」、「常見序列(qwerty / 123456…)」、「鍵盤連續」。\",\"下方 **破解時間表** 列出 5 種攻擊者情境(從 rate-limited 線上 API 到 GPU 暴力 MD5)的預估破解時間。\"],\"tips\":[\"**bits 是「擴展熵」**,不是真隨機熵 — 對符合模式的密碼會偏低估,正常用戶用「mixed case + digit + symbol + 至少 12 字元」就能輕鬆達 80+ bits。\",\"**破解時間隨攻擊者變化巨大** — 同樣 60 bits,線上 API 要幾億年,但 GPU 撞 MD5 只要幾天。**儲存方絕對要用 bcrypt / argon2**,別用 SHA。\",\"**「全同字元」攻擊** — 即使是 32 個 `a`,真實熵極低(字典攻擊一秒破),不要被表面長度騙了。\",\"**對標 zxcvbn**:那是業界經典(800KB+),我們是輕量版(0 dep, ~1KB),適合簡單檢查。要精準評估建議用 zxcvbn。\"],\"note\":\"💡 整段檢測在你瀏覽器內跑,**密碼絕對不會送出任何網路請求**。即使這個頁面 inspect 也找不到密碼被送哪去 — 因為根本沒送。\"},\"cron\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[輸入 cron 表達式] --\u003e B{是 alias?}\\n    B --\u003e|@daily / @hourly…| C[展開為標準 5 欄]\\n    B --\u003e|否| D[直接切 5 欄]\\n    C --\u003e E[每欄 parseField]\\n    D --\u003e E\\n    E --\u003e F[逐 piece 拆 comma / range / step]\\n    F --\u003e G[展開為 Set 數字]\\n    G --\u003e H[matches 判斷某時刻是否命中]\\n    H --\u003e I[從現在開始走 minute by minute]\\n    I --\u003e J[收集前 N 次觸發]\\n    G --\u003e K[describe 自然語言]\\n    G --\u003e L[5 欄表格顯示]\",\"steps\":[\"**Cron 表達式** 框輸入 5 欄表達式(分 / 時 / 日 / 月 / 星期),或選下方 **常用範本** 一鍵套用。\",\"上方表格即時拆出每一欄的數字 + 範圍,語法錯誤直接紅字提示。\",\"下方 **自然語言描述** 用一句話講清楚(例 `at 09:00, on Mon, Tue, Wed, Thu, Fri`)。\",\"再下方表格列出 **下 N 次觸發**(預設 8,可調 1-50),含 **本地時間**、**ISO 8601**、**距現在多久**。\"],\"tips\":[\"**支援 alias**:`@yearly` / `@monthly` / `@weekly` / `@daily` / `@hourly`,內部會自動展開成 5 欄等價式。\",\"**支援名稱**:月份用 `jan`-`dec`、星期用 `sun`-`sat`(都不分大小寫);`mon-fri` 也接受。\",\"**dom + dow 都受限時** 是 OR 不是 AND(POSIX cron 慣例),例如 `0 0 1 * 1` 是「每月 1 日 **或** 每週一」午夜。\",\"**dow 7** 視為週日(Linux cron 慣例)。\",\"**對標 crontab.guru**:他們是純文字介面,我們加上即時觸發時間預覽,更直觀。\"],\"note\":\"💡 解析、自然語言、未來觸發都在你瀏覽器內運算,**不發任何網路請求**。觸發時間用瀏覽器本地時區計算。\"},\"regexr\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[Pattern + Flags] --\u003e B[new RegExp 編譯]\\n    B --\u003e C{語法 OK?}\\n    C --\u003e|否| D[顯示錯誤訊息]\\n    C --\u003e|是| E[exec 走遍 input 收集所有 match]\\n    E --\u003e F[每個 match 拆出捕捉組 + 命名群組]\\n    F --\u003e G[原文 segmentize → hl 高亮]\\n    F --\u003e H[input.replace pattern, replacement]\\n    H --\u003e I[替換結果]\\n    F --\u003e J[捕捉組表格]\",\"steps\":[\"**Pattern** 框輸入正則(會自動套用右側的 flags chip);語法錯誤會直接顯示紅色提示。\",\"**Replacement** 框可用 `$1`、`$2`…捕捉組編號、`$\u003cname\u003e` 命名群組、`$\u0026` 整段 match、`$$` 字面 `$`。\",\"**Flags** 可隨時切換 6 個(g/i/m/s/u/y),效果即時反映。\",\"下方依序顯示:原文高亮 + 替換結果 + 每一個 match 的捕捉組表格。\"],\"tips\":[\"**`g` flag** 才會走遍全部,沒勾的話我們也會自動補上(避免使用者疑惑為何只看到第一個)。\",\"**`u` flag** 預設開啟 — 才能用 `\\\\p{Script=Han}` 之類的 Unicode 屬性。\",\"**`s` flag**(dotAll) 讓 `.` 也匹配換行,實務上跨行抓多行區塊很常需要。\",\"**`y` flag**(sticky)只從上次結束位置開始,專業 lexer 才會用;一般情境不用開。\",\"對標 regex101.com:那邊功能強但有點重 + 廣告;我們純前端 + 簡單即時。\"],\"note\":\"💡 完全本地運算,**pattern / input 都不會離開瀏覽器**,適合處理含個資的字串。零寬度 match 有保護不會無窮迴圈。\"},\"httpcodes\":{\"title\":\"如何使用\",\"steps\":[\"輸入 **數字前綴**(`40` → 列出 400-409、`5` → 列出 5xx)或 **關鍵字**(`teapot`、`rate limited`、`redirect`)即時過濾。\",\"上方類別 chip 可勾選 / 取消 五大類別(1xx / 2xx / 3xx / 4xx / 5xx),配合搜尋一起用。\",\"點任一狀態碼數字框 **一鍵複製** 數字到剪貼簿(方便貼到 IDE / Postman / Slack 回覆)。\",\"看到 ⚠ 提示就是常見誤用 — 例如 401 跟 403 的差別(authentication vs authorization)、302 vs 307 的方法保留行為。\"],\"tips\":[\"**401 vs 403**:401 是「沒登入」,403 是「登入了但沒權限」— 後端常寫反,前端也常誤判。\",\"**302 vs 307**:302 在實務上會把 POST → GET(歷史包袱),要保留方法請用 **307**;**308** 是永久版的 307。\",\"**422 Unprocessable Content** 是 JSON API 驗證失敗的常用選擇(語法 OK 但語意錯) — 比 400 更精確。\",\"**429 Too Many Requests** 一定要回 **Retry-After** header,讓 client 知道何時可重試。\"],\"note\":\"💡 完全離線資料,不會發任何網路請求 — 即便斷網仍可查。資料源:RFC 9110、RFC 7725、IANA registry。\"},\"vid2gif\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入影片] --\u003e B[HTMLVideoElement loadedmetadata]\\n    B --\u003e C[拿到 duration / videoWidth / videoHeight]\\n    C --\u003e D[選 start / end / fps]\\n    D --\u003e E[計算總 frame 數]\\n    E --\u003e F{每個 frame}\\n    F --\u003e G[video.currentTime = t]\\n    G --\u003e H[await seeked event]\\n    H --\u003e I[canvas drawImage 截圖]\\n    I --\u003e J[gifenc quantize + applyPalette]\\n    J --\u003e K[gif.writeFrame + delay]\\n    K --\u003e L{下一個?}\\n    L --\u003e|有| F\\n    L --\u003e|無| M[gif.finish → Blob]\\n    M --\u003e N[下載 .gif]\",\"steps\":[\"拖入影片(MP4 / WebM / MOV);系統讀取 metadata 顯示尺寸與時長。下方有原始 video player 可預覽。\",\"**起點 / 終點 滑桿** 圈出要轉的秒數區間(避免整段影片變超大 GIF)。\",\"**fps** 5-30(15 fps ≈ GIPHY 標配)、**輸出寬度**(高度等比自動算)、**Palette 顏色數** 影響檔案大小、**Contain / Cover** 處理非標準比例。\",\"預估顯示 *N 個影格 + 解析度*,按 **轉成 GIF 並下載**,顯示編碼進度。\"],\"tips\":[\"**檔案爆增的原因** 通常是:時長太久、fps 太高、Palette 顏色太多。1-3 秒 × 10-15 fps × 128 色 通常剛好。\",\"**GIF 是 indexed colour**(8-bit palette),真實影片色彩會少很多。產品 demo / 截圖類效果好,寫實影片會明顯退化。\",\"**為什麼這個工具不用 ffmpeg.wasm?** ffmpeg.wasm 載入要 30MB+,我們用瀏覽器內建 video seek + gifenc 只需要 50KB,99% 場景夠用。\",\"**對標 ezgif.com**:他們上傳到雲端再回傳,且 100MB / 200 frame 限制 + 廣告;我們純本機處理 + 不上傳。\"],\"note\":\"💡 **video.seek 是非同步的**,我們等 `seeked` 事件才截下一張,確保畫面對得上時間;1 秒 15 fps 約 1-2 秒完成。影片**完全不離開瀏覽器**。\"},\"textdiff\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[左文字] --\u003e B[正規化選項]\\n    C[右文字] --\u003e B\\n    B --\u003e|忽略空白| D[collapse whitespace]\\n    B --\u003e|忽略大小寫| E[toLowerCase]\\n    D --\u003e F[切行]\\n    E --\u003e F\\n    F --\u003e G[LCS DP 表 O n×m]\\n    G --\u003e H[Traceback 取最佳對齊]\\n    H --\u003e I[Coalesce delete+insert → replace]\\n    I --\u003e J{每列}\\n    J --\u003e K[綠 = 新增]\\n    J --\u003e L[紅 = 移除]\\n    J --\u003e M[琥珀 = 變更]\\n    J --\u003e N[灰 = 不變]\\n    K --\u003e O[unified diff 輸出]\\n    L --\u003e O\\n    M --\u003e O\\n    N --\u003e O\",\"steps\":[\"把舊版貼到 **左欄**、新版貼到 **右欄**(空字串視為 0 行)。\",\"下方並排表格即時更新:**+ 綠** 新增、**− 紅** 移除、**~ 琥珀** 變更(相鄰刪除 + 新增會合併)、灰 = 不變。每行附對應行號(L / R)。\",\"(可選)勾 **忽略空白** 把多空格折成一個、**忽略大小寫** 比對。常用於格式化後檢查實質變化。\",\"**複製 unified diff** 輸出 git / patch 通用格式,可貼進 PR description / Linear / Slack。\"],\"tips\":[\"**LCS(最長共同子序列)** 是 git diff 的底層演算法,O(n×m) 時間複雜度;1000 行 vs 1000 行差不多 10ms 內完成。\",\"**replace = delete + insert 配對合併** — 相鄰的刪除 + 新增視作同一行被改了。視覺上更直覺。\",\"**忽略空白** 對檢查程式碼縮排重排很有用(prettier 處理過後內容相同)。\",\"**對標 diffchecker.com**:他們要 paywall 才能用 ignore options,我們完全免費 + 不上傳。\"],\"note\":\"💡 整個 diff 在瀏覽器內跑(WASM 速度,LCS 純 JS 寫法已夠快)。**不上傳**,合約 / 機密文件比對適用。\"},\"ts\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[輸入字串] --\u003e B{純數字?}\\n    B --\u003e|是| C{位數 ≥ 12?}\\n    C --\u003e|是| D[視為毫秒]\\n    C --\u003e|否| E[視為秒 → ×1000]\\n    B --\u003e|否| F[Date.parse ISO]\\n    F --\u003e G{合法?}\\n    G --\u003e|否| H[顯示錯誤]\\n    G --\u003e|是| I[ms 取得]\\n    D --\u003e I\\n    E --\u003e I\\n    I --\u003e J[衍生 s / ms / ISO / 相對時間]\\n    I --\u003e K[Intl.DateTimeFormat 各時區]\\n    K --\u003e L[15 個時區可加 / 移除]\",\"steps\":[\"貼上 **epoch 秒**(10 位)、**epoch 毫秒**(13 位)、或 **ISO 8601**(`2024-01-01T00:00:00Z`),系統自動判讀。按 **現在** 一鍵填入當下時間。\",\"上半部顯示四種轉換:Unix 秒、Unix 毫秒、ISO 8601、相對時間(`5 分鐘前`、`in 3 days`)。\",\"下半部列出多個時區的當地時間,預設 UTC / Taipei / LA / London;按 **+ 加入時區** 從下拉選別的,或按 **✕** 移除。\",\"hover 任一行右側出現 **複製** 按鈕。\"],\"tips\":[\"**10 位 vs 13 位** — 系統用「位數 ≥ 12 視為毫秒」這個啟發法判讀(2024 epoch 秒是 10 位,毫秒是 13 位)。要強制毫秒可貼 `1700000000000` 這種 13 位。\",\"**ISO 8601** 接受多種寫法:`2024-01-01`、`2024-01-01T12:00:00`、`2024-01-01T12:00:00+08:00`、`2024-01-01T12:00:00.123Z` 等。\",\"**相對時間** 用四捨五入,最小 1(避免「0 second ago」),最大單位是 year。\",\"**對標 epochconverter.com**:他們廣告多 + 介面老,我們純前端 + 多時區同時顯示。\"],\"note\":\"💡 時區用瀏覽器內建 **Intl.DateTimeFormat**(2025 年支援超過 600 個 IANA 時區),offset 自動處理夏令時。\"},\"lorem\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A{選詞庫} --\u003e|拉丁| B[Lorem Ipsum 84 個詞]\\n    A --\u003e|繁中| C[63 個系統 / UI 詞]\\n    A --\u003e|Tech| D[50 個產品 / 架構詞]\\n    B --\u003e E{選單位}\\n    C --\u003e E\\n    D --\u003e E\\n    E --\u003e|字| F[從詞庫隨機抽 N 個]\\n    E --\u003e|句| G[每句 6-14 詞 + 句尾標點]\\n    E --\u003e|段| H[每段 3-6 句]\\n    F --\u003e I[mulberry32 seed PRNG]\\n    G --\u003e I\\n    H --\u003e I\\n    I --\u003e J[輸出 + 字元/字數統計]\",\"steps\":[\"選 **詞庫**:拉丁(經典)、**繁中**(中文版面用,避免英文假文造成的視覺斷層)、**Tech**(產品 demo 用語)。\",\"選 **單位**:字 / 句 / 段;輸入 **數量**(字最多 2000,句段最多 100)。\",\"拉丁可勾選 **從 Lorem ipsum dolor sit amet… 開頭**(設計界慣例)。\",\"按 **↻ 重新抽** 換另一組;同樣的 seed 產生一樣的內容(版面測試可重現)。\"],\"tips\":[\"**繁中假文** 是這個工具的差異化 — 設計中文版面時用英文 lorem 會誤判字寬、行高、CJK 字距,放繁中假文才接近實際視覺。\",\"**Tech 詞庫** 適合做 SaaS / 開發者工具的 mockup,出現像 Pipeline / Telemetry / Cache 這種詞,比 lorem 更貼近實際 UI。\",\"**段落分隔** 用兩個換行(`\\\\n\\\\n`),貼進 Markdown / Notion / Figma 都會正確切段。\",\"**字數統計** 中文按字元算(每個字 1)、英文按空白分詞算 — 設計時要符合實際語意。\"]},\"uuid\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A{選版本} --\u003e|v4| B[crypto.getRandomValues 16 bytes]\\n    A --\u003e|v7| C[Date.now → 48-bit 時間戳]\\n    B --\u003e D[bits 設 version + variant]\\n    C --\u003e E[crypto.getRandomValues 10 bytes 填補]\\n    E --\u003e D\\n    D --\u003e F[格式化 8-4-4-4-12]\\n    F --\u003e G{格式選項}\\n    G --\u003e|去連字符| H[移除 -]\\n    G --\u003e|大寫| I[toUpperCase]\\n    G --\u003e|大括號| J[加 {}]\\n    H --\u003e K[輸出 textarea]\\n    I --\u003e K\\n    J --\u003e K\\n    K --\u003e L[複製 / 下載 .txt]\",\"steps\":[\"選版本:**v4**(完全隨機,最通用)或 **v7**(內嵌時間戳,可依時序排序,適合作 DB primary key)。\",\"輸入 **數量**(1-1000),按 **產生**。\",\"下方格式選項:**大小寫**(GitHub / GitLab 用小寫;COM API 常用大寫)、**保留連字符**(取消後變成 32 字無分隔)、**包大括號**(C# Guid 格式)。\",\"按 **複製全部** 一鍵拷貝(以換行分隔),或 **下載 .txt** 拿檔案。\"],\"tips\":[\"**v7 是 2024 RFC 9562 標準** — 時間排序 + 不可預測,**取代 ULID** 的趨勢。SQL primary key 用 v7 比 v4 索引效率好(B-tree 不會 random 寫入)。\",\"**v4 vs v7 選擇**:對外公開的 ID 用 v4(不洩漏時間)、內部資料庫主鍵用 v7(分頁排序快)。\",\"**WebCrypto getRandomValues** 是 CSPRNG(密碼學安全亂數),統計上不會碰撞 — 一秒產生 10 億個 v4 連續 100 年才有 50% 機率重複。\",\"**去連字符的 32 字元版** 適合短網址 / 路徑參數,字典序排序仍正確。\"],\"note\":\"💡 1000 個 v4 約 0.5ms,1000 個 v7 約 1ms — 一秒可產生上百萬。完全本機運算,不會像有些線上工具偷偷 log 你的 UUID。\"},\"hashes\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A{模式} --\u003e|文字| B[TextEncoder UTF-8 編碼]\\n    A --\u003e|檔案| C[file.arrayBuffer]\\n    B --\u003e D[5 種演算法平行計算]\\n    C --\u003e D\\n    D --\u003e E[MD5 自實作 RFC 1321]\\n    D --\u003e F[SHA-1 WebCrypto]\\n    D --\u003e G[SHA-256 WebCrypto]\\n    D --\u003e H[SHA-384 WebCrypto]\\n    D --\u003e I[SHA-512 WebCrypto]\\n    E --\u003e J[hex 16 進位輸出]\\n    F --\u003e J\\n    G --\u003e J\\n    H --\u003e J\\n    I --\u003e J\\n    J --\u003e K[hover 顯示複製按鈕]\",\"steps\":[\"選 **文字** 或 **檔案** 模式。\",\"**文字模式** 即時計算 — 輸入內容變動立刻看到五種 hash;**檔案模式** 選一個檔案後按計算(大檔需要幾秒)。\",\"hover 任一行右側出現 **複製** 按鈕,一鍵拷貝。\",\"可用來:**校驗下載完整性**(對方提供 SHA-256,你算自己的對是否一致)、**API 簽章雛形**、**密碼快速比對**(注意:bcrypt / argon2 才是儲存密碼正解,SHA 系列不夠)。\"],\"tips\":[\"**MD5 / SHA-1 已不安全**(碰撞攻擊已實作),只能用於非安全用途(checksum / 去重)。\",\"**SHA-256 是現代標準**,git commit hash、加密貨幣、TLS 都用它;**SHA-512** 64-bit 處理器上反而更快,密碼學首選。\",\"**儲存密碼請用 bcrypt / scrypt / argon2**,SHA 系列暴力破解極快,不適合密碼儲存。\",\"**WebCrypto 是 W3C 標準 API**,所有現代瀏覽器內建,速度接近原生 C(因為就是底層 C 實作)。\"],\"note\":\"💡 MD5 是自實作(WebCrypto 不支援);SHA 系列直接呼叫瀏覽器內建,速度極快。完全本機運算,**密碼 / API key 不會離開瀏覽器**。\"},\"imgresize\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入圖片] --\u003e B[讀取原始尺寸]\\n    B --\u003e C{選模式}\\n    C --\u003e|上限框| D[等比塞進 maxW × maxH]\\n    C --\u003e|最長邊| E[較長那邊縮到指定 px]\\n    C --\u003e|百分比| F[原尺寸 × percent]\\n    C --\u003e|強制尺寸| G[直接設成 W × H 會變形]\\n    D --\u003e H{禁止放大?}\\n    E --\u003e H\\n    F --\u003e H\\n    G --\u003e H\\n    H --\u003e|是| I[Math.min 限制不超過原尺寸]\\n    H --\u003e|否| J[原樣輸出]\\n    I --\u003e K[canvas drawImage 雙線性]\\n    J --\u003e K\\n    K --\u003e L{格式}\\n    L --\u003e M[JPG / PNG / WebP]\\n    M --\u003e N[下載]\",\"steps\":[\"拖入一張圖,系統顯示原始尺寸與檔案大小。\",\"選 4 種模式之一:**上限框** 等比塞進 maxW×maxH(最常用,避免出血)、**最長邊** 把較長那邊縮到指定 px、**百分比** 整張等比、**強制尺寸** 不保比例直接擠。\",\"**禁止放大** 預設開啟 — 若原圖比目標小就保留原樣,避免無意義放大模糊。\",\"選輸出格式(**JPG** 最小、**PNG** 無損透明、**WebP** 折衷)與畫質,按 **下載**。\"],\"tips\":[\"**等比塞進 1920×1080** 是上傳 IG / FB / blog 封面的通用做法,不會變形。\",\"**最長邊 1024** 是上傳到大部分平台(Discord / Slack / LINE)安全值,通常不會壓到品質。\",\"**強制尺寸** 主要用在需要嚴格規格(政府表單 / 證件照),其他場景請選等比。\",\"**WebP 比 JPG 同畫質省 30%** — 2025 年所有瀏覽器都支援,可放心用。\"],\"note\":\"💡 純前端 canvas 縮放,使用瀏覽器內建雙線性 / 雙三次演算法。**檔案不上傳**,個資 / 機密照片放心。\"},\"gifmake\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入多張圖] --\u003e B[createImageBitmap 解碼]\\n    B --\u003e C[依列表順序排序]\\n    C --\u003e D[gifenc lazy import]\\n    D --\u003e E[每個 frame 畫到 canvas]\\n    E --\u003e F{fit?}\\n    F --\u003e|contain| G[縮到框內 + bg 填邊]\\n    F --\u003e|cover| H[填滿 + 裁邊]\\n    G --\u003e I[quantize 取 N 色 palette]\\n    H --\u003e I\\n    I --\u003e J[applyPalette indexed]\\n    J --\u003e K[gif.writeFrame + delay]\\n    K --\u003e L{下一張?}\\n    L --\u003e|有| E\\n    L --\u003e|無| M[gif.finish → Blob]\\n    M --\u003e N[下載 .gif]\",\"steps\":[\"拖入多張圖片(JPG / PNG / WebP,上限 100 張)。每張縮圖右上有編號表示在 GIF 中的順序。\",\"點 **◀** / **▶** 調整順序,或 **✕** 移除單張。\",\"**寬度 / 高度** 指定 GIF 尺寸(來源不同尺寸時用 **Contain** 留邊或 **Cover** 裁邊統一);**delay** 是每張顯示時間(20-1000 ms);**Palette 顏色數** 是色階數(8-256),越少檔案越小,但顏色階梯越粗。\",\"勾選 **循環播放** = 無限循環(IG / Slack 都支援);關閉 = 只播一次。按 **建立 GIF**,完成後自動下載。\"],\"tips\":[\"**GIF 是 indexed colour**(最多 256 色)— 真實照片會出現色階,純色 / 圖示 / 截圖效果最好。\",\"**delay 速度建議**:100ms = 10fps(平順)、67ms ≈ 15fps(像 GIPHY)、40ms = 25fps(電影感,檔案大)。\",\"**Contain vs Cover**:Contain 不裁但會有黑邊(背景色可改);Cover 不留邊但會裁掉部分內容。\",\"**對標 ezgif.com**:他們功能多但 UI 很 2010,而且要上傳;我們極簡 + 純前端 + 不上傳。\"],\"note\":\"💡 編碼速度視張數與尺寸而定(50 張 480×480 約 5 秒)。**GIF 沒有透明動畫**(只有第一張可以有 alpha),想要透明動畫請用 WebP / APNG。\"},\"pdf2img\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入 PDF] --\u003e B[pdfjs-dist lazy import]\\n    B --\u003e C[getDocument 取頁數]\\n    C --\u003e D{範圍?}\\n    D --\u003e|全部| E[range1..numPages]\\n    D --\u003e|指定| F[parsePageRange]\\n    F --\u003e G{合法?}\\n    G --\u003e|否| H[顯示錯誤]\\n    G --\u003e|是| E\\n    E --\u003e I[每頁 page.render 到 canvas]\\n    I --\u003e J{倍率 scale}\\n    J --\u003e K[1× = 72dpi · 2× = 144dpi · 4× = 288dpi]\\n    K --\u003e L[canvas.toBlob 出圖]\\n    L --\u003e M{頁數}\\n    M --\u003e|1 頁| N[直接下載]\\n    M --\u003e|多頁| O[jszip 打包]\\n    O --\u003e P[下載 ZIP]\",\"steps\":[\"拖入 PDF,系統會即時讀取頁數(完全在你瀏覽器內,**不上傳**)。\",\"選 **輸出格式**(PNG 無損透明 / JPG 小檔 / WebP 折衷)+ **倍率**(2× 通常剛好,4× 超清但檔案大)。\",\"**頁面範圍** 預設全部;切「指定範圍」可輸入 `1-3, 5, 8-10` 只渲染部分頁面。\",\"按 **渲染並下載**。單頁直接下載;多頁自動打包 ZIP,檔名 `xxx-p001.png`、`xxx-p002.png`…\"],\"tips\":[\"**倍率 = 解析度**:1×=72dpi(網頁顯示)、2×=144dpi(預覽 / Retina)、3×=216dpi、4×=288dpi(列印 / 報表)。\",\"**JPG 比 PNG 小 80%+**,但會破壞細小文字邊緣。**文字 PDF 用 PNG;掃描 PDF 用 JPG**。\",\"**WebP** 折衷:比 PNG 小 30%、比 JPG 文字清晰。需 Chrome 32+ / Safari 14+。\",\"**對標 ilovepdf / smallpdf**:他們要上傳到雲端,我們完全本機處理,合約 / 機密文件 / 個資適用。\"],\"note\":\"💡 渲染速度視倍率與頁數而定(2× × 10 頁 ≈ 5 秒;4× × 100 頁 ≈ 3 分鐘)。建議大檔先用 1-2 頁試水。\"},\"clippath\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[選預設] --\u003e B{形狀類型}\\n    B --\u003e|polygon| C[拖點 / 雙擊刪 / 右鍵加]\\n    B --\u003e|circle / ellipse| D[滑桿改中心 + 半徑]\\n    B --\u003e|inset| E[四邊內縮 + 圓角]\\n    C --\u003e F[shapeToCss]\\n    D --\u003e F\\n    E --\u003e F\\n    F --\u003e G{輸出格式}\\n    G --\u003e H[CSS clip-path 值]\\n    G --\u003e I[Tailwind v4 bracket class]\\n    G --\u003e J[SVG path d 屬性]\",\"steps\":[\"從上方 **預設** 挑一個起點(三角、菱形、六邊、星、箭頭、平行四邊、圓、橢圓、內縮)。\",\"**Polygon 模式**:在編輯器拖點調位置 · **雙擊** 刪掉這個點 · **右鍵** 在這點之後加一個新點。\",\"**Circle / Ellipse / Inset 模式**:右側滑桿調中心、半徑、四邊內縮、圓角。\",\"右下圖示展示套用在實際照片上的效果(避免你以為 clip-path 只在純色上看起來好看)。\"],\"tips\":[\"**polygon 至少需要 3 個點** — 刪到只剩 3 個會鎖住。\",\"**Tailwind v4 bracket class** 把空白換成 `\\\\_` 讓 class 名稱合法,可直接複製貼進 `\u003cdiv class=\\\"...\\\"\u003e`。\",\"**SVG path** 適合做 `\u003cclipPath\u003e` 元素或當 mask:把 `\u003cpath d=\\\"...\\\"\u003e` 放進 SVG defs。\",\"**對標 bennettfeely.com/clippy**:Clippy 是經典但 10 年沒大更新;我們補上 Tailwind v4 bracket class 與 SVG path 輸出。\"],\"note\":\"💡 clip-path 在 Safari / Chrome / Firefox 都支援,IE 全不支援(已 EOL);舊版 Edge 用 `-webkit-` 前綴。\"},\"imgcrop\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入圖片] --\u003e B[loadImageFromFile]\\n    B --\u003e C[正規化座標 0..1]\\n    C --\u003e D{選比例}\\n    D --\u003e|自由| E[四角拖點]\\n    D --\u003e|鎖比例| F[applyAspect 自動同步另一邊]\\n    E --\u003e G{圓形?}\\n    F --\u003e G\\n    G --\u003e|是| H[canvas ctx.arc + clip]\\n    G --\u003e|否| I[直接 drawImage]\\n    H --\u003e J{格式}\\n    I --\u003e J\\n    J --\u003e|PNG| K[無損 + 透明]\\n    J --\u003e|JPG| L[加白底 + quality]\\n    J --\u003e|WebP| M[小檔 + 可透明]\\n    K --\u003e N[toBlob → 下載]\\n    L --\u003e N\\n    M --\u003e N\",\"steps\":[\"拖入圖片(JPG / PNG / WebP / GIF)。預覽會顯示原圖,中央有一個 80% 大小的裁切框,**周圍會變暗**。\",\"**拖框中央** 移動位置,**拖 4 個角** 改大小。選 **比例**(1:1、16:9、9:16、4:3、3:4、3:2、2:3 或自由),系統自動同步另一邊。\",\"勾選 **圓形 mask** 做大頭貼(PNG / WebP 才能保留透明)。\",\"下方選輸出格式 + 畫質(JPG / WebP)+ 輸出寬度(可放大或縮小),按 **下載** 拿檔。\"],\"tips\":[\"**1:1 圓形** 適合 IG / Twitter / Slack 大頭貼;**16:9** 適合 YouTube 縮圖、blog cover;**9:16** 適合 IG Story / Reels。\",\"**輸出寬度** 留空用裁切框的實際解析度(no upscale);**填數字** 會放大或縮小(Canvas resample,雙線性)。\",\"**圓形 + JPG** = 變回方形(JPG 不支援透明) — 想要真圓形請選 PNG 或 WebP。\",\"**WebP** 比 PNG 小 25-30%、比 JPG 小 30-40%,且 2025 年瀏覽器全支援。\"],\"note\":\"💡 整段流程在你瀏覽器內跑(loadImage → canvas draw → toBlob),**檔案不上傳**。適合證件照、機密文件、個人照片。\"},\"csv\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[貼上 / 開檔] --\u003e B[detectDelimiter 5 行 sampling]\\n    B --\u003e C{,  ;  Tab  | ?}\\n    C --\u003e D[parseAllRows 狀態機]\\n    D --\u003e E[處理引號 / 跳脫 / 欄內換行]\\n    E --\u003e F{有首列標題?}\\n    F --\u003e|是| G[第一列當 headers]\\n    F --\u003e|否| H[自動 col1..colN]\\n    G --\u003e I[表格化預覽]\\n    H --\u003e I\\n    I --\u003e J[columnStats: unique / empty / numericRatio]\\n    I --\u003e K{輸出格式}\\n    K --\u003e L[JSON]\\n    K --\u003e M[TSV]\\n    K --\u003e N[Markdown table]\\n    K --\u003e O[Normalised CSV]\",\"steps\":[\"貼 CSV 或按 **開檔** 上傳 `.csv` / `.tsv`。系統會 **自動判分隔符**(`,` `;` Tab `|`),也可手動覆寫。\",\"**首列為標題** 預設開啟;若你的檔案沒標題列,取消勾選 → 自動補 `col1`、`col2`…\",\"下方即時 **表格預覽**(超過 200 列只顯示前 200,輸出區仍包含全部)。每欄標題下方顯示 **unique 值數**、**空欄數**、**數值欄判斷**(`#`)。\",\"最下方 **輸出** 切 4 種格式:**JSON**(物件陣列)、**TSV**(複製到 Google Sheet)、**Markdown**(GFM table)、**正規化 CSV**(統一引號)。\"],\"tips\":[\"**RFC 4180 全支援** — 引號內逗號 / 引號內換行 / `\\\"\\\"` 跳脫雙引號全部處理,連 Excel 救不回來的怪檔案我們也能讀。\",\"**歐式 Excel CSV** 用 `;` 分隔(德 / 法 / 中歐),自動判分隔符會幫你選對。\",\"**TSV → Google Sheet**:輸出 TSV 後按 Cmd-C → Google Sheet 任一格 Cmd-V,自動分欄。\",\"**數值欄判斷**(`#`):當 80% 以上 cell 是合法數字才標記,可幫你快速辨識 schema。\"],\"note\":\"💡 200 列以上只顯示前 200 列加速渲染,**但輸出區會包含完整資料**,可放心轉換。檔案完全不上傳。\"},\"jsondiff\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[貼上左 JSON] --\u003e C[parseJsonLoose]\\n    B[貼上右 JSON] --\u003e D[parseJsonLoose]\\n    C --\u003e E{兩邊都合法?}\\n    D --\u003e E\\n    E --\u003e|否| F[顯示 parse 錯誤]\\n    E --\u003e|是| G[deep walk 比對]\\n    G --\u003e H{每個節點}\\n    H --\u003e|primitive ===| I[unchanged]\\n    H --\u003e|primitive 不等| J[changed]\\n    H --\u003e|object| K[遞迴 key]\\n    H --\u003e|array| L[by index 比]\\n    K --\u003e M{key 存在哪邊?}\\n    M --\u003e|左有右無| N[removed]\\n    M --\u003e|左無右有| O[added]\\n    M --\u003e|兩邊有| K\\n    J --\u003e P[統計 + 高亮表格]\\n    I --\u003e P\\n    N --\u003e P\\n    O --\u003e P\",\"steps\":[\"**左** 貼舊版 JSON,**右** 貼新版 JSON(空字串視為 `null`)。\",\"右側 diff 表格即時更新,**+** 綠色是新增、**−** 紅色是移除、**~** 琥珀色是變更。\",\"上方統計列顯示四種變化的數量,可勾選 **顯示不變的欄位** 看完整結構。\",\"按 **複製 diff 報告** 拿純文字版,可貼進 PR description、Linear、Slack。\"],\"tips\":[\"**路徑用 JSONPath 風格** — `$.user.tags[0]` 直觀好讀,可直接貼進 jq / lodash get / Postman 取值。\",\"**陣列是 by index 比對**(LCS 太貴) — 如果你只調整順序,會被看成全 changed;預先排序再 diff 比較準。\",\"**型別變化** 例如從 `{}` 變成 `1` 算 changed(不深入比較)。\",\"**對標 jsondiff.com**:他們要看廣告,我們純函式 + 純前端,沒有任何上傳。\"],\"note\":\"💡 整個 diff 在瀏覽器內跑,不上傳。適合比對 production / staging API 差異、config 審查、回歸測試 baseline。\"},\"urlenc\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[輸入字串] --\u003e B{方向}\\n    B --\u003e|編碼| C{格式}\\n    B --\u003e|解碼| D{格式}\\n    C --\u003e|URL| E[encodeURI]\\n    C --\u003e|URI component| F[encodeURIComponent]\\n    C --\u003e|Base64| G[utf-8 → bytes → btoa]\\n    C --\u003e|Base64URL| H[Base64 後 swap +/]\\n    C --\u003e|HTML entities| I[\u0026 \u003c \u003e \\\" ' 轉義]\\n    C --\u003e|Unicode escape| J[BMP \\\\uXXXX / 補集 \\\\u{...}]\\n    D --\u003e|反向| K[decode]\\n    E --\u003e L[即時輸出]\\n    F --\u003e L\\n    G --\u003e L\\n    H --\u003e L\\n    I --\u003e L\\n    J --\u003e L\\n    K --\u003e L\",\"steps\":[\"選 **編碼** 或 **解碼**,然後從下拉選 6 種格式之一。\",\"在左邊輸入字串,**右邊即時更新**結果,不用按按鈕。\",\"按 **↕ 輸出當輸入** 一鍵反向,常用來驗證 round-trip(編碼 → 解碼 = 原文)。\",\"按 **複製** 一鍵拷貝到剪貼簿,可直接貼到 curl / Postman / 瀏覽器網址列。\"],\"tips\":[\"**URL vs URI component** — `encodeURI` 保留 `:/?#\u0026=`,適合整段網址;`encodeURIComponent` 全部轉義,適合 query string 的 value。\",\"**Base64 vs Base64URL** — JWT、OAuth state、URL 安全的 cookie 用 Base64URL(`+/=` → `-_` + 無 padding);信件附件 / 一般場合用標準 Base64。\",\"**HTML entities** 支援 named(`\u0026amp;`)、numeric(`\u0026#39;`)、hex(`\u0026#x4e2d;`)三種解碼;編碼預設只轉 5 個基本(`\u0026 \u003c \u003e \\\" '`)避免過度轉義。\",\"**Unicode escape** 自動判斷 BMP(`\\\\u4e2d`)與 astral plane(`\\\\u{1f30d}` for emoji)。\"],\"note\":\"💡 純函式 + 內建 API,無第三方依賴,bundle 幾乎 0KB 增加。可離線使用。\"},\"mdedit\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[左欄輸入 Markdown] --\u003e B[marked 解析 GFM]\\n    B --\u003e C[DOMPurify sanitize]\\n    C --\u003e D{切換模式}\\n    D --\u003e|預覽| E[渲染為 HTML]\\n    D --\u003e|HTML 原始| F[顯示 HTML 文字]\\n    D --\u003e|目錄| G[extractToc 抓 # 標題]\\n    A --\u003e H[computeStats 即時統計]\\n    H --\u003e I[字 / 字元 / 列 / 標題 / 閱讀時間]\\n    E --\u003e J{輸出}\\n    F --\u003e J\\n    J --\u003e K[複製 MD / HTML]\\n    J --\u003e L[下載 .md / 含樣式 .html]\",\"steps\":[\"左邊輸入 Markdown(或按 **開檔** 上傳 `.md` / `.markdown`、按 **載入範例** 看完整語法)。\",\"右邊三種預覽:**預覽**(渲染後樣式)、**HTML 原始**(可直接複製貼進你的網頁)、**目錄**(自動抓出所有 `#` 標題)。\",\"頂部即時顯示 **字數、字元、列、標題、閱讀時間** 統計。\",\"輸出按鈕:**複製 HTML** 拿純片段、**下載 .html** 拿含樣式可獨立開啟的單檔。\"],\"tips\":[\"**GFM 全支援** — 表格、任務清單(`- [x]`)、刪除線(`~~text~~`)、code fence、auto-link。\",\"**換行轉 `\u003cbr\u003e`** 開啟時,單一換行也算斷行(原本要兩個空格才會 break,符合很多人習慣)。\",\"**HTML 輸出已 DOMPurify 過濾** — 即便你的 Markdown 內含 `\u003cscript\u003e`,複製出去的 HTML 也是安全的。\",\"**下載 .html** 會包一份簡單的 reset stylesheet,可獨立給別人 / 寄信 / 列印用,不依賴本站。\",\"**對標 dillinger.io / stackedit**:他們會 ping 第三方伺服器(雲端同步),我們完全離線。\"],\"note\":\"💡 解析在你的瀏覽器跑(marked + DOMPurify,總共約 80KB),首次載入後即時。即便關掉網路,工具照樣能用。\"},\"codefmt\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[貼上 / 選檔] --\u003e B{自動判讀?}\\n    B --\u003e|是| C[detectLanguageFromContent]\\n    B --\u003e|否| D[手動選語言]\\n    C --\u003e E[language]\\n    D --\u003e E\\n    E --\u003e F{模式}\\n    F --\u003e|美化| G[lazy import prettier/standalone + plugin]\\n    G --\u003e H[prettier.format with options]\\n    F --\u003e|壓縮| I{語言支援?}\\n    I --\u003e|JSON/CSS/HTML| J[純函式 minify]\\n    I --\u003e|其他| K[切回美化提示]\\n    H --\u003e L[輸出 + 大小比較]\\n    J --\u003e L\",\"steps\":[\"選 **美化** 或 **壓縮** 模式,然後選語言(或讓「自動判讀」幫你猜)。\",\"把原始碼貼進左邊輸入框,或按 **選檔** 上傳檔案(會自動依副檔名選對語言)。\",\"美化模式下展開 **進階選項** 可改 Prettier 的設定:每行寬度、縮排、單引號、分號。\",\"按 **美化 / 壓縮** 按鈕,結果出現在右側。可 **複製** 或 **下載**(副檔名自動依語言)。\"],\"tips\":[\"**Prettier 是業界標準** — VS Code / WebStorm 內建,我們就是把它包成不用裝、不用設定就能用的版本。\",\"**壓縮目前只支援 JSON / CSS / SCSS / HTML** — JS 壓縮要用 Terser(我們暫不內建,以免 bundle 變肥)。要 minify JS 推薦命令列 `npx terser`。\",\"**自動判讀** 用內容啟發式判斷,JSON / HTML / CSS 通常很準;模糊時可手動覆寫。\",\"**HTML 壓縮** 會保留 `\u003cpre\u003e` / `\u003ctextarea\u003e` / `\u003cscript\u003e` / `\u003cstyle\u003e` 內容(避免破壞排版與程式)。\"],\"note\":\"💡 第一次按下 **美化** 時會載入 Prettier 引擎(約 400KB,從 CDN 拉取後 cache)。之後使用都是即時。\"},\"pdfwm\":{\"title\":\"如何使用\",\"flowchart\":\"flowchart LR\\n    A[拖入 PDF] --\u003e B[pdf-lib 解析]\\n    B --\u003e C{浮水印類型}\\n    C --\u003e|文字| D[fontSize/color/opacity/rotation]\\n    C --\u003e|圖片| E[embedPng/Jpg + scale]\\n    C --\u003e|無| F[跳過]\\n    D --\u003e G{是否平鋪?}\\n    G --\u003e|是| H[斜向 tile 整頁]\\n    G --\u003e|否| I[單一位置]\\n    E --\u003e I\\n    F --\u003e J{加頁碼?}\\n    H --\u003e J\\n    I --\u003e J\\n    J --\u003e|是| K[N · N/total · Page N of total]\\n    J --\u003e|否| L[輸出 PDF]\\n    K --\u003e L\",\"steps\":[\"拖入一個 PDF(單檔上限 200 MB),整份檔案只在你瀏覽器內處理,**永不上傳**。\",\"選擇 **浮水印類型**:**文字**(可調字級 / 顏色 / 透明度 / 旋轉,可斜紋平鋪整頁)、**圖片**(拖入 PNG / JPG,通常是公司 LOGO)、或關閉。\",\"(可選)勾選 **自動加頁碼**,選格式(`N` / `N/總頁` / `Page N of 總頁`)與位置。\",\"按 **套用並下載**,瀏覽器會跳出一份加了浮水印的新 PDF。\"],\"tips\":[\"**斜紋平鋪** 是合約 / 草稿 / 機密文件的標準防複印手法 — 整頁滿版斜向 `機密文件 — 請勿外流` 字樣,複印後仍清晰可見。\",\"**圖片浮水印** 建議用透明背景 PNG(LOGO),透明度 25-35% 通常剛好不擋內文又看得到。\",\"**頁碼** 三種格式都從第 1 頁開始 — 如果你的 PDF 有封面想跳過,目前需要先用 PDF 頁面編輯把封面拆掉。\",\"**對標 ilovepdf / smallpdf**:他們會把檔案上傳到雲端再回傳,我們完全在你瀏覽器內處理,合約 / 機密文件適用。\"]}},\"footer\":{\"made\":\"由 Mark Liu 用 Next.js 打造\"}},\"now\":\"$undefined\",\"timeZone\":\"UTC\",\"children\":\"$L66\"}]\n"])</script><script>self.__next_f.push([1,"66:[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\nb:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#ffffff\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"content\":\"#0a0b10\",\"media\":\"(prefers-color-scheme: dark)\"}]]\n8:null\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"title\",\"0\",{\"children\":\"程式碼美化 / 壓縮 — Prettier 線上版(10 種語言,純前端) · Dev Tools\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"用 Prettier 引擎美化 JS / TS / CSS / HTML / JSON / Markdown / YAML 等 10 種語言;一鍵 minify JSON / CSS / HTML。內容只在瀏覽器內處理,不上傳。可調進階選項(印刷寬度、tab 寬、單引號等)。\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Mark Liu\"}],[\"$\",\"link\",\"3\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"程式碼美化,code formatter,prettier 線上,json 美化,css 美化,html 美化,json minify,css minify,html minify,beautify js\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://dev.9niche.com/zh-TW/tools/code-beautifier\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://dev.9niche.com/en/tools/code-beautifier\"}],[\"$\",\"link\",\"8\",{\"rel\":\"alternate\",\"hrefLang\":\"zh-TW\",\"href\":\"https://dev.9niche.com/zh-TW/tools/code-beautifier\"}],[\"$\",\"meta\",\"9\",{\"name\":\"msvalidate.01\",\"content\":\"248B2967F6ABA299B672C089C01F845B\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\"程式碼美化 / 壓縮 — Prettier 線上版(10 種語言,純前端)\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"用 Prettier 引擎美化 JS / TS / CSS / HTML / JSON / Markdown / YAML 等 10 種語言;一鍵 minify JSON / CSS / HTML。內容只在瀏覽器內處理,不上傳。可調進階選項(印刷寬度、tab 寬、單引號等)。\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://dev.9niche.com/zh-TW/tools/code-beautifier\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:site_name\",\"content\":\"Dev Tools\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:locale\",\"content\":\"zh_TW\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image\",\"content\":\"https://dev.9niche.com/api/og?title=%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%BE%8E%E5%8C%96+%2F+%E5%A3%93%E7%B8%AE%2810+%E7%A8%AE%E8%AA%9E%E8%A8%80%29\u0026subtitle=Prettier+%E5%BC%95%E6%93%8E%E7%BE%8E%E5%8C%96+JS+%2F+TS+%2F+CSS+%2F+HTML+%2F+JSON+%2F+Markdown+%2F+YAML%2C%E4%B8%A6%E5%8F%AF%E4%B8%80%E9%8D%B5+minify+JSON+%2F+CSS+%2F+HTML%E3%80%82%E8%87%AA%E5%8B%95%E5%88%A4%E8%AA%9E%E8%A8%80\u0026category=data-format\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:alt\",\"content\":\"程式碼美化 / 壓縮(10 種語言)\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"程式碼美化 / 壓縮 — Prettier 線上版(10 種語言,純前端)\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"用 Prettier 引擎美化 JS / TS / CSS / HTML / JSON / Markdown / YAML 等 10 種語言;一鍵 minify JSON / CSS / HTML。內容只在瀏覽器內處理,不上傳。可調進階選項(印刷寬度、tab 寬、單引號等)。\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://dev.9niche.com/api/og?title=%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%BE%8E%E5%8C%96+%2F+%E5%A3%93%E7%B8%AE%2810+%E7%A8%AE%E8%AA%9E%E8%A8%80%29\u0026subtitle=Prettier+%E5%BC%95%E6%93%8E%E7%BE%8E%E5%8C%96+JS+%2F+TS+%2F+CSS+%2F+HTML+%2F+JSON+%2F+Markdown+%2F+YAML%2C%E4%B8%A6%E5%8F%AF%E4%B8%80%E9%8D%B5+minify+JSON+%2F+CSS+%2F+HTML%E3%80%82%E8%87%AA%E5%8B%95%E5%88%A4%E8%AA%9E%E8%A8%80\u0026category=data-format\"}]]\n"])</script></body></html>