DevTools on Liangweidong's blog

2021 年开源生态观察：从工具到平台，从代码到协作

Mon, 10 May 2021 00:00:00 +0800

数据来源周期：2021 年 5 月，扫描 docs 源仓库下的 23 篇源文档，合并去重后得到 200+ 仓库的样本。

一、为什么值得关注

2021 年是开源生态一个微妙的"中段"——

前端：Vue 3 刚刚稳定，React 18 还在 RC 阶段，前端框架的迭代节奏第一次慢了下来
云原生：Kubernetes 1.21 刚发布，“上云"从一句口号变成默认假设
AI：PyTorch 1.8 / TensorFlow 2.4 已经"水到渠成”，但 ChatGPT 还要再过 1 年 8 个月才登场
基础设施：内网穿透、代理、IPTV 资源、社区电驴替代品……中国大陆开发者有自己独特的开源生态圈层

如果把 2021 年的 GitHub 仓库列表当成一个横截面去读，会发现很多几年后回看才会显现的趋势，早在 2021 年就已经埋下了种子。

二、样本结构

维度	数量 / 占比
仓库总数	≈ 200（合并去重后）
编程语言 Top 3	JavaScript / Python / Go
类别数	9 大类
大厂/官方项目占比	约 18%

九大类别分别是：

前端 / Node 生态（Vue、Element、qiankun、uni-app）
科学上网 / 内网穿透（v2ray、trojan、frp、shadowsocks 全家桶）
爬虫与数据采集（scrapy、requests-html、电商爬虫合集）
直播 / 视频资源（iptv-org、tvlist-awesome、youtube-dl）
运维 / 云原生（kubernetes、runc、frp、winsw、harbor）
开发工具（nvm-windows、psf/black、drawio、WindTerm、ohmyzsh）
数据库 / 消息（TDengine、emqx、redis、QuickMsg smqtt）
可视化（d3、Chart.js、metrics-graphics、Cesium）
教学 / 学习路径（es6tutorial、Hacking、IntelliJ-IDEA-Tutorial）

三、八大趋势观察

趋势 1：云原生成为默认"水电煤"

2017-2020 是 Kubernetes 跑马圈地的年代，2021 年开始，k8s 真的成了基础设施的默认假设：

仓库里出现 kubernetes/kubernetes（10w+ stars）作为"基础设施"被反复引用
goharbor/harbor（容器镜像注册中心）正式进入主流
apache/incubator-brpc、grpc/grpc、protocolbuffers/protobuf 三件套把"远程调用"标准化
Tencent/APIJSON 这种"零代码接口生成"工具开始走红——背后是 “我不想写 CRUD” 的开发者心声

结论：2021 年"上不上云"已经不是问题，“怎么上、用什么姿势上"才是。

趋势 2：内网穿透 / 代理生态自成体系

这是 2021 年中文开源圈最独特的一道风景：

类别	代表项目
路由器级代理	`liangweidonggood/openwrt-fanqiang`、`hq450/fancyss`
协议实现	`v2fly/v2ray-core`、`trojan-gfw/trojan`
桌面 GUI	`2dust/v2rayN`、`Qv2ray/Qv2ray`、`Cenmrev/V2RayW`
内网穿透	`fatedier/frp`
hosts 维护	`googlehosts/hosts`、`ineo6/hosts`、`oldj/SwitchHosts`

为什么值得关注：这批项目在 GitHub 上聚集了中文世界最高质量的开源协作——文档完整、社区活跃、维护及时、issue 响应快。任何一个想做"中文开发者社区运营"的人，都该认真研究这个生态。

趋势 3：SSH 协议接管 Git 工作流

“GitHub 使用 ssh 协议”

这一段在 2021 年终于从"高手配置"变成"新人必学”：

1
2
3
4
5
6
7
8
9


# 推荐使用 Ed25519 算法，它比 RSA 更安全且性能更好
ssh-keygen -t ed25519 -C "you@example.com"

