跳至主要內容

儀器櫃

一百件在瀏覽器裡跑完的工具

工作上常要臨時轉個格式、算個雜湊、看一下 JWT 裡面寫什麼。網路上這類工具很多, 但你貼進去的東西會不會被留下來,沒有人說得準——而那些東西常常是公司的資料。

所以這些我自己做了一套。全部在你這個分頁裡算完,不上傳、不連線、不記錄; 頁面載入完成之後不會再發出任何網路請求,這件事寫成測試,沒過就不會部署。 開 DevTools 的 Network 分頁自己看,筆數應該是零。也可以裝起來離線用。

100 / 100 已完成⌘K 搜尋離線與本地資料 →
100 / 100
A

文字處理

數、排、比、洗。處理別人丟過來的一坨字。

A01字數統計字元、字、行、段落與閱讀時間,中英混排分開計算。A02命名與大小寫轉換camelCase、snake_case、kebab-case、PascalCase、CONSTANT_CASE 與標題式大寫一次全出。A03行排序與去重逐行排序、去重、反轉、加行號、前後綴,支援自然排序與忽略大小寫。A04尋找取代純文字或正規表達式取代,支援擷取群組與多行模式,即時預覽命中處。A05文字比對逐行或逐字比對兩段文字,自寫 Myers 差異演算法,不送出任何內容。A06中文排版修整中英之間補空格、全形半形正規化、標點統一、直引號改彎引號。A07空白正規化Tab 與空格互換、去行尾空白、壓縮空行、統一縮排寬度。A08Slug 產生把標題轉成網址片段,可選保留或移除非 ASCII、自訂分隔符與長度上限。A09假資料產生中英姓名、地址、電話、Email、UUID、Luhn 測試卡號與亂文,供填表與測試用。A10敏感資訊遮蔽敏感把身分證、卡號、手機、Email、IP 與長串 token 遮掉——貼 log 給同事前先過一遍。
B

編碼轉換

同一串位元的不同寫法之間來回。

B01Base64 編解碼文字與檔案的 Base64 編解碼,支援 URL-safe 變體與 Data URI 產生。B02URL 編解碼percent-encoding 編解碼,並把 query string 拆成表格編輯後重組。B03HTML 實體編解碼具名與數值實體雙向轉換,可只轉最小必要字元或全部非 ASCII。B04Unicode escape\uXXXX、\xNN、\u{...} 與碼位檢視,逐字看出是哪個字元在搞鬼。B05BaseX 轉換Hex、Base32、Base58、Base64url 與位元組陣列之間互轉。B06換行與編碼檢查CRLF 與 LF 互換、BOM 偵測與移除、UTF-8 有效性驗證與不可見字元標示。B07程式字串轉義把一段文字轉成可貼進 JSON、Java、C、Python、Shell 或 SQL 的字串常值。B08Morse 與拼讀碼Morse 電碼雙向轉換,以及電話上唸英數字用的 NATO 拼讀字母。B09字母位移ROT13、任意位移的 Caesar 與 Atbash。這是遮擋,不是加密——要加密請用 E07。B10Hex 檢視器任何檔案的 hexdump,附 ASCII 側欄與檔頭簽章辨識,大檔在 Worker 裡串流讀。
C

資料格式

JSON 與它的鄰居們:驗證、查詢、互轉、生成型別。

C01JSON 格式化格式化、壓縮、排序鍵值與驗證,語法錯誤標到行列與位移。C02格式互轉JSON、YAML、TOML、XML、CSV 與 query string 互轉。YAML/TOML 支援常用子集,頁內列明界線。C03JSON 查詢用路徑語法從大包 JSON 撈出需要的欄位,求值器自己寫,沒有 eval。C04JSON 轉型別從一份 JSON 樣本產生 TypeScript interface、Zod schema、Go struct 或 Pydantic model。C05JSON 差異結構化比對兩份 JSON:新增、刪除、型別改變與值改變分開列出,不是文字比對。C06CSV 檢視器貼上或拖入 CSV/TSV,排序、選欄、轉置、去重與統計,大檔交給 Worker。C07SQL 格式化把一行長 SQL 攤成可讀的縮排,關鍵字大小寫可選,支援常見方言的語法糖。C08SQL 與資料互轉CSV/JSON 產生 INSERT 語句,或把貼上的 INSERT 拆回表格。值一律參數化跳脫。C09.env 轉換敏感.env 與 JSON、YAML、docker-compose environment、Shell export 互轉,含引號處理。C10curl 轉程式碼敏感把一條 curl 指令轉成 fetch、axios、Python requests 或 httpie。只解析,不會發出請求。
D

