工程師日常工具箱 2026:我每天用的 10 個瀏覽器內小工具(不用安裝、不用註冊)
從 Percentile 計算到 JWT decoder、Regex tester、JSON formatter。10 個我每天必用的純前端工具,全部能在 dev.9niche.com 找到。
💡 本文是我自己當工程師 10+ 年累積的「桌面工具箱」線上化清單。所有工具都 client-side 跑,貼進去的資料不會上雲端,敏感資料也能放心用。
目錄
1. 我每天用的 10 個工具(含使用場景)
-
為什麼選純前端工具
(1) 隱私:JWT / 內部 token 不該貼到雲端服務。(2) 速度:本機 JS 比 round-trip 雲端快。(3) 離線:飛機上 / 沒 Wi-Fi 也能用。
-
我曾經用過的雲端工具的問題
JSON formatter 的某個熱門站偷偷把使用者資料當 log 收集;JWT.io 雖然官方但每次 prod 環境的 token 都不該離開。最安全是 client-side。
| 工具 | 我的使用場景 | 替代品 |
|---|---|---|
| JSON Formatter | 看 API response 排版 / 找 missing field | jsonformatter.org |
| JWT Decoder | Debug 認證 token 看 claims | jwt.io |
| Base64 Encode/Decode | 處理 binary 資料 + Basic Auth | command line `base64` |
| URL Encoder/Decoder | QueryString 含特殊字元時 | 瀏覽器 console encodeURIComponent |
| Regex Tester | 正則沒一次寫對時 debug 用 | regex101.com |
| Percentile Calculator | QA 看 latency p50/p95/p99 用 | 本身要寫 Python script |
| Timestamp Converter | log 看 Unix timestamp 換人類時間 | epochconverter.com |
| Hash 計算(MD5/SHA-256) | 對比檔案完整性 / Git commit hash 確認 | 命令列 shasum |
| Diff Tool | 看兩段文字差異 / 比較 config 改動 | VSCode diff |
| cURL Generator | 從表單一鍵生成命令列 cURL 指令 | Postman → Code |
小提示
- 全部 10 個工具訪問 <a href="https://dev.9niche.com/">dev.9niche.com</a>
- 可以收藏在瀏覽器 bookmark bar 隨時用
2. Percentile 計算實戰:QA 為什麼一定要看 p99
-
情境:你的 API 平均 response time 100ms
看起來健康。但用 percentile 看你會發現:p50=80ms / p95=200ms / p99=2000ms。意思是 1% 的請求(每天可能上萬次)要 2 秒才回,這是 SLA 災難。
-
為什麼 average 騙人
9 個請求 100ms + 1 個請求 2000ms = average 290ms(看起來爛)。但其實是「9 個正常 + 1 個 outlier」。平均值被極值拉走,看不到真實 user 體驗。
-
我每週固定看的 percentile 集合
p50(中位數,看正常用戶體驗)、p95(看不滿意但能容忍的用戶)、p99(看最糟糕 1% 體驗,通常是 alert 條件)。
小提示
- 用 <a href="https://dev.9niche.com/zh-TW/tools/percentile">dev.9niche.com percentile calculator</a> 貼進 response time 數字立刻算
- Prod 環境 alert 設 p99 > N ms,比 average 敏感 10 倍
3. Regex Tester:3 個我每週用的場景
-
1. Log 過濾
從 100MB 的 nginx log 找出特定 user-agent 的 5XX 錯誤,用 `5\d\d.*ChromeOS` 一發中。但這正則寫錯一個字就要重跑,先在 tester 驗證。
-
2. Email / 電話 validation
前端 form 驗證最常用。但 Email regex 有 1000 個版本,要看實際需求。簡單版 `\S+@\S+\.\S+` 夠多數情況。
-
3. Refactor 找 / 取代
VS Code 內建 regex find/replace。複雜的先在線上 tester 寫好再貼回 VS Code,避免改錯 production code。
注意事項
規則寫太寬可能 catch 到不該 catch 的、寫太窄又 miss case。複雜 regex 建議寫單元測試覆蓋多種輸入。
4. JWT Decoder:Debug 認證問題必備
-
JWT 三段式結構
JWT 看起來是亂碼,實際是 3 段 base64:header.payload.signature。decoder 把它解開,你能看到 claims(如 user_id / exp / iat 等)。
-
最常見的 debug 場景
(1) 401 錯誤 — 看 exp 是不是過期了。(2) 403 錯誤 — 看 role / scope 是不是對。(3) 跨服務認證 — 看不同 service 的 audience 是不是匹配。
-
Decoder 的限制
Decoder 只能「讀」不能「驗證簽名」。簽名驗證需要 secret / public key,decoder 沒有。所以 decoder 出來的內容可能是「假造」的,prod 環境別只信 decoder 結果。
5. cURL Generator:為什麼比 Postman 好
-
cURL 的優勢
(1) 命令列,可寫進 script。(2) Output 可 pipe 給 jq / grep 等工具。(3) 不用打開 Postman 等 5 秒。(4) 可以分享給同事不用 export postman collection。
-
我的用法:dev 工具產生器 + 終端機微調
在 dev.9niche.com 用 cURL 表單填好 method / URL / headers / body,產生命令列指令。複製到 terminal 後再微調 token 等敏感資料(不在瀏覽器處理)。
-
Postman vs cURL 我的選擇
(1) 個人 debug:cURL(快)。(2) 團隊分享 API spec:Postman collection。(3) 自動化測試:pytest + requests > Postman。
小提示
- VS Code 的 REST Client extension 也是很好的 Postman 替代品
- Charles Proxy 截 HTTPS 也是 debug 利器(但要懂 SSL 中間人)
重點整理
- 1 純前端工具最大優勢:不用註冊、不用安裝、不上傳資料到伺服器(隱私安全)
- 2 10 個我每天用的:JSON formatter / Base64 / JWT / cURL / Regex / Percentile / Timestamp / Hash / URL encode / Diff
- 3 比 Postman / VS Code extension 輕量,新分頁打開就用
- 4 完整工具集訪問 dev.9niche.com,後續持續增加
相關連結
相關懶人包
2026 AI 工具全攻略:ChatGPT / Claude / Gemini 比較 + 10 大實戰應用
本篇含 2026 最強 AI 工具比較、寫作/設計/程式/辦公/學習 5 大類應用、Prompt 工程入門、免費 vs 付費判斷、7 天入門計畫
2026 AI 簡報工具完全攻略:10 分鐘做出專業簡報的秘密武器
比較 2026 年最好用的 AI 簡報工具:Gamma、Beautiful.ai、Canva AI、GenPPT、Plus AI,含免費方案、價格、實測心得與選擇建議。
2026 AI 簡報工具完全比較:Gamma、Tome、Beautiful AI 等 8 大工具實測評比
AI 簡報工具實測:Gamma、Tome、Beautiful AI、Canva AI、Presentations AI 等 8 款工具,依需求、預算、品質完整比較,10 分鐘做出專業簡報。
一般聲明
本站提供之資訊僅供參考,不保證其完整性與正確性。使用者應自行判斷資訊之適用性。