# 配置 ssh 走 443 端口
Host github.com
 Hostname ssh.github.com
 Port 443
 User git
 IdentityFile ~/.ssh/id_ed25519

you@example.com（示例邮箱）这种"个人邮箱 + ed25519 + 443 端口绕过"的组合在 2021 年是几乎每个中文开发者的标配。SSH 协议从"运维专属"下沉到"日常开发"的标志性年份。

趋势 4：前端微服务 / 跨端框架并行

方向	代表项目
微前端	`umijs/qiankun`
跨端	`dcloudio/uni-app`、`umicro/uView`
后台模板	`Rudeus3Greyrat/vue3-element-admin`、`ColorlibHQ/AdminLTE`
桌面端	`jgraph/drawio-desktop`、`microsoft/terminal`

注意 vue3-element-admin 出现的年份——这恰好是 Vue 3 从 RC 转稳定的窗口期。前端开发者一边学新框架，一边在生产环境上用 Vue 2 + Element 做后台，这个双轨格局持续到 2023 年才彻底打破。

趋势 5：直播资源 / IPTV 自治社区

iptv-org/iptv、imDazui/Tvlist-awesome-m3u-m3u8、ChendoChap/pOOBs4

这一类项目属于"灰色但有真实需求"的典型：民间对电视直播、电竞主机破解、流媒体下载工具的旺盛需求，反过来推动了开源社区的活跃度。ytdl-org/youtube-dl、soimort/you-get 这种下载工具的命运起伏，后来还和 DMCA 法案反复过招。

趋势 6：数据库 / 时序数据开始分化

taosdata/TDengine：国产时序数据库第一次进入主流视野
redis/redis：依然稳坐缓存王者
uglide/RedisDesktopManager、qishibo/AnotherRedisDesktopManager：桌面客户端百花齐放——一个 Redis 客户端能跑出 5 个 fork，说明开发者对"图形化运维"的需求远未饱和
quickmsg/smqtt、eclipse/paho.mqtt.javascript、eclipse/mosquitto：MQTT 在 IoT 场景的协议栈成型

趋势 7：可视化工具"百花齐放"

场景	项目
数据可视化	`d3/d3`、`chartjs/Chart.js`、`metricsgraphics/metrics-graphics`
地图	`CesiumGS/cesium`
流程图	`jgraph/drawio` / `drawio-desktop`
2D 物理	`jonobr1/two.js`
3D	`mrdoob/three.js`

drawio 至今仍是流程图工具的事实标准之一，且能本地化部署 + 离线使用——这个属性在 2021 年没人觉得是优势，到了 2024 年企业市场突然爆火。

趋势 8：教学型仓库爆款公式

观察一下 2021 年教学型仓库的爆款公式：

中文翻译（1c7/Crash-Course-Computer-Science-Chinese）
路线图（tangyudi/Ai-Learn）
awesome 系列（facert/awesome-spider、rockerBOO/awesome-neovim）
书单（itdevbooks/pdf、forthespada/CS-Books）
镜像 / fork + 注释（veloren 这种大型游戏项目的 fork 笔记）

教学型仓库的核心竞争力不是"原创"，而是"整理 + 翻译 + 索引"。

四、值得跟踪的"长寿"项目

在 200+ 仓库里，到今天（2026）仍然活跃的不算多，下面这些是 5 年后还能更新、还在被引用的"长青树"：

项目	2021 状态	2024 状态
`microsoft/terminal`	Windows Terminal 1.x	已成 Windows 必装
`jgraph/drawio`	v14	仍是流程图首选
`opencontainers/runc`	容器底层	仍是 K8s 核心依赖
`syncthing/syncthing`	P2P 文件同步	安全圈的"瑞士军刀"
`scrapy/scrapy`	Python 爬虫事实标准	仍是大厂数据团队底座
`kubernetes/kubernetes`	1.21	已成云时代操作系统
`grpc/grpc`	跨语言 RPC 主流	服务网格的基础组件
`d3/d3`	可视化鼻祖	仍被无数 BI 工具致敬

