瀏覽器工具實務指南
短篇支援內容，用來補充工具使用情境，而不是泛泛的部落格。
Regex 實用模式
整理表單驗證、路由比對與日誌搜尋中常用的 JavaScript Regex 模式、邊界範例、flag 檢查與複製前複核步驟。
撰寫 Regex 前，先列出必須比對和必須排除的樣例。再檢查 flag、捕獲群組與跳脫字元，避免模式在表單、日誌或路由中誤判。把邊界寫清楚之後，再考慮是否需要完整驗證、局部擷取或只是快速查找。
排除敏感資料
- 保留一個必須通過的範例和一個必須失敗的範例。
- 記錄目標執行環境是否使用 JavaScript RegExp。
- 把業務驗證和文字查找分開，不要讓一個 pattern 承擔所有規則。
Cron 排程範例
說明用 five-field cron 建立分鐘、小時、星期與月份重複任務時要檢查的範例與注意點。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
Cron 表達式應先確認分鐘、小時、星期與月份欄位的含義，再檢查執行環境是否使用 five-field、Quartz 或帶時區的變體。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
SEO 中繼標籤
說明搜尋摘要、社群預覽、canonical URL 與重複頁面處理中真正值得產生的 meta tags。
產生 meta tags 前，確認 title、description、canonical URL 與 Open Graph URL 是否描述同一個最終頁面。重複入口與錯誤 canonical 會削弱搜尋訊號。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
Iframe 預覽限制
解釋頁面為什麼會拒絕 iframe 載入，以及在響應式預覽中如何判斷 CSP 與 X-Frame-Options。
iframe 檢查前，先確認目標頁面是否透過 CSP 或 X-Frame-Options 禁止嵌入。工具只能展示瀏覽器允許載入的公開頁面。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
設計佔位文字
說明如何使用佔位文字測試版面、可及性與產品文案，而不掩蓋真實內容問題。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
佔位文字適合檢查間距、換行與空狀態，但應接近真實內容長度。過於整齊的假文字會隱藏按鈕、表格與卡片中的溢出問題。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
瀏覽器工具工作流程
用本機瀏覽器工具處理請求內容、token 與轉換結果時保護敏感資料的實用流程。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
處理請求內容、token 或設定時，先去識別化，再格式化或轉換，最後用相關工具複查輸出。不要把本機工具當作正式稽核或安全邊界。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
Hash 產生安全說明
說明 MD5、SHA-1、SHA-256、SHA-512 雜湊的用途，並避免把雜湊誤認為加密。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
MD5、SHA-1、SHA-256 與 SHA-512 適合校驗與指紋用途。它們不能隱藏原文，也不應作為密碼儲存方案的唯一保護。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
開發者文字 diff 工作流程
比較程式片段、設定變更、日誌與請求內容修訂時更快定位差異的開發者流程。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
比較程式碼、日誌或設定前，先統一換行、縮排與排序規則。這樣 diff 更容易突出真正改變的欄位或條件。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
資料轉換工作流程
說明 JSON、YAML、CSV 轉換時如何檢查結構遺失、陣列/物件解析與複製前驗證。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
在 JSON、YAML、CSV 間轉換前，先確認陣列、物件、空值與分隔符如何表示。轉換後再用 formatter 或 validator 檢查結構是否仍然一致。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
SQL 格式化工作流程
把長 SQL 整理成便於檢查的格式，並更快閱讀條件、連接、子查詢與差異。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
格式化 SQL 時，不要改變條件、join 順序或字串內容。先用 formatter 提升可讀性，再用 diff 檢查是否只改變空白與換行。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
色彩與對比檢查
用 HEX、RGB、HSL 與對比比例檢查介面顏色可讀性的實用指南。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
色彩轉換後要在真實背景、字級與狀態下檢查對比。只看 HEX 或 RGB 數值不足以判斷按鈕、表單與提示文字是否可讀。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
安全隨機產生工作流程
說明產生開發用密碼、token、UUID、ULID 時如何避免誇大安全性並保持謹慎。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
密碼、token、UUID 與 ULID 適合產生測試值、fixture 與暫時識別碼。不要把本機產生結果描述成正式密鑰或長期憑證。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
Web 與 SEO 工具
串聯 robots.txt、sitemap、favicon、URL 解析與社群預覽的實用 Web SEO 流程。
robots.txt、sitemap、canonical URL 與社群預覽應指向同一組最終頁面。先修正狀態碼與重複入口，再調整頁面標題或描述。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
網路除錯工作流程
使用 HTTP 狀態與 DNS 記錄快速縮小部署、重定向與網域連線問題範圍的排查指南。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
HTTP 狀態、重定向鏈與 DNS 記錄可以快速區分部署、網域與快取問題。只檢查公開 URL 或主機，避免輸入內部網路名稱。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
CSS 工具工作流程
把 CSS 格式整理、壓縮、單位轉換與 clamp 計算放進真實版面修改流程的指南。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
整理 CSS、壓縮、換算單位或計算 clamp 前，先確認斷點、容器寬度與字級邊界。這樣輸出才不會破壞實際介面。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
文字清理工作流程
在把文字放進程式碼或內容系統前，完成排序、去重、計數、預覽與正規化的流程。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
排序、去重、計數或產生 slug 前，先保留原始版本。清理後比較行數、空白與大小寫變化，避免誤刪有意義的內容。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。
特殊字元與文字藝術工作流程
用特殊字元、ASCII 橫幅與點陣圖案製作可複製文字，並在複製前檢查寬度與顯示差異。 同時涵蓋輸入條件、敏感資料排除、結果警告和相關工具複核。
特殊字元與文字藝術在不同平台會受到字型、寬度與換行影響。先確定用途，再選短符號、ASCII 橫幅或點陣圖案，可減少複製後錯位。
排除敏感資料
- 確認範例輸入能代表真實問題。
- 記錄目標瀏覽器、排程器、解析器或部署環境。
- 出現任何警告時，複製前用相關工具再檢查一次。