---
title: '23 浏览器自动化详解'
video_id: UPtmKh1vMN8
part: 23
---

> 章节 23 / 29 · [[00-总览|课程总览]] · 起始 [1:55:29](https://youtu.be/UPtmKh1vMN8?t=6929)


## 章节主旨

当 HTTP 请求太脆、太窄够不着时,让 Claude 直接接管一个真实浏览器去点击、填表、导航完成任务;并讲清「HTTP 请求 vs 浏览器自动化」之间的成本-可靠性权衡与实战取舍。

## 核心论点

1. **HTTP 请求快而便宜,但脆弱且窄**——依赖固定格式与隐藏 API,场景一变就断。([[#1-自动化的两级从-http-请求到浏览器自动化-15553|→ 详解1]])
2. **浏览器自动化让 Claude 真的开一个浏览器替你操作**——加载页面、点按钮、填表单,通用性强得多。([[#2-怎么做chrome-devtools-mcp-与-browser-use-15611|→ 详解2]])
3. **两者是一条光谱,不是二选一**:HTTP 前期配置多但更快更省;浏览器自动化几乎总能work但更慢更贵。([[#3-成本-可靠性光谱setup速度价钱的权衡-15832|→ 详解3]])
4. **正确姿势是先原型后下沉**:先用浏览器自动化跑通,再看能否改写成 HTTP 请求省钱。([[#4-实战策略先浏览器原型验证后再降级到-http-15857|→ 详解4]])

## 知识点详解

### 1. 自动化的两级:从 HTTP 请求到浏览器自动化 [1:55:53](https://youtu.be/UPtmKh1vMN8?t=6953)

第一级是 HTTP 请求。绝大多数服务都有 API,可以直接通信,速度快;但它很脆:要求非常特定的格式,场景窄,复杂任务还可能拖很久。

第二级是 浏览器自动化——Claude 真正完整接管你的浏览器。它不再是底层发几个 HTTP 请求,而是实打实加载出一整个浏览器,替你走完整个流程(如在日历上订一场会)。

作者对比:同样一件「按给定时间信息订会议」的小事,人 1 秒搞定,他手动跟模型来回折腾了约 5 分钟、烧掉约 40 美元 token。浏览器自动化正是为跨过这道坎而生。

### 2. 怎么做:Chrome DevTools MCP 与 browser use [1:56:11](https://youtu.be/UPtmKh1vMN8?t=6971)

现在已有一些内置工具,但录制时最好用的是两条路:Chrome DevTools MCP,或较新的 browser use 平台(功能新,但费用不低)。

机制上,它会真的**新开一个浏览器实例**,然后滚动页面、点击按钮、逐步导航。底层做法是**修改页面的 JavaScript、执行简短命令**来跟页面交互并推进流程。

作者演示订会:模型自动填电话、回答「联系原因/项目预算」等 booking 问题,自己找到预算选项选中「25 到 50K」,遇到电话号码格式非法还会删掉重排成合法格式,一路截图留痕,最终确认完成。

### 3. 成本-可靠性光谱:setup、速度、价钱的权衡 [1:58:32](https://youtu.be/UPtmKh1vMN8?t=7112)

这是一条渐变光谱,不是非此即彼。一端是 HTTP 请求:**前期配置(setup)更多,但一旦跑通就更快、通常更便宜**——知道格式后一次请求约 0.2 秒就订完。

另一端是浏览器自动化:**几乎总能work、适配的用例广得多,但更慢也更贵**。因为它是一步一步走页面,每个动作耗时都约等于一次 HTTP 请求。

作者点题:能用 Claude 做的酷东西,本质大多就是自动化;吃透「纯 HTTP 请求(常靠隐藏 API)↔ 浏览器/计算机自动化」这个权衡,才能把很多东西控制得更好。

### 4. 实战策略:先浏览器原型,验证后再降级到 HTTP [1:58:57](https://youtu.be/UPtmKh1vMN8?t=7137)

对任何要在浏览器上跑的商业应用原型,作者**先用浏览器自动化(甚至计算机自动化)**把流程跑通,因为它「几乎总能成」。

跑通并确认可行后,再回头问:这事能不能改成 HTTP 请求?能的话就便宜太多,之后可以在后台批量跑一堆 HTTP 请求。

为什么非浏览器不可?很多网站(如租房站 rentals.ca)**刻意做反自动化**,故意把抓取变得极难,HTTP 请求要么配置成本巨大、要么极其脆弱;这时直接开浏览器、改几个筛选、缩放页面反而做得成。

## 术语

- HTTP request(HTTP 请求):调用服务 API 的自动化方式,快而省但依赖固定格式、脆弱且场景窄
- browser automation(浏览器自动化):Claude 完整接管真实浏览器,加载页面并点击/填表/导航完成任务
- Chrome DevTools MCP:通过 Chrome 开发者工具协议驱动浏览器自动化的 MCP 工具
- browser use:较新的浏览器自动化平台,能力强但费用较高
- anti-automation(反自动化):网站刻意增加抓取难度、阻挡自动化操作的防护手段

## 自检问题

1. HTTP 请求已经又快又便宜,为什么还需要浏览器自动化?
   **答案**:HTTP 请求脆弱且窄——依赖固定格式和隐藏 API,场景一变就断,且很多站点刻意反自动化让 HTTP 方案配置成本巨大或极脆;浏览器自动化通用性强、几乎总能work,代价是更慢更贵。锚定详解1、详解4。 [1:55:53](https://youtu.be/UPtmKh1vMN8?t=6953)
2. 浏览器自动化底层是怎么操作页面的?
   **答案**:新开一个真实浏览器实例,通过修改页面 JavaScript、执行简短命令来点击、填表、滚动、导航,一步步推进流程并截图留痕。锚定详解2。 [1:56:11](https://youtu.be/UPtmKh1vMN8?t=6971)
3. 面对一个新的浏览器任务,作者推荐的落地顺序是什么?为什么?
   **答案**:先用浏览器自动化跑通原型(因为它几乎总能成),验证可行后再看能否改写成 HTTP 请求;能改就便宜得多,可在后台批量跑。这是在「setup 成本 vs 速度/价钱」光谱上的务实取舍。锚定详解3、详解4。 [1:58:57](https://youtu.be/UPtmKh1vMN8?t=7137)