五、总结

回顾 2021 年的开源生态，真正留下的不是"最火的项目"，而是"沉淀下来的协作模式"：

中文开发者社区的成熟——ed25519 + SSH + v2ray 圈层的密度史无前例
云原生基础设施的稳态化——K8s 不再是"前沿"，而是"默认"
前端框架的过渡期——Vue 3 / React 18 / 微前端三件事并行，谁也没赢
国产开源开始有国际影响力——TDengine、Vue、uni-app 都走出了纯中文圈
教学型仓库的爆款公式被验证——这个公式到 2024 年还在用

站在 2026 年（本文写于 2021，5 年后再回望）看 2021，最大的感慨是：那一年的 GitHub Trending 上根本看不到 LLM 相关项目。开源世界改天换地的速度，比我们预想的还要快。

参考资料

六、2024+ 视角：5 年后回望，趋势是否兑现？

本文写于 2021 年 5 月。2026 年回望，21 年埋下的 8 大趋势种子，4/8 已经结果，2/8 被证伪，2/8 仍在酝酿。下面逐条对照。

6.1 趋势 1-3 兑现度

趋势 1（云原生成为默认水电煤）→ 完全兑现：

2024 年 K8s 1.30 已经是"装机必备"——containerd 替代 dockerd 在 2024 年完成（Docker Engine 退场）
2025 年 eBPF 成为云原生新底座（取代部分 iptables 场景）
2026 年 K8s + AI/ML 编排（kuberay、kfserving）成为 AI 平台的事实标准
harbor 在 2024-2025 仍是主流镜像仓库（虽然 OCI 标准化让 AWS ECR / 阿里 ACR / Harbor 可以互通）

趋势 2（内网穿透 / 代理生态自成体系）→ 部分兑现 + 暗线影响：

2021 年 v2ray/frp 圈是中文开源最活跃的"地下"协作
2022 年 10 月起，部分翻墙相关仓库被 GitHub 批量封禁（包括很多教程仓库）
2024-2025 主流路线从"自建代理"转向"专业机场" + WireGuard/Tailscale 替代
frp 本身反而更活跃——企业内网穿透（堡垒机替代品）成为主流用法
tailscale / headscale 等基于 WireGuard 的新方案在 2023-2025 大爆发

趋势 3（SSH 协议接管 Git 工作流）→ 完全兑现，但被 GitHub CLI 抢戏：

2024-2025 几乎所有 Git 操作默认走 SSH（ed25519 是绝对主流）
GitHub CLI（gh） 2023-2025 大爆发，部分场景替代了 SSH 直连
VSCode Remote SSH 2024-2026 仍是云开发标配

6.2 趋势 4-6 兑现度

趋势 4（前端微服务 / 跨端框架并行）→ 兑现，但格局大变：

qiankun 在 2024-2025 仍占一席之地，但 微前端整体热度下降——webpack 5 Module Federation 让"微前端"变成 webpack 标配功能
uni-app / Taro 双雄格局稳定，2024 年都加上了"AI 智能生成代码"功能
Vue 3 vs React 18 在 2024-2025 决出胜负：React Server Components + Next.js 占据前端框架头部，Vue 3 在国内继续强势但国际化落后
Solid.js / Qwik 等"细粒度响应式"框架在 2024-2025 出圈
2026 H1：“前端框架"讨论热度整体下降——AI 编码让"框架选择"变得没那么重要

趋势 5（直播资源 / IPTV 自治社区）→ 黯淡，但 youtube-dl 系活下来：

