九號工具站
返回列表

工程師日常工具箱 2026:我每天用的 10 個瀏覽器內小工具(不用安裝、不用註冊)

從 Percentile 計算到 JWT decoder、Regex tester、JSON formatter。10 個我每天必用的純前端工具,全部能在 dev.9niche.com 找到。

dev tools 工程師工具 開發工具 瀏覽器工具 2026
· 最後更新 2026-06-21 · 最後審閱 2026-06-21

💡 本文是我自己當工程師 10+ 年累積的「桌面工具箱」線上化清單。所有工具都 client-side 跑,貼進去的資料不會上雲端,敏感資料也能放心用。

1. 我每天用的 10 個工具(含使用場景)

下面 10 個都是我在 dev.9niche.com 整理 + 自己每天用的。順序按頻率排。
  • 為什麼選純前端工具

    (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

Percentile 是我作為 QA Leader 最常用的指標。下面 1 個實際案例你會懂為什麼重要。
  • 情境:你的 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 個我每週用的場景

Regex 是「寫的時候很爽、debug 很痛苦」的工具。線上 tester 救命。
  • 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 認證問題必備

Token 認證壞掉是後端工程師最常見的 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 好

Postman 強大但太重。日常 debug API 我比較常用 cURL。
  • 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,後續持續增加
ℹ️

一般聲明

本站提供之資訊僅供參考,不保證其完整性與正確性。使用者應自行判斷資訊之適用性。

意見反饋