開發者

每天開著的那幾個分頁。

D01正規表達式測試即時標示命中與擷取群組,跑在 Worker 裡並設超時,災難性回溯不會凍住這一頁。D02Cron 解譯把 cron 字串翻成白話,並列出接下來幾次執行時刻。支援五欄與 Quartz 六欄。D03JWT 檢視敏感解出 header 與 payload、標示過期時間,可用你自備的密鑰在本機驗 HMAC 簽章。D04ID 產生與解析UUID v4/v7、ULID、NanoID 批次產生,並能把既有 ID 反解出版本與時間戳。D05時間戳轉換Unix 秒、毫秒、微秒與 ISO 8601、RFC 2822 互轉,含本地與 UTC 並列。D06位元運算AND、OR、XOR、位移與遮罩的逐位檢視,附 IEEE 754 浮點拆解。D07Semver 比較版本號排序比較,以及 ^ ~ >= 這類範圍到底涵蓋哪些版本。D08Commit 訊息Conventional Commits 表單產生器,含 breaking change 標記與字數檢查。D09HTTP 速查狀態碼、請求與回應標頭、快取指令的離線速查,可搜尋。D10目錄樹繪製把縮排清單畫成 ├── └── 的樹狀圖,貼進 README 或 issue 就能用。
E

密碼與安全

亂數來自 getRandomValues,原語一律走 WebCrypto,沒有自製密碼學。

E01密碼產生器敏感crypto.getRandomValues 取樣、無取模偏差,並直接告訴你這串密碼有幾 bit 熵。E02密語產生器敏感多字組成的密語,比同長度亂碼好記且好打。熵依實際字表大小計算,不虛報。E03密碼強度檢測敏感估算熵、比對常見密碼與鍵盤序列、抓出替換字母的老把戲。完全在本機判斷。E04雜湊計算文字與檔案的 SHA-256/384/512 與 SHA-1、MD5。後兩者只適合校驗,頁內有標記。E05HMAC 計算敏感用你的密鑰算 HMAC-SHA256/384/512,對 webhook 簽章除錯很好用。E06檔案校驗拖入下載的檔案,貼上官方公布的 checksum,直接告訴你符不符合。E07AES 加解密敏感AES-256-GCM 加密文字或檔案,金鑰由 PBKDF2-SHA256 600,000 次迭代導出,每次新的 salt 與 IV。E08金鑰對產生敏感WebCrypto 產生 RSA 或 ECDSA 金鑰對,匯出 PEM 與 JWK。私鑰只存在這個分頁。E09TOTP 驗證碼敏感輸入 secret 在本機算出六位動態碼,附剩餘秒數。預設不儲存任何東西。E10憑證與公鑰檢視解析 PEM 憑證的主體、簽發者、有效期與 SAN,並算 SSH 公鑰指紋。
F

時間與日期

時區、工作日、民國年,以及會議前的倒數。

F01時區對照多個城市並排看同一個時刻,含日期跨越與日光節約標示。用瀏覽器內建時區資料。F02工作日計算兩個日期間的工作日數、往後推 N 個工作日,假日表可自行編輯。F03民國年與週次民國、西元、ISO 週次與年積日互換,填公文和排版本號都會用到。F04年齡與紀念日算實際年齡、下一個生日還有幾天,以及任兩個日期之間相隔多久。F05倒數與碼表倒數計時與碼表,含分段計時。時間到會通知,分頁在背景也算得準。F06番茄鐘工作與休息輪替,週期長度可調,完成次數留在本機。離線也能跑。F07跨時區會議時段把幾個人的時區與上班時間疊起來,直接看出哪幾個小時大家都醒著。F08輪班表產生依人數與班別循環產生輪班表,可匯出 CSV 或 ICS 行事曆檔。F09工時記錄開始、停止、加註,累計每日與每案工時,存在這台裝置,可匯出 CSV。F10簡報大字鐘全螢幕時鐘或倒數,超時會變色。放在講台的第二個螢幕上。
G

計算與換算

單位、利率、帳單、抽籤。算式解析器自己寫,不用 eval。