2021-2024 IPTV 社区基本被监管消灭——GitHub 上主流 m3u 仓库要么归档、要么被 DMCA
ytdl-org/youtube-dl 在 2020 RIAA 诉讼后转 yt-dlp（社区 fork），2024-2026 仍是视频下载工具的事实标准
哔哩哔哩 bilix / lux / you-get 等中文工具命运起伏
Web 直播本身反而大爆发——抖音 / TikTok / YouTube Shorts 让 IPTV 失去吸引力

趋势 6（数据库 / 时序数据开始分化）→ 完全兑现，且走得更远：

TDengine 3.0（2023-10 发布）在 2024-2026 持续扩大，国内时序库头名稳固
IoTDB（清华 Apache 孵化）在 2024-2025 进入 Apache TLP，国内时序库第二
InfluxDB / TimescaleDB 仍在欧美主导
2024-2026 新趋势：“云原生数据库” 全面替代传统 DBA 模式——Aurora / PolarDB / TiDB Cloud / CockroachDB
向量数据库（pgvector / Qdrant / Milvus）2024-2026 大爆发——LLM 时代的"数据库新物种”
Redis 2024 年完成"开源协议变更"风波（2024-03 起从 BSD 改 SSPL + RSAL）——国内 Redis 替代品（KeyDB / Dragonfly / 阿里 Tair） 借机爆发

6.3 趋势 7-8 兑现度

趋势 7（可视化工具百花齐放）→ 部分兑现，AI 改变格局：

drawio 2024-2026 仍是流程图首选（“本地部署"属性让它在企业市场爆火——文章当时已提到）
d3.js 仍被无数 BI 工具致敬，但直接使用 d3 的项目少了——大家都用 ECharts / AntV / Recharts 二次封装
2024-2026 真正的大变化：
- AI 生成图表（ChartGPT、Vizro、GenBI）开始挑战传统 BI
- Cesium 在数字孪生 / 智慧城市项目里 2024-2025 爆发
- deck.gl（Uber 出品）成为地理可视化新宠
- 白板工具（tldraw、excalidraw、miro）2024-2026 集体 AI 化

趋势 8（教学型仓库爆款公式）→ 兑现 + AI 改变教学本身：

中文翻译、路线图、awesome 系列、书单这 4 个公式到 2026 仍然有效
2024-2026 最大的变化：
- awesome 系列被 AI 索引工具部分替代（GitHub trending + ChatGPT 搜索）
- 路线图（roadmap.sh） 在 2024-2025 仍是工程师入门第一站
- AI 编程教程（microsoft/generative-ai-for-beginners、anthropics/prompt-eng-interactive-tutorial）2024-2026 成为新公式
- Bilibili + YouTube 视频教程对纯文字教学仓库的冲击越来越大
- LeetCode 中文站在 2024 估值 25 亿美元（部分 IPO 消息）

6.4 21 年没看到的暗线：5 年后的新增趋势

回看 2021 年的"九大类别”，有几个类别在 2026 年已经退出历史舞台：

科学上网 / 内网穿透 → 萎缩（监管 + WireGuard 替代）
IPTV / 直播资源 → 大幅萎缩
桌面 GUI 代理（v2rayN / Qv2ray）→ 退出主流

同时有几个 2021 年没出现、2026 年成为主流的类别：

AI Agent / Harness（参见 2026-06-03 Trending 周报）
大模型本地部署（Ollama / LM Studio / Jan）
AI 编程工具（Cursor / Claude Code / Continue.dev）
向量数据库（pgvector / Qdrant / Milvus）
国密合规基础库（国密 SM2/SM3/SM4 算法的开源实现）
数字孪生 / 工业软件（Cesium / Three.js / WebGL 在工业场景）

6.5 总结：开源生态的 5 年大周期

把 2021-2026 这 5 年看成一个完整周期，开源世界发生了 3 件事：

基础设施化——K8s、向量库、AI 框架从"前沿"变成"水电煤"
垂直化——通用工具（jQuery 时代）→ 框架时代（Vue/React）→ 垂直工具时代（AI × 行业）
AI 化——2021 年 GitHub Trending 上看不到一个 LLM 项目，2026 年 LLM 项目占 Trending 70%+

