开发者必备Chrome插件：提升编程效率的15款扩展

在Components面板中：
- 点击组件 → 右侧显示props/state
- 搜索框输入组件名 → 快速定位
- "Highlight updates" → 开启后渲染时高亮更新的组件

在Profiler面板中：
- 点击录制 → 操作页面 → 停止
- 查看火焰图，找出耗时最长的渲染

// 在项目中启用Redux DevTools
import { createStore } from 'redux';

const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && 
  window.__REDUX_DEVTOOLS_EXTENSION__()
);

// 核心能力：
// 1. 时间旅行：回到任意历史状态
// 2. Action回放：重新执行某个Action
// 3. 状态diff：查看每次Action前后的状态变化

典型使用场景：

1. 添加认证Token
   Authorization: Bearer eyJhbGciOi...

2. 模拟不同环境
   X-Environment: staging
   X-Debug: true

3. 测试CORS配置
   Origin: https://example.com

4. A/B测试
   X-Variant: B

开发场景：
- 复制登录态到另一个环境
- 清除特定域名的Cookie
- 调试SSO流程时检查Cookie

Vimium核心快捷键：

导航：
j / k        → 向下/向上滚动
d / u        → 半屏向下/向上滚动
gg / G       → 跳到页首/页尾

标签页：
J / K        → 切换到右/左标签页
x            → 关闭当前标签页
t            → 新建标签页

页面导航：
f            → 显示所有链接的快捷键
F            → 在新标签页打开链接
/            → 页面内搜索
r            → 刷新页面

地址栏：
o            → 打开URL或搜索
b            → 打开书签

历史：
H / L        → 后退/前进

推荐设置：
- 亮度：80-90%
- 对比度：90-100%
- 模式：Dynamic（动态生成）
- 忽略列表：设计类网站、需要看配色的网站

安装后效果：

在GitHub仓库页面：
- 仓库根目录显示总大小
- 每个文件/文件夹旁显示大小
- 按大小排序，快速定位大文件

适用场景：
- clone前评估仓库大小
- 找出仓库中的大文件
- 分析依赖体积

使用场景：
- 本地Markdown文件预览（file://协议）
- 查看GitHub Raw文件
- 在线Markdown文档阅读

插件管理原则：

日常使用（5-8个）：始终开启
  - React/Vue DevTools（按技术栈）
  - JSON Viewer
  - Dark Reader
  - Vimium
  - OneTab

按需使用（5-10个）：需要时开启
  - ModHeader
  - Cookie-Editor
  - Allow CORS
  - ColorZilla
  - WhatFont

安全检查清单：

□ 只从Chrome Web Store安装
□ 检查所需权限是否合理
  - JSON Viewer需要"读取所有网站数据"权限（合理）
  - 一个取色器要求"修改所有网站数据"权限（可疑）
□ 查看用户评价和安装量
□ 关注开发者信誉
□ 定期审查已安装的插件

// manifest.json - 一个简单的开发工具插件
{
  "manifest_version": 3,
  "name": "API响应时间监控",
  "version": "1.0.0",
  "description": "在页面角标显示API请求的响应时间",
  "permissions": ["webRequest", "storage"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "action": {
    "default_popup": "popup.html"
  }
}

// background.js - 监听网络请求
chrome.webRequest.onCompleted.addListener(
  function(details) {
    const timing = details.timeStamp - details.startTimeStamp;
    // 存储API响应时间
    chrome.storage.local.set({
      [`api_${details.url}`]: timing
    });
  },
  { urls: ["<all_urls>"] }
);