当 Qwen Code 遇上 Chrome DevTools MCP,网页爬取、数据采集...一条命令全搞定

你想做个自动化项目,比如:

• 爬取电商网站的商品价格,做价格监控

• 采集竞品数据,生成分析报告

• 自动化测试你的 Web 应用

传统方式有多痛?

写爬虫:

• 学 Selenium/Puppeteer,写一堆代码

• 处理反爬虫:验证码、IP 限制、User-Agent 检测

• 动态加载内容要等元素出现,写一堆 waitFor

• 页面结构一变,selector 全得改

问题出在哪?

你得既懂爬虫技术,又懂前端,还得会处理各种边缘情况。写完代码,调试半天,维护更累。

现在,这个问题有解了。

Qwen Code:命令行里的 AI 编程搭档

先简单介绍下 Qwen Code(不了解的可以看我之前的文章)。

硬刚Gemini、Claude，阿里这个免费AI终端火了，不愧是国产之光！

核心能力:

• • 超大上下文窗口(256K-1M tokens),整个项目都能塞进去

• • 支持 40+ 编程语言

• • 自动化工作流(Git 分析、生成 changelog、创建 issues)

• • 代码理解、重构、测试生成一把抓

使用方式:

# 进入项目目录
cd your-project/
# 启动 Qwen Code
qwen
# 开始对话
> 帮我优化这个 React 组件的性能
> 生成单元测试
> 分析这个项目的架构

Chrome DevTools MCP:给 AI 装上"眼睛"

这是 Google Chrome 团队开源的工具,基于 Model Context Protocol(MCP) 标准。

MCP 是啥?

简单说,就是 AI 工具的"USB-C 接口"。以前每个 AI 工具要接入不同数据源,都得写一套定制代码。MCP 提供了统一标准,让 AI 能无缝连接各种系统。

Chrome DevTools MCP 能干啥?

让 AI 编程助手能直接控制和检查实时 Chrome 浏览器,就像你手动打开 DevTools 一样。

26 个工具,分 5 大类:

1. 输入自动化(8 个工具)

• click:点击元素

• fill:填写表单

• drag:拖拽元素

• hover:悬停触发效果

• press_key:按键操作

• upload_file:上传文件

• handle_dialog:处理弹窗

2. 导航自动化(6 个工具)

• navigate_page:打开网页

• new_page:新建标签页

• close_page:关闭页面

• list_pages:列出所有标签页

• wait_for:等待元素加载

3. 性能分析(3 个工具)

• performance_start_trace:开始性能追踪

• performance_stop_trace:停止追踪

• performance_analyze_insight:分析性能瓶颈

4. 网络调试(2 个工具)

• list_network_requests:列出所有网络请求

• get_network_request:查看请求详情(诊断 CORS、API 报错等)

5. 调试工具(5 个工具)

• evaluate_script:执行 JavaScript

• list_console_messages:查看控制台日志

• take_screenshot:截图

• take_snapshot:获取 DOM 快照

组合起来,能玩出什么花样?

场景 1:电商价格监控爬虫

需求:

监控京东、淘宝上某款手机的价格变化,价格低于预设值时自动通知。

传统方式:

• # 写一堆 Selenium 代码from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWait# ... 100+ 行代码# 处理登录、等待加载、解析价格、存储数据...

用 Qwen Code + Chrome DevTools MCP:​​​​​​

qwen> 使用Chrome DevTools MCP帮我爬取京东这个商品的价格:https://detail.tmall.com/item.htm?ali_refid=a3_430582_1006%3A1103101367%3AH%3APHT5pyVQEINCimYkGz9SWA%3D%3D%3Ae50f6218bbd81e181ef86ba78d11e418&ali_trackid=318_e50f6218bbd81e181ef86ba78d11e418&fpChannel=101&fpChannelSig=18fa5562689a603a54b6eda7f20f83cbf08c1622&id=692996234101&mi_id=0000oeRNil4lYCOwybtf2eTNuZa3wMBsQPLQyNQYLvVGea0&mm_sceneid=0_0_13392197_0&priceTId=2147841717652765721508517e11ba&skuId=5453749712245&spm=a21n57.1.hoverItem.1&u_channel=bybtqdyh&umpChannel=bybtqdyh&utparam=%7B%22aplus_abtest%22%3A%22b75f3451e08c9d09607ef5c7190648f0%22%7D&xxc=ad_ztc> 提取商品名称、当前价格、促销信息> 保存到 prices.json 文件

AI 自动完成:

1. 打开京东商品页

2. 等待页面加载完成

3. 定位价格元素(自动处理动态加载)

4. 提取数据

5. 格式化并保存到 JSON

更牛的是:

> 每小时检查一次这个商品价格> 如果价格低于 240 元,截图并发送到我的邮箱> 把历史价格数据生成折线图

AI 会自动:

• 生成定时任务脚本

