Chrome on Liangweidong's blog

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 接触不良 / 手机锁屏（设"充电时不锁屏"）

十三、参考资料

Chrome 数据目录搬家：mklink 符号链接 C 盘到 D 盘一招搞定

Sun, 15 Sep 2019 00:00:00 +0800

一、为什么 Chrome 是 C 盘空间"头号杀手"

Chrome 的用户数据目录 C:\Users\<USER>\AppData\Local\Google 默认在 C 盘，装几年之后轻松 10-30 GB：

Cache —— 浏览器缓存
Code Cache —— 编译后的 JS 缓存
Service Worker\CacheStorage —— PWA 缓存
IndexedDB —— 网页数据库
Extensions —— 扩展
Local Storage —— localStorage

256 GB 的 C 盘装上 Chrome 用一两年，经常被吃光 30-50 GB。

两条思路：

mklink 目录联接——把整个 Google 目录映射到 D 盘（一劳永逸）
--disk-cache-dir 启动参数——只搬缓存（不搬历史 / 密码 / 扩展）

mklink 是首选——所有 Chrome 数据都搬。

二、操作流程

2.1 第一步：彻底关闭 Chrome

迁移前必须确保没有任何 Chrome 进程在读写 Google 文件夹：

1
2
3
4


1. 关闭所有 Chrome 浏览器窗口
2. Ctrl+Shift+Esc 打开任务管理器
3. 检查进程列表
4. 如果看到 Google Chrome / Google Update → 右键 "结束任务"

为什么必须关：

Chrome 进程会锁定数据库文件（History、Login Data）
关进程时 mmap 锁没释放——剪切 / 移动时会报"文件被占用"
Google Update 进程会自动重启 Chrome——先把它也杀

2.2 第二步：迁移数据

1
2
3
4
5
6
7


1. 在 D 盘新建文件夹：D:\Google_Data（名字随意）
2. 来到 C:\Users\<USER>\AppData\Local
3. 找到 Google 文件夹 → Ctrl+X 剪切
4. 粘贴到 D:\Google_Data\Google
5. 现在的状态：
 - D:\Google_Data\Google\ ← 实际数据
 - C:\Users\<USER>\AppData\Local\Google\ ← 没了

必须用剪切（Ctrl+X），不能复制——否则会留两份。移动后 C 盘应该没有 Google 目录。

2.3 第三步：管理员打开 cmd

1
2


1. Win+S 搜 "cmd"
2. 右键 → "以管理员身份运行"

为什么必须管理员：mklink 是系统级操作，非管理员会被拒。

2.4 第四步：创建符号链接

1

mklink /j "C:\Users\<USER>\AppData\Local\Google" "D:\Google_Data\Google"

参数说明：

/j —— 目录联接（junction）——Windows 专有的硬链接形式
第一个参数 —— 联接点（C 盘原位置）
第二个参数 —— 真实目录（D 盘目标）

成功标志：

1

为 C:\Users\...\Local\Google <<===>> D:\Google_Data\Google 创建的联接

同时你在 C 盘原位置会看到一个带有"快捷方式"图标的 Google 文件夹——但这是个"目录联接"（不是普通快捷方式）。

2.5 验证

1
2
3
4
5


1. 启动 Chrome
2. 访问 chrome://version
3. 检查"个人资料路径" → 应该是 C:\Users\<USER>\AppData\Local\Google\...
4. 实际所有读写都走 D:\Google_Data\Google
5. 检查 D 盘空间 → 应该多了几个 GB

三、原理

3.1 mklink 三种链接

类型	标志	适用
文件硬链接	`mklink /H`	单个文件
文件符号链接	`mklink`（默认）	单个文件
目录符号链接	`mklink /D`	目录（要管理员）
目录联接	`mklink /J`	目录（Win Vista+ 内置，无管理员要求？）

/j 的特殊性：

不需要管理员（某些 Win10 版本仍要——建议都用管理员）
绝对路径——重命名 / 移动真实目录会断链
不支持跨卷？——实际支持 NTFS 跨卷（Symlink 才完全支持）
不支持网络共享（要 /D）

3.2 与快捷方式的区别

维度	快捷方式 (.lnk)	目录联接 (/J)
对应用透明	❌ 应用不知道	✅ 完全透明——应用以为在原位置
文件操作	双击才会跳转	读写都直接走真实路径
空间占用	几 KB	几乎 0（只存联接点元数据）