5 年后回望，2021 年是"AI 革命前夜"——云原生 + 微前端 + 时序数据库这些"非 AI 趋势"继续发展，但真正的范式转移是 2022-11 ChatGPT 发布后才开始的。

参考资料（2024+ 补充）

Chrome DevTools 实用技巧：前端调试 / 性能分析 / 网络抓包 / 移动端调试 / 自动化

Mon, 15 Jun 2020 00:00:00 +0800

一、为什么写这篇 DevTools 实战

Chrome DevTools（F12）是前端工程师的"瑞士军刀"——调试 DOM / CSS、抓包分析、性能 profiling、移动端调试、自动化脚本、Storage 调试……全在一个面板里。

本文整理 7 大场景 的实战技巧，所有操作都用 DevTools 自身能力，不涉及任何"内容解锁 / 反爬"功能。

范围说明：本文仅讨论 DevTools 用于前端开发、性能优化、网络分析、自动化测试等正当用途。DevTools 是浏览器内置调试工具，与"破解 / 反爬"无关。

二、场景 1：DOM / CSS 调试

2.1 实时改 CSS

1
2
3
4
5
6
7
8


1. 打开任意网页
2. 鼠标右键 → "检查"（或按 F12）
3. Elements 面板左侧是 DOM 树
4. 选中一个元素 → 右侧 "Styles" 面板是它的所有 CSS
5. 任意属性可以：
 - 取消勾选 = 临时禁用
 - 双击值 = 临时改值
 - 加新属性 = 临时添加

实时改的样式只在你本地生效，刷新页面会重置——这是验证 UI 调整的最快方法。

2.2 改完记下来

1
2
3


- 右侧 Styles 面板 → 点击选择器链接
- 跳到 Sources 面板对应 CSS 文件
- 复制修改后的内容到本地项目

2.3 计算样式 / Box Model

1
2
3
4


Elements → Computed 面板：
- 选中元素所有"最终生效"的 CSS（不是源码）
- 包含继承值、用户代理默认值
- Box Model 图：可视化 margin / border / padding / content

2.4 强制伪类（Force Pseudo-class）

1
2
3


Elements 面板 → 选中元素 → :hov 按钮
→ 勾选 :hover / :active / :focus / :visited
→ 即使鼠标不在元素上也能看到 :hover 状态

三、场景 2：Console 调试

3.1 基础 API

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 格式化输出
console.log('普通');
console.info('信息');
console.warn('警告');
console.error('错误');
console.table([{name:'Alice',age:30},{name:'Bob',age:25}]);
console.group('Group 1');
console.log('inside group');
console.groupEnd();

// 计时
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch');

// 断言
console.assert(x > 0, 'x 必须为正');

// 对象展开
console.dir(document.body, {depth: 2});

3.2 引用前一次结果

1
2
3
4
5


$_ // 上一次 console 输出的结果
$0~$4 // Elements 面板最近选中的 5 个元素
$('#id') // document.querySelector 的简写
$$('div') // document.querySelectorAll 的简写
$x('//div') // XPath 选择

3.3 Live Expression（实时表达式）

1
2
3
4


Console 面板 → 点眼睛图标
→ 输入 document.title
→ 顶部实时显示当前 title（不打印）
→ 适合观察"页面是否被 XHR 改了状态"

四、场景 3：断点调试（Sources）

4.1 三种断点

1
2
3


1. 行断点：Sources 面板点击行号
2. 条件断点：右键行号 → "Add conditional breakpoint" → 写表达式
3. 事件断点：Sources → Event Listener Breakpoints → 勾选事件

4.2 调试控制

1
2
3
4
5


F8 / F5 继续执行
F10 / F6 单步跳过（Step Over）
F11 / F7 单步进入（Step Into）
Shift + F11 单步退出（Step Out）
Ctrl + F8 临时禁用所有断点