• 添加价格对比逻辑

• 集成邮件发送功能

• 用 Chart.js 生成价格走势图

场景 2:竞品数据采集

需求:

采集竞品网站的文章标题、阅读量、评论数,生成分析报告。

传统方式:

• # 写爬虫脚本# 处理分页、Ajax 加载# 解析 HTML# 存储到数据库# 生成报表# ... 至少 200 行代码

用 Qwen Code + Chrome DevTools MCP:​​​​​​​

qwen> 使用Chrome DevTools MCP工具执行浏览器自动化任务，爬取 https://blog.csdn.net/weixin_41246802?type=blog 最近 30 天的文章> 提取:标题、发布时间、阅读量、评论数、点赞数> 分析哪些话题最受欢迎> 生成MarkDown报表

AI 自动完成:

实测效果:

场景 3:自动化表单填写

需求:

批量注册账号、填写问卷、提交表单。

传统方式:

手动填写,或者写 Selenium 脚本处理各种表单验证。

用 Qwen Code + Chrome DevTools MCP:

qwen

> 帮我填写这个问卷:https://survey.com/form123
> 数据从 data.csv 读取
> 每条数据提交一次
> 处理验证码(如果有的话提示我)

AI 自动完成:

1. 打开问卷页面

2. 读取 CSV 数据

3. 识别表单字段

4. 自动填写(文本框、单选、多选、下拉框)

5. 处理表单验证

6. 提交

7. 检查提交结果

8. 继续下一条数据

场景 4:自动化测试

需求:

测试你的 Web 应用的核心功能。

传统方式:

写 E2E 测试脚本(Playwright/Cypress),维护成本高。

用 Qwen Code + Chrome DevTools MCP:

qwen

> 测试我的电商网站 https://my-shop.com:
> 
> 用户注册流程:
> 1. 打开注册页面
> 2. 填写邮箱、密码
> 3. 点击注册
> 4. 验证是否跳转到欢迎页面
> 
> 购物流程:
> 1. 搜索"iPhone 15"
> 2. 点击第一个商品
> 3. 加入购物车
> 4. 验证购物车数量
> 5. 结算
> 6. 填写收货地址
> 7. 选择支付方式
> 8. 验证订单生成
> 
> 每个步骤截图保存
> 如果任何步骤失败,记录详细错误信息

AI 自动完成:

1. 执行所有测试步骤

2. 自动等待元素加载

3. 处理异步操作

4. 截图保存

5. 生成测试报告

6. 如果失败,分析原因(控制台报错、网络请求失败等)

怎么配置这个组合?

第一步:安装 Qwen Code

npm install -g @qwen-code/qwen-code@latest

或者

brew install qwen-code

第二步:配置 Chrome DevTools MCP

在 Qwen Code 的配置文件里加上 MCP 服务器配置。

添加配置:

Qwen mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

第三步:测试一下

qwen

> 检查 https://developers.chrome.com 的性能

如果 AI 自动打开浏览器并开始分析,说明配置成功!

实战技巧

技巧 1:爬虫要处理好反爬虫

❌ 不好的做法:

> 爬取这个网站的所有数据

✅ 好的做法:

> 爬取 https://example.com 的商品数据
> 每次请求间隔 2-3 秒
> 使用随机 User-Agent
> 如果遇到验证码,暂停并通知我
> 最多爬取 100 条数据

为什么?

• 间隔时间避免被封 IP

• 随机 User-Agent 模拟真实用户

• 限制数量避免过度消耗资源

技巧 2:自动发布要测试先行

❌ 不好的做法:

> 直接发布到所有平台

✅ 好的做法:

> 先在知乎发布草稿,让我检查一下
> 确认没问题后再发布到其他平台
> 
> 或者:
> 先在测试账号发布,截图给我看

为什么?

• 避免格式错误发布到正式平台

• 可以先检查图片、链接是否正常

• 测试账号可以反复试错

技巧 3:数据采集要结构化

❌ 不好的做法:

> 爬取这个网站的数据

✅ 好的做法:

> 爬取 https://blog.com 的文章数据
> 提取字段:
>   - title:文章标题
>   - author:作者
>   - publish_date:发布时间(格式:YYYY-MM-DD)
>   - views:阅读量(数字)
>   - tags:标签(数组)
> 
> 保存为 JSON 格式,每篇文章一个对象
> 如果某个字段缺失,填 null

为什么?

• 明确字段名和数据类型

• 方便后续数据分析

• 统一格式便于导入数据库

技巧 4:定时任务要有日志

❌ 不好的做法:

> 每小时检查一次价格

✅ 好的做法:

> 每小时检查一次价格
> 每次运行记录日志到 logs/price_monitor.log
> 日志包含:时间、商品名称、价格、是否变化
> 如果连续 3 次失败,发送告警邮件

为什么?

• 日志方便排查问题