Chrome 打开 C:\Users\...\Local\Google 时：

快捷方式：系统跳到 D:\Google_Data\Google
目录联接：对 Chrome 完全透明——Chrome 以为自己访问 C 盘——所有 mmap / 锁都正常工作

四、搬完之后删什么

4.1 浏览器缓存（重点）

1

C:\Users\<USER>\AppData\Local\Google\Chrome\User Data\Default\Cache

这是最大的占用——几 GB 起——定期手动清或者用 Chrome 自带清理：

1
2
3
4
5


1. 打开 Chrome
2. 快捷键 Ctrl+Shift+Delete
3. 选 "缓存的图片和文件"
4. 时间范围 "时间不限"
5. 清除数据

4.2 Service Worker 缓存

1

chrome://serviceworker-internals/

不需要的 Service Worker 可以点 “Unregister”。

4.3 扩展（Extensions）

1

chrome://extensions/

关闭 / 卸载不用的扩展——每个扩展都有自己的 cache。

五、备选：仅搬缓存（不动数据）

如果你不想做符号链接（觉得危险），只搬缓存用 --disk-cache-dir：

1
2
3
4


1. 桌面 Chrome 快捷方式 → 右键 → 属性
2. "目标" 一栏的最末尾加一个空格，然后粘贴：
 --disk-cache-dir="D:\ChromeCache"
3. 确定

效果：

Chrome 缓存写到 D 盘——省 C 盘几个 G
历史记录 / 密码 / 扩展 / 书签 仍在 C 盘原位置
不会破坏 Chrome 状态

但：不推荐——只搬缓存意味着密码 / 历史 / 扩展都在 C 盘——C 盘系统重装会丢。

六、Edge / Firefox / Brave 类似操作

6.1 Edge

Edge 目录 C:\Users\<USER>\AppData\Local\Microsoft\Edge —— 结构与 Chrome 一样。

1

mklink /j "C:\Users\<USER>\AppData\Local\Microsoft\Edge" "D:\Edge_Data\Edge"

6.2 Firefox

Firefox 用户目录 C:\Users\<USER>\AppData\Roaming\Mozilla\Firefox\Profiles\<xxx>.default-release—— 走 Roaming 不是 Local：

1

mklink /j "C:\Users\<USER>\AppData\Roaming\Mozilla\Firefox\Profiles" "D:\Firefox_Data\Profiles"

6.3 Brave

Brave 目录 C:\Users\<USER>\AppData\Local\BraveSoftware\Brave-Browser—— 同理。

七、自动化脚本

7.1 开机自动检查 mklink 状态

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


$linkPath = "C:\Users\$env:USERNAME\AppData\Local\Google"
$targetPath = "D:\Google_Data\Google"

# 检查 mklink 是否存在
if (-not (Test-Path $linkPath)) {
 # 检查实际目录是否在 D 盘
 if (Test-Path $targetPath) {
 Write-Host "实际数据在 D 盘，符号链接丢失。重新创建..." -ForegroundColor Yellow
 # 用 admin 权限重新创建
 Start-Process cmd -ArgumentList "/c mklink /j `"$linkPath`" `"$targetPath`"" -Verb RunAs
 } else {
 Write-Host "Chrome 数据目录不存在，请检查" -ForegroundColor Red
 }
} else {
 $item = Get-Item $linkPath
 if ($item.Attributes -band [IO.FileAttributes]::ReparsePoint) {
 Write-Host "符号链接正常：$linkPath → $targetPath" -ForegroundColor Green
 } else {
 Write-Host "Google 目录是真实目录，未创建符号链接" -ForegroundColor Red
 }
}

7.2 定期清理 Chrome 缓存

1
2
3
4
5


# 清理超过 30 天的缓存
$cachePath = "C:\Users\$env:USERNAME\AppData\Local\Google\Chrome\User Data\Default\Cache"
Get-ChildItem $cachePath -Recurse -File |
 Where-Object { $_.LastWriteTime -lt (Get-Date).AddDays(-30) } |
 Remove-Item -Force -ErrorAction SilentlyContinue

八、常见 5 个坑