4.3 黑盒脚本（Blackbox）

1
2
3
4


Settings → Blackboxing → Add pattern
→ 写 /node_modules/.*\.js$
→ 调试时跳过第三方库（jQuery / React 源码）
→ 只调试自己写的代码

4.4 监听 XHR / Fetch

1
2
3


Sources → XHR/fetch Breakpoints → Add pattern
→ 写 /api/
→ 每次请求 /api/xxx 都会自动断点到"发起请求"那一行

五、场景 4：Network 抓包

5.1 基础

1
2
3
4
5


Network 面板：
- All / XHR / JS / CSS / Img / Media / Doc
- 红色 = 失败
- Status / Method / Type / Size / Time / Waterfall
- 右键 → Copy → Copy as cURL（命令行重放）

5.2 限流（Throttling）

1
2
3
4
5
6
7


Network 面板 → Throttling 下拉
- Online（默认）
- Slow 3G
- Fast 3G
- Slow 4G
- Fast 4G
- Add custom...（自定义）

用途：模拟弱网环境，看页面加载逻辑、占位符、loading 状态。

5.3 拦截请求（Block / Override）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Block request URL：
- Network 面板 → 右键请求 → Block request URL
- 输入匹配的 URL pattern（如 /api/track）
- 此后该请求永远 404
- 用于：屏蔽埋点、屏蔽广告追踪、看页面"无脚本"渲染

Override content：
- Sources 面板 → Overrides 子标签 → Select folder for overrides
- 本地文件夹映射到页面
- 改本地文件 → 页面立即生效，**不刷新**（比 Live Reload 还快）

5.4 HAR 导出 / 导入

1
2
3


Network 面板 → 右键 → Save all as HAR with content
→ 同事拿到 HAR → Network 面板 → 右键 → Import HAR file
→ 复现你的网络环境（含响应体）

六、场景 5：Performance 性能分析

6.1 录制

1
2
3
4


1. Performance 面板 → 点录制按钮（或 Cmd/Ctrl + E）
2. 正常操作页面（点击、滚动、加载）
3. 再次点录制按钮停止
4. 自动生成火焰图 + Summary

6.2 看什么

1
2
3
4
5


- FCP（First Contentful Paint） 首次内容绘制
- LCP（Largest Contentful Paint） 最大内容绘制
- TTI（Time to Interactive） 可交互时间
- TBT（Total Blocking Time） 长任务阻塞
- CLS（Cumulative Layout Shift） 布局偏移

6.3 找长任务

1
2
3


Main 线程的黄色/红色块 = 长任务（> 50ms）
→ 点击 → 下方 Summary 看哪个函数耗时
→ 双击跳到 Sources 面板对应代码

6.4 Lighthouse

1
2
3


Lighthouse 面板 → 选择 Performance / Accessibility / Best Practices / SEO
→ Generate report
→ 100 分制报告 + 优化建议

七、场景 6：Application 存储 / 缓存

7.1 存储面板

1
2
3
4
5
6
7


Application 面板：
- Local Storage key-value 持久存储
- Session Storage 关闭标签页清空
- IndexedDB 大容量结构化数据
- Cookies HTTP-only 也能看
- Cache Storage Service Worker 缓存
- Service Workers 注册的 SW

7.2 清空存储

1
2


Application → Storage → Clear site data
- 一次清空 LocalStorage / SessionStorage / Cookies / Cache / IndexedDB / SW

7.3 模拟离线

1
2


Application → Service Workers → Offline 勾选
→ 即使网络正常，页面也走 SW 缓存（验证离线体验）

八、场景 7：移动端调试

8.1 设备模式

1
2
3
4


1. F12 → 点左上角"切换设备"图标（或 Cmd/Ctrl + Shift + M）
2. 选预设设备（iPhone / iPad / Galaxy / Pixel）
3. 或自定义分辨率、DPR
4. 顶部还有 Throttling 滑块（模拟低端机）