• 失败告警避免长时间中断

• 可以追溯历史运行情况

技巧 5:处理登录要安全

❌ 不好的做法:

> 自动登录,用户名 xxx,密码 xxx

✅ 好的做法:

> 检测登录状态
> 如果未登录,打开登录页面,让我手动登录
> 登录后保存 Cookie,下次自动使用
> 
> 或者:
> 从环境变量读取账号密码
> 登录后保存 session 到 .session 文件

为什么?

• 避免密码明文暴露在命令行

• Cookie/Session 可以重复使用

• 手动登录可以处理验证码

技巧 6:利用 Session 管理节省 Token

自动化项目会产生大量输出(网页内容、网络请求、控制台日志等),容易消耗大量 token。

建议:

• 用 /compress 压缩历史对话

• 用 /clear 清空不需要的上下文

• 用 /stats 监控 token 使用情况

• 明确告诉 AI 只提取你需要的数据

qwen

> 爬取商品数据,只返回 JSON,不要返回完整的 HTML
(AI 爬取完成)

> /compress
(压缩历史,节省 token)

> 继续爬取下一页

注意事项

1. Token 消耗较高

1. 遵守法律和网站规则

重要提醒:

爬虫和自动化操作可能涉及法律风险,请务必:

• 遵守网站的 robots.txt 规则

• 遵守网站的服务条款(Terms of Service)

• 不要爬取个人隐私数据

• 不要用于商业竞争的不正当手段

• 不要对网站造成过大负担(DDoS 攻击)

建议:

> 爬取前先检查 https://example.com/robots.txt
> 如果禁止爬取,停止操作并通知我

2. Token 消耗较高

自动化项目会产生大量数据:

• 网页 HTML 可能几十 KB

• 网络请求列表可能几百条

• 控制台日志可能几千行

建议:

• 优先用 Qwen OAuth 的免费额度(每天 2000 次请求)

• 定期用 /compress 压缩历史

• 明确告诉 AI 只提取必要数据

• 避免一次性爬取大量页面

3. 反爬虫机制

很多网站有反爬虫措施:

• 验证码(图片验证码、滑块验证码)

• IP 限制(频繁访问会被封)

• User-Agent 检测

• Cookie/Session 验证

• 动态加载(Ajax、WebSocket)

建议:

• 设置合理的请求间隔(2-5 秒)

• 使用随机 User-Agent

• 遇到验证码时手动处理

• 保存 Cookie/Session 重复使用

• 必要时使用代理 IP

4. 数据准确性

AI 提取的数据可能不 100% 准确:

• 网站结构复杂时可能定位错误

• 动态加载内容可能遗漏

• 特殊格式数据可能解析错误

建议:

• 先小规模测试(爬 10 条数据检查)

• 验证关键字段的准确性

• 设置数据校验规则

• 定期人工抽查

5. 账号安全

自动登录和发布可能有风险:

• 账号可能被平台检测为机器人

• 频繁操作可能被限制或封号

• 密码泄露风险

建议:

• 使用测试账号进行调试

• 不要在命令行明文输入密码

• 使用环境变量或配置文件存储凭证

• 定期更换密码

• 遵守平台的自动化政策

适合谁用?

✅ 强烈推荐

电商从业者

• 价格监控(竞品价格、促销活动)

• 商品数据采集(评价、销量、库存)

• 自动化上架(批量发布商品)

内容创作者

• 多平台自动发布(知乎、公众号、小红书)

• 热点监控(第一时间获取行业资讯)

• 竞品分析(分析爆款内容特征)

数据分析师

• 竞品数据采集

• 行业数据监控

• 自动化报表生成

独立开发者

• 自动化测试(E2E 测试、回归测试)

• 网站监控(性能监控、错误监控)

• 批量操作(批量注册、批量提交)

运营人员

• 用户行为分析

• 竞品动态监控

• 自动化营销(定时发布、批量私信)

学生/研究者

• 数据采集(论文数据、研究素材)

• 问卷调查(批量填写、数据收集)

• 学习自动化技术

⚠️ 可能不太适合

• 完全不懂技术的小白:虽然降低了门槛,但还是需要基本的计算机操作能力

• 对成本极度敏感:Token 消耗较高,大规模使用需要考虑成本

• 需要极高准确性的场景:AI 提取数据可能有误差,金融、医疗等领域需谨慎

Qwen Code + Chrome DevTools MCP 这个组合,让自动化项目从"技术门槛高、开发周期长"变成了"自然语言描述、10 分钟上线"。

当然你也可以尝试使用Gemini-cli、Claude code、Trae、Cursor、Antigravity等等组合验证哪个效果更好。

想了解更多AI工具和技术趋势？关注我，每周为你带来最新的AI资讯和实用教程！

原文地址：https://mp.weixin.qq.com/s/YhvMowoNZb19GxP5Z-wVFg