Chrome 没关就 mklink——剪切的 Google 目录里有 Chrome 锁定的文件——关进程后再做
路径带中文出错——mklink 对中文路径 OK——但 PowerShell 里中文路径要加反引号转义
target 路径有空格——D 盘 Program Files 之类——必须双引号包起来
重启后符号链接"消失"——可能是杀毒软件误判——把 mklink 加白名单
OneDrive 占 C 盘——OneDrive 走 C:\Users\<USER>\OneDrive —— 搬家思路同 Chrome（OneDrive 设置里选"管理备份"）

九、其它 C 盘减肥方案

目录	大小	处理方案
`C:\Windows\Temp`	几 GB	定期 `cleanmgr`
`C:\hiberfil.sys`	≈ 内存大小	`powercfg -h off`
`C:\pagefile.sys`	几 GB	设置到 D 盘（系统属性 → 高级）
`C:\Users\<USER>\AppData\Local\Temp`	几 GB	定期清理（`%TEMP%` 变量目录）
`C:\Users\<USER>\AppData\Local\Google`	10-30 GB	mklink 到 D 盘（本文）
`C:\Users\<USER>\AppData\Local\pip\cache`	几 GB	`pip config set global.cache-dir D:\pip-cache`
`C:\Users\<USER>\.nuget\packages`	几 GB	`nuget config set globalPackagesFolder D:\nuget-cache`
`C:\Users\<USER>\.gradle\caches`	几 GB	`GRADLE_USER_HOME=D:\gradle-home`
`C:\Users\<USER>\.m2\repository`	几 GB	`~/.m2/settings.xml` 改 `<localRepository>`

十、总结

mklink /j 目录联接 = 最一劳永逸的方案——完全透明——Chrome 不知道自己在 D 盘
步骤：关 Chrome → 剪切 Google 目录到 D 盘 → mklink 目录联接 → 重启 Chrome
优势：所有数据都在 D 盘——C 盘瞬间释放 10-30 GB——重装系统迁移方便
备选：只搬缓存用 --disk-cache-dir="D:\ChromeCache" —— 简单但只搬缓存
同样思路适用于 Edge / Firefox / Brave / OneDrive / NuGet / Maven / Gradle
Win10+ PowerToys 的 File Locksmith 可以查谁锁住了文件——mklink 失败时排查用

参考资料

Windows 远程与浏览器工具链：Xshell / FileZilla / Chrome / 文件处理

Sun, 15 Dec 2013 00:00:00 +0800

一、Windows 远程办公三件套

2013 年的远程办公还远没有 2020 年后那么"云原生"——Windows 上远程服务器、传文件、查文档的常规动作还是靠Xshell + FileZilla + Chrome这三条腿。本文整理这三条腿的实战细节，外加 Graphviz 绘图、Tesseract OCR 文字识别、Zhexi 文本处理等"工具"。

二、Xshell：Windows 最好的 SSH 客户端

2.1 安装

Xshell 是 NetSarang 出品的商业 SSH 客户端。个人/学校免费版到官网 https://www.xshell.com/ 下载，5.x 起对个人/非商业用户免费。安装时取消勾选"Xftp"等捆绑（按需选装）。

2.2 新建 SSH 会话

文件 → 新建 → 名称 + 主机 + 端口（默认 22）
用户身份验证 → 填用户名 + 密码
保持活动状态 → 勾选"发送保持活动消息"（避免 NAT 断开）
外观 → 字体 → Consolas 10pt（中英文都好看）

企业实战技巧：

保存密码：Xshell 7+ 取消"明文保存"，用 Master Password 加密
登录脚本：登录脚本 标签 → 添加 expect 脚本处理二次验证
代理跳板：隧道 → TCP 转发，配合 Xshell 的"跳板"功能穿透堡垒机

2.3 SSH 密钥登录（比密码更安全）

工具 → 用户密钥管理者 → 生成 → RSA 2048 / Ed25519
导出公钥 → 复制到服务器的 ~/.ssh/authorized_keys
终端 → 用户身份验证 → 选 Public Key

1
2
3
4


# 服务器端一键添加
mkdir -p ~/.ssh && chmod 700 ~/.ssh
echo "ssh-rsa AAAA...公钥内容...== user@host" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

2.4 常用快捷键

快捷键	作用
`Alt + Enter`	全屏
`Ctrl + Shift + T`	新建标签页
`Alt + 数字`	切换到第 N 个标签
`Ctrl + Insert` / `Shift + Insert`	复制 / 粘贴（Xshell 默认）
`Ctrl + L`	清屏

