浏览器工具实践指南
短篇支持内容，用于补充工具的使用场景，而不是泛泛的博客。
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 禁止嵌入。工具只能展示浏览器允许加载的公开页面。
排除敏感数据
- 确认样例输入能代表真实问题。
- 记录目标浏览器、调度器、解析器或部署环境。
- 出现任何警告时，复制前用相关工具再检查一次。
设计占位文本
说明如何使用 placeholder text 测试布局、可访问性和产品文案，而不掩盖真实内容问题。
占位文本适合检查间距、换行和空状态，但应接近真实内容长度。过于整齐的假文本会隐藏按钮、表格和卡片中的溢出问题。
排除敏感数据
- 确认样例输入能代表真实问题。
- 记录目标浏览器、调度器、解析器或部署环境。
- 出现任何警告时，复制前用相关工具再检查一次。
浏览器工具工作流
用本地浏览器工具处理请求内容、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 横幅或点阵图案，能减少复制后的错位。
排除敏感数据
- 确认样例输入能代表真实问题。
- 记录目标浏览器、调度器、解析器或部署环境。
- 出现任何警告时，复制前用相关工具再检查一次。