8.2 真机调试（USB）

1
2
3
4
5
6
7
8
9


Android：
1. 手机开"开发者选项" + "USB 调试"
2. USB 连电脑
3. Chrome 地址栏 → chrome://inspect → 看到设备
4. 点 inspect → 弹出 DevTools（**调试的是真机上的页面**）

iOS：
1. Mac Safari → Develop → [你的 iPhone] → 选择页面
2. 弹出 Web Inspector（**功能类似 Chrome DevTools**）

8.3 远程调试（真机网页）

1
2
3
4


1. 电脑和手机连同一 Wi-Fi
2. 电脑 DevTools → Settings → Devices → Add custom device
3. 输入手机的 IP + 端口（手机开 Chrome → 设置 → 启用 USB 调试 + 端口转发）
4. 电脑 DevTools 直接看到手机页面

九、场景 8：自动化 / 脚本

9.1 Snippet（代码片段）

1
2
3


Sources 面板 → Snippets 子标签 → New snippet
→ 写 JS 代码 → Ctrl + Enter 执行
→ 代码片段永久保存，下次 F12 还在

示例：批量改 DOM

1
2
3
4
5


// 改所有外部链接为新标签打开
document.querySelectorAll('a[href^="http"]').forEach(a => {
 a.target = '_blank';
 a.rel = 'noopener noreferrer';
});

9.2 Recorder（录制脚本）

1
2
3
4
5
6


DevTools → Recorder 面板（或 Performance → Record → Save as profile）
1. 点 Start recording
2. 手动操作页面（点击、输入、滚动）
3. Stop
4. 自动生成 Playwright / Puppeteer 代码
5. 复用 → CI 自动化

1
2
3
4
5
6
7


Cmd/Ctrl + Shift + P → 调出命令面板
常用：
- "Show Coverage" 代码覆盖率（哪些 JS/CSS 没用到）
- "Capture full size screenshot" 全页截图
- "Capture node screenshot" 选中节点截图
- "Show sensors" 模拟地理位置 / 设备方向
- "Show rendering" 模拟视觉缺陷（色盲 / 视力模糊）

十、调试技巧速查

场景	面板	关键操作
改样式看效果	Elements / Styles	改属性、勾掉属性、:hov
看 JS 错误	Console	console.error 红色 / 点击跳转
调试 JS 逻辑	Sources	断点、单步、Watch
抓包看请求	Network	Filter、Copy as cURL、Throttle
性能分析	Performance / Lighthouse	录制、火焰图、FCP/LCP/CLS
改存储	Application	LocalStorage / Cookies / SW
移动端	Toggle device	选设备、Throttle
自动化	Snippets / Recorder	写代码 / 录操作

十一、Chrome DevTools 隐藏技巧 5 个

Ctrl + Click（Mac Cmd + Click）Sources 文件名 → 在文件树中定位
Console 多行编辑 → 输入 Shift + Enter 换行（不提交）
拖拽 DOM 节点 → Elements 面板的 DOM 节点可以拖动改位置（不持久）
双击 Elements 标签 → 展开/折叠所有子节点
右键图片 → Copy image as data URI → 一键复制 base64（适合做占位图）

十二、常见 5 个坑

改 CSS 不生效 → 用了 !important 优先级覆盖、或选择器错了（用 Computed 面板看"实际生效的样式来源"）
断点不触发 → 异步代码用 await 没断到，可能在 setTimeout / 微任务里（断点放在 Promise 链的 then 里）
Network 没记录到请求 → 过滤框清空、或请求是 sendBeacon（Network 仍会记录，但 Properties 看不到）
Performance 录制很慢 → 关闭其他标签页、Chrome 进程
移动端调试断连 → USB 接触不良 / 手机锁屏（设"充电时不锁屏"）