2.5 性能调优

连接 → SSH 勾选 Compression（慢网加速）
高级 → 终端 选 xterm-256color（颜色更丰富）
高级 → 键盘 设 Backspace = ASCII 127（兼容 vim）

三、FileZilla：FTP / SFTP 文件传输

3.1 安装

FileZilla 分两个版本：

FileZilla Client：免费开源，推荐
FileZilla Server：开源但商业部署要付费

官方 https://filezilla-project.org/ 下载 Client，安装时取消勾选"金山毒霸"等捆绑。

3.2 SFTP 连接

文件 → 站点管理器 → 新站点：

协议：SFTP（不是 FTP）
主机 + 端口（22）
登录类型：正常 / 密钥文件
字符集：UTF-8（避免中文乱码）

注意：SFTP 和 FTPS 是两个完全不同的协议。SFTP 走 SSH（端口 22），FTPS 走 SSL/TLS（端口 990）。现代实践全部用 SFTP。

3.3 传输优化

编辑 → 设置 → 传输：

最大并发传输数：10
最大并发连接数：10
分块大小：加大到 1 MB（大文件更快）
失败重试：5 次

3.4 排错：连接超时

被动模式（PASV）/ 主动模式（PORT）：服务器在 NAT 后，客户端必须用主动模式
SSL 警告：自签名证书第一次会弹"未受信任"，勾选"始终信任"
文件名乱码：服务器用 GBK，客户端用 UTF-8 就会乱码——切换字符集

四、Google Chrome：开发者浏览器

4.1 安装与去广告

官方 https://www.google.com/chrome/ 下载，安装时取消勾选"将 Chrome 设为默认浏览器"如果不想换默认。Chrome 自身无内置广告（主要担心的是 360 安全浏览器那种"推荐"）。

4.2 开发者必备扩展

扩展	用途
`JSON Viewer` / `JSONVue`	美化 JSON 响应
`Vue Devtools` / `React Devtools`	前端框架调试
`Postman Interceptor`	配合 Postman 拦截请求
`SwitchyOmega`	代理切换（开发环境必备）
`EditThisCookie`	快速编辑 Cookie
`User-Agent Switcher`	切换 UA 模拟移动端

4.3 代理与 SOCKS5

Chrome 系统代理走 IE 设置。如果需要按站点分流：

1
2


# 用 SwitchyOmega 配置：直连 / 代理 / 自动切换
# 代理规则：file:///C:/path/to/auto_switch.pac

auto_switch.pac：

1
2
3
4
5
6


function FindProxyForURL(url, host) {
 if (dnsDomainIs(host, "internal.example.com")) {
 return "SOCKS5 127.0.0.1:1080";
 }
 return "DIRECT";
}

4.4 调试模式

chrome://flags 是隐藏实验室开关，对终端用户慎用。常用：

chrome://flags/#smooth-scrolling 平滑滚动
chrome://flags/#enable-parallel-downloading 并行下载（对慢网很有效）
chrome://discards 查看标签页休眠状态

4.5 抓包工具联动

Chrome DevTools 的 Network 标签抓 HTTPS 请求需要导出。配合外部抓包工具（[2016-11-15 数据库客户端] 中提到的 Fiddler）才能抓到 native 应用流量。

五、Graphviz：代码画流程图

5.1 定位

Graphviz 1991 年起源 AT&T 贝尔实验室，用 DOT 语言描述图，自动布局。dot / neato / fdp / circo 四个布局引擎适应不同场景。

5.2 安装

官方 https://www.graphviz.org/download/ 下载 Windows msi
装好后把 C:\Program Files\Graphviz\bin 加到 PATH

5.3 DOT 语言基础

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


digraph hello {
 rankdir=LR; // 从左到右布局
 node [shape=box style="rounded,filled" fillcolor=lightblue];
 
 Start [shape=ellipse fillcolor=lightgreen];
 End [shape=ellipse fillcolor=lightcoral];
 
 Start -> "读取配置" -> "解析参数" -> "执行业务" -> End;
 "解析参数" -> "参数错误" [label="失败" color=red];
 "参数错误" -> End;
}

5.4 PlantUML 集成

PlantUML 内部用 Graphviz 渲染 .puml 文件：

