fe-dev-playbook

# Utils

本章介绍一些实用的效率工具与开发者网站，帮你从繁琐的鼠标操作中解放出来。工具尽量给出跨平台与仍在活跃维护的选择——这比「某个停更的明星软件」更重要。

# 窗口管理

把窗口快速吸附到屏幕一半、四分之一或全屏，是高效多任务的基础。

注：早期流行的 Spectacle 已停止维护，新机器请直接用 Rectangle 或系统原生方案。

# 效率启动器

用快捷键唤起、模糊搜索一切（应用、文件、剪贴板历史、计算、翻译……），是减少鼠标操作的利器。

# API 文档速查

# 抓包与网络代理

抓包用于查看、分析、篡改网络请求，常见场景包括：调试移动端请求、把线上资源代理到本地（Map Local）、模拟接口返回等。

# 工具选择

  • Whistle (opens new window)：基于 Node.js 的跨平台代理工具，前端友好、规则即文本、可版本化，本手册有独立章节专门介绍，推荐前端优先使用。
  • Proxyman (opens new window)（macOS，体验现代）/ Charles (opens new window)（跨平台，老牌经典）：功能强大的 GUI 抓包工具。
  • 浏览器内调试：Chrome DevTools 的 Network 面板配合 Overrides（本地覆盖响应）已能覆盖很多前端调试需求，无需额外软件。

# 抓包移动端 HTTPS 请求（通用流程）

无论使用 Charles 还是 Proxyman，移动端 HTTPS 抓包的核心步骤是一致的：

  1. 同一局域网：手机与电脑连接同一 WiFi。
  2. 设置代理：手机 WiFi → HTTP 代理 → 手动 → 填写电脑 IP 与抓包工具端口（Charles 默认 8888）。
    • 查看本机 IP：macOS / Linux 用 ifconfig（或 ip addr），Windows 用 ipconfig。
  3. 安装并信任根证书：电脑端先安装抓包工具的根证书；移动端访问工具提供的证书地址下载安装，并在系统设置里手动信任该根证书（iOS 还需在「关于本机 → 证书信任设置」中开启）。
  4. 开启 SSL 代理：在工具中配置需要解密的域名（如 *.example.com），即可看到 HTTPS 请求明文。

提示：iOS 14+ 与 Android 7+ 对用户证书的信任策略更严格，App 若启用了证书绑定（SSL Pinning），普通抓包将无法解密——这是设计如此，属正常现象。

# Map Local：把线上请求指向本地文件

当需要在线上环境验证本地改动时，可将某个线上资源重定向到本地文件：在 Charles 的 Tools → Map Local 中，配置「源地址（Map From）」与「本地目标文件（Map To）」即可。这样访问 https://cdn.example.com/app.js 时，实际加载的是你本地的 app.js。

Chrome DevTools 的 Sources → Overrides 提供了等价能力，无需安装代理软件，适合纯前端资源的临时覆盖。

# 实用网站

兼容性与标准

性能与质量

CSS / 调试小工具

在线编辑 / 复现

← 前端开发小提示 →