G01單位換算長度、重量、溫度、面積、體積、速度、壓力、資料量與能量,含台制坪與斤。G02進位轉換2 到 36 進位任意互轉,支援大整數與分組顯示。G03百分比計算佔比、增減幅、折扣前後價、稅前稅後,六種常問的百分比一次算完。G04運算式計算機打一整行算式直接出答案,支援函式、變數與括號。剖析器自己寫,沒有用 eval。G05統計摘要貼上一欄數字,得到平均、中位、標準差、四分位與直方圖。G06貸款試算本息平均攤還、寬限期與提前還款,逐期攤還表可展開檢查。G07複利與定期定額單筆與定期投入的複利成長,可扣通膨看實質購買力。G08電費水費試算累進級距電費與水費試算。級距表內建預設值但可整張編輯,以帳單為準。G09分帳計算多人分帳,支援不均分、指定項目、服務費與小費,算出誰該付誰多少。G10抽籤與分組抽人、抽獎、隨機分組、骰子。用 getRandomValues,可公開種子讓人事後驗證。
H

顏色與設計

OKLCH 色階、WCAG 對比、CSS 產生器。

H01顏色轉換HEX、RGB、HSL、OKLCH、LAB 互轉,支援螢幕取色(瀏覽器支援時)。H02對比度檢查WCAG 2.2 對比率與 AA/AAA 判定,並附 APCA 對照,直接給出可用的最近色。H03色階與配色從一個顏色長出感知均勻的色階,或推互補、三分、類似色配色。H04漸層產生器CSS 線性與放射漸層,中繼點可調,並在 OKLCH 空間插值避免中間變灰。H05陰影與邊框 CSSbox-shadow 多層堆疊、圓角與邊框產生器,即時預覽並輸出可貼的 CSS。H06緩動曲線編輯拖曲線調 easing,並排比對動畫節奏,輸出 cubic-bezier() 值。H07字級比例尺選一個比例產生完整字級階梯,附建議行高與 clamp() 的流體級距。H08色盲模擬把配色或截圖套上三型色覺缺陷的模擬,檢查是否只靠顏色傳達資訊。H09比例與解析度等比換算寬高、算出最接近的整數比,附常見裝置與社群平台尺寸。H10SVG 最佳化刪冗餘屬性與註解、收斂小數位、輸出可內嵌的 SVG。預覽走 blob 不內嵌 DOM。
I

圖片與檔案

Canvas 與 Worker 就地處理。檔案沒有上傳這個選項。

I01圖片壓縮與轉檔WebP、AVIF、JPEG、PNG 互轉與品質調整,顯示前後大小差。完全在本機編碼。I02圖片裁切縮放裁切、縮放、旋轉、翻轉,可鎖定比例與輸出指定像素尺寸。I03EXIF 檢視與移除看照片裡藏了什麼——含 GPS 座標與裝置型號——然後整批洗掉再輸出。I04截圖打碼在截圖上刷實心遮罩或馬賽克,像素真的被改掉,不是疊一層可還原的圖層。I05圖片拼接多張圖縱向或橫向接成一張,可設間距與背景,長截圖對照用。I06影片擷取影格開本機影片、逐格找到那一秒,存成 PNG 或 JPEG。影片不會離開這台電腦。I07QR Code 產生網址、WiFi、vCard 與純文字的 QR Code,可調容錯等級,輸出 SVG 或 PNG。I08QR 與條碼掃描相機用相機或一張圖掃 QR 與常見一維條碼。畫面不錄製、不外傳。I09Favicon 產生一張圖產生整組 favicon 與 apple-touch-icon,含多尺寸 ICO 與要貼的 HTML。I10圖片轉 PDF把掃描件或截圖依序併成一份 PDF,可選紙張大小與邊界。PDF 在瀏覽器裡組出來。
J

網路與生活

純算術的網路計算,加上幾件下班後也用得到的。

J01子網路計算IPv4 與 IPv6 的 CIDR 拆解:網段、廣播、可用範圍、遮罩與切分子網。純算術。J02網址解析與清理拆解網址每個部件、編輯 query,並一鍵移除 utm_ 這類追蹤參數再複製。J03User-Agent 解析把 UA 字串拆成瀏覽器、引擎、系統與裝置,並顯示你自己現在的 UA。J04裝置資訊螢幕、像素比、色域、記憶體、核心數與瀏覽器能力。只讀不送,用來回報 bug。J05台灣格式驗證身分證、居留證、統一編號與手機號碼的檢查碼驗證。純演算法,不查任何資料庫。J06BMI 與熱量需求BMI、基礎代謝與每日總熱量消耗,附台灣衛福部的體重分級對照。J07材積重計算長寬高換材積重,比對實重取計費重,常見快遞係數可切換。J08烹飪份量換算份數縮放、杯匙與公克互換(依食材密度)、烤箱溫度換算。J09便條紙Markdown 便條,存在這台裝置的瀏覽器裡,離線可用,可整包匯出。J10檢查表與決策表上線前檢查表與加權決策矩陣,可存多份、可列印、可匯出 Markdown。