1

PlantUML 渲染器路径：C:\soft\Graphviz\bin\dot.exe

VSCode 装 PlantUML 扩展 → 设置 plantuml.render 为 PlantUMLServer 或 Local，Local 模式必须装 Graphviz。

六、Tesseract OCR：免费文字识别

6.1 定位

Tesseract 是 HP 实验室 1985-1995 年开发、2005 年开源的 OCR 引擎。Google 维护至今，支持 100+ 语言。对印刷体识别率 95%+，对手写体效果一般。

6.2 Windows 安装

官方 https://github.com/UB-Mannheim/tesseract/wiki 提供 Windows 安装包
安装时勾选中文语言包：chi_sim（简体）、chi_tra（繁体）
装好后 tesseract --list-langs 验证

6.3 命令行用法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 识别单张图（中英文）
tesseract input.png output -l chi_sim+eng

# 识别 PDF
tesseract input.pdf output -l chi_sim+eng

# 输出为 hOCR（带坐标的 HTML）
tesseract input.png output hocr

# 输出为 TSV（表格友好）
tesseract input.png output tsv

6.4 Python 绑定

1
2
3
4
5
6


import pytesseract
from PIL import Image

img = Image.open("screenshot.png")
text = pytesseract.image_to_string(img, lang="chi_sim+eng")
print(text)

6.5 提升识别率

预处理：二值化（cv2.threshold）、降噪（cv2.medianBlur）、倾斜矫正
DPI 至少 300：扫描 PDF 转图
分语言模型：中文 + 英文组合，比单一语言更准

七、Zhexi：文本处理小工具

7.1 定位

Zhexi 是 2018 年由个人开发者 https://gitee.com/longwen-zhexi/zhexi 维护的轻量文本批量处理工具。常用于：

批量重命名文件
批量替换文本
提取日志关键字段
大文件按行分割

7.2 典型用法

1
2
3
4
5
6
7
8


# 批量重命名
zhexi rename --pattern "IMG_(\d+).jpg" --replace "photo-$1.jpg" --dir ./photos

# 大文件按行分割
zhexi split --input big.log --lines 10000 --prefix chunk-

# 提取 IPv4
zhexi extract --pattern "\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b" --input access.log

八、组合实战

8.1 远程调试 Java 应用

Xshell SSH 到测试服务器
tail -f catalina.out 看实时日志
Tesseract 截图识别 → 提取关键错误
Chrome + Fiddler 复现问题

8.2 批量运维脚本

FileZilla 传脚本
Xshell 标签页多机器并发执行
Zhexi 处理输出日志
Graphviz 把"服务器状态图"画出来

九、常见问题

9.1 Xshell 突然不能复制粘贴

检查 工具 → 选项 → 键盘和鼠标 → 中间键 设置
重启 Xshell（最暴力但有效）
检查是否启用了"宏"——工具 → 宏 → 录制宏 可能误占用剪贴板

9.2 FileZilla “无法连接到服务器”

防火墙是否放行 22 端口
服务器端 /etc/ssh/sshd_config 中 PasswordAuthentication yes
客户端 连接超时 调大到 60s

9.3 Chrome 启动慢

chrome://flags/#enable-site-per-process 关闭能加速但牺牲安全。 chrome://settings/clearBrowserData 清掉过多缓存。

9.4 Graphviz 中文乱码

1
2
3
4


digraph G {
 node [fontname="Microsoft YaHei"];
 "开始" -> "处理" -> "结束";
}

或者 dot -Tpng:cairo:file 用 cairo 后端。

9.5 Tesseract 中文识别率低

装 chi_sim + eng 混合模型
图像预处理（OpenCV 二值化）
用 --psm 6 假设是单块文本

十、下一步

想看数据库连接：[2013-09-15 Windows 终端与 Navicat 工具链]
想看抓包调试：[2016-11-15 数据库客户端实战：MySQL / Redis / ES / MQTT]
想看 Git 工作流：[2014-11-15 Git 与版本控制]

本文写于 2013 年，回看当时：Xshell 至今仍是 Windows SSH 客户端的事实标准，FileZilla 仍是 FTP/SFTP 首选；Chrome 早就吃掉了 IE 份额，但 2013 年兼容 IE 6-8 仍是 Web 开发的必备技能——这篇工具链 10 年后大部分仍然适用。