每期精选月刊 - 扩展 | 每期精选

01 Web Developer - 浏览器里塞一套前端工具箱

Web Developer 适合前端、测试和经常检查网页结构的人。它把一些常用页面调试动作做成工具栏入口，比如查看表单、禁用样式、检查图片和结构。

它不是替代 DevTools，而是把很多零散动作放得更近。临时排查页面问题、看布局状态、检查资源时，能少点来回翻菜单的烦躁。

下载地址

Redux DevTools 适合用 Redux 写前端应用的人。状态什么时候变了、是谁触发的、前后差异是什么，这些如果只靠 console，迟早会把自己绕晕。

它的好处是把状态变化拉成一条清晰时间线。调复杂交互、表单状态、异步请求时，能更快定位到底是数据错了，还是页面渲染错了。

下载地址

Vue.js devtools 适合正在维护 Vue 项目的人。组件树、props、状态、事件这些东西，如果只能在代码里来回找，调试效率会很低。

它能把 Vue 应用的运行状态直接展示出来，尤其适合排查组件传值、响应式数据和页面状态问题。写 Vue 不装它，多少有点自找麻烦。

下载地址

Angular DevTools 适合 Angular 项目开发者。复杂组件、依赖注入、变更检测这些问题，如果只靠普通 DevTools 看，很容易抓不到关键。

它提供了更贴近 Angular 的调试方式，适合看组件结构、性能瓶颈和状态流动。项目越大，这种框架专用工具越能体现价值。

下载地址

axe DevTools 适合开发者、测试和设计师。很多无障碍问题肉眼看不出来，比如标签缺失、对比度不够、键盘访问不顺，等用户反馈时就晚了。

它能在浏览器里直接跑检查，帮你提前发现页面里的可访问性问题。对面向公众的站点来说，这不是加分项，很多时候是基本功。

下载地址

Postman Interceptor 适合经常调接口的人。浏览器里真实发生的请求，有时比你手写参数更接近问题现场，它能帮你把这些请求捕获下来并带进 Postman。

排查登录态、Cookie、Header、跨域和接口参数时，这类工具很有用。少一点手动复刻请求，问题就少一点人为干扰。

下载地址

Talend API Tester 适合想在浏览器里快速测接口的人。构造请求、看响应、调 HTTP API，不一定每次都要打开一套完整桌面工具。

它适合临时验证接口、调试后端返回、检查请求参数。对前后端联调来说，能快速发请求、看结果，就已经很值。

下载地址

Requestly 适合开发和 QA。想改 Header、重定向接口、模拟返回、替换资源，如果每次都动项目代码，效率低，还容易把临时改动带进仓库。

它的价值就是把这些调试动作放在浏览器层处理。做联调、灰度验证、环境切换时，用得好能少开很多临时分支。

下载地址

Refined GitHub 适合每天都要看仓库、提 PR、查 issue 的开发者。GitHub 原生页面已经能用，但很多细节还不够顺手，它就是专门补这些小缺口的。

它的特点不是加一个巨大功能，而是到处补一点效率细节。看提交、读代码、处理页面交互时，少点摩擦，就已经很舒服。

下载地址

ColorPick Eyedropper 适合设计师、前端和做视觉调整的人。网页上看到一个颜色顺眼，不用截图再丢进别的软件，直接在页面里取色就行。

它看起来简单，但非常高频。调按钮、配主题、复刻参考页面时，少一次猜色值，就少一次无意义的来回试。

下载地址