litho如何对接devtools

cloud code 浏览器自动化方案应该怎么选？先说结论，再介绍这几个方案。如果你是普通用户，只是想抓取简单页面的内容，订酒店机票，填写一些网站的表单，就用 agent browser。 如果你是开发者，想在开发中排查页面 bug， 查看接口信息，分析性能瓶颈，就用 chrome dvodes mcp。 如果你是测试，想生成测试脚本，执行测试流程，或者是抓取复杂页面的内容，更推荐使用 playwrite mcp。 如果是一些复杂图标 converse 实现的页面，不想依赖其他方式，例如 mcp 的 话，单纯依靠浏览器来操作，那么 cloud in chrome 几乎是你唯一的方案。 那么接下来具体的介绍一下每个方案。首先是 agent browser， 它会解析页面结构，过滤掉样式图片后，将内容交给大模型识别，在对页面变化的适应性和内容识别的准确度方面得到比较好的平衡， 适合进行日常的浏览操作。例如抓取内容平台数据，预定酒店机票，监控商品信息，填写在线表单深层咨询日报 chromos mcd 底层是通过远程调试端口直接控制浏览器，所以天然的比其他查看页面结构的工具可以做更底层的事情，更适合开发者来使用。 例如排查前端页面的 bug， 查看 api 接口信息，分析性能瓶颈，甚至能绕过页面的反爬虫机制人机验证等拦截。 playwrite mcp 会把整个页面的完整结构都交给大模型，所以它能面对很复杂的页面。如果通过 agent browser 抓取一些页面上的内容时，发现不能抓取或者抓取不完整， 可以考虑用 playrite mcp 来抓取，更多的时候会适合 qa 使用。例如辅助生成自动化测试代码，执行自动化测试脚本。微软还推出了 playrite and coi， 可以 搭配 playrite mcp 来干活。 最后是 cloud in chrome 最大的特点是采用纯视觉方案，好处是显而易见的拟人程度最高，任何人类能够操作和看到的内容它都能执行。例如执行 figma 这样的 canvas 画布类应用操作，可直观图标，填写图形验证码。 最后我们看一下它们大致的任务投币消耗量，从低到高依次是， agent browser、 chrome、 dvodes、 mcp、 per write mcp、 cloud in chrome。

同学接了单的找我答疑，首先打开小程序，打开 david 兔子，你们可以用那高版本工具，低版本我用习惯了。首先点击触发一下请求，因为这个直接跳转页面，所以它东西特别多，首先有一个 delete， 这个 delete 直接一律不再，此处暂停就行了。 过了之后看这几个请求，点一下叉叉。首先请求里边有一个 data， data 里边意外开头的一眼被四六四，显然这不是我们要的结果，我们要是搞这个 token， 当前这个请求里边有一个 token， 它是一个密文，它是两个等号结尾的， 所以还是一眼被四六四啊。然后打开 deep space， 让它分析一下这是什么算法。把这个深度思考和联网搜索点上，然后你就会发现它的一个深度思考，因为不点的话，它会比较傻。2 thousand years later 这思考了十分钟了，还思考呢，给停了吧。那就把这个深度思考取消，然后再问他一遍，这次出来的结果就比较快了，他会先分析长度，然后分析位数，然后分析他的结尾，分析里边内容，那最后得到一个贝斯六四，最后还是无法确定， 哈哈哈哈，还是搜索大法吧，直接搜搜这个关键字，偷看，由于东西比较多，所以给他引号引起来啊，发现内容就少了。最后我们点进来可以直接找他加密的位置，为什么我一搜就搜出来，因为我尝试了各种搜，这只是最终的一个结果， 通过二点 ing 快 捷进行的加密算法，所以进去也发现是一个标准的 a s， 那 它外边就传了一个拼接参数，那这个拼接参数就是带加密的值，第一个请求加密值明显跟我们那头根不一样，再点一下第二个请求值，第二个请求值跟我们目标是一样的， 因为它往里传了时间戳，所以每次这个值都是变化的，就因为请求特别多，而且老刷新，这个值跟刚才值不一样，但是特征是对了，这个案例比较简单，适合新手。呃，输入到小程序实战里， nice。

平时用 headless chrome 做网页爬取或者自动化的时候，是不是总觉得它资源占用太高，启动太慢？今天给大家推荐一个专为 ai agent 和大规模爬虫优化的轻量级无头浏览器 obscura。 obscura 是 开源的核心，优势特别突出， 内存只要三十 mb 左右，二进置文件才七十 mb， 比 chrome 轻太多了。启动和加载页面速度超快，比如启动只要八十五毫秒，而 chrome 要五百毫秒上下。而且它是单二进置运行，不用装 chrome 或者 node， 直接就能用，特别适合高并发或者资源有限的环境。 它用 b 八引擎真正执行 javascript， 支持完整的 chromedev tools、 protocol 和 puppeteer playwright 这些常用工具兼容 existing 脚本，几乎不用改就能迁移过去。 还有内置 c i 命令，比如用 fetch 获取网页标题 serve 启动 c t p 服务 script 并行采集多个网址，操作起来很方便。最实用的是反指纹功能，每个绘画都会随机画 gpu 屏幕、 canvas 这些指纹信息模拟真实的 chrome 指纹，还能自动屏蔽三千五百多个追踪器域名。 不过这里要强调，这些功能一定要用在合法合规的场景，遵守网站的使用条款和 robots 点 txt 哦。性能方面， obscure 的 表现很惊艳， 静态 html 加载五十一毫秒 vs chrome 的 五百毫秒， js 加 xh 二是八十四毫秒 vs 八百毫秒。动态脚本七十八毫秒 vs 七百毫秒，速度优势特别明显。 它的使用场景非常广阔，大规模数据抓取、 ai 代理的网页交互、自动化测试，还有需要隐私保护的爬取任务，部署起来也简单，直接下载跨平台的二定制文件或者源码翻译， 可以单机运行，也能启动服务模式，支持并行 worker。 企业用户还可以加入 obscure cloud 的 等待列表，用托管服务和代理 对比 headless chrome， obscure 资源占用更低，启动更快。还有内置反指纹，兼容性却一样好。不过合规是底线，大家一定要记得遵守法律，用 oba robot 参数设置速率限制哦。 obscure 是 面向自动化和大规模爬取的高效、轻量、 c d p 兼容的开源引擎。去 github 下载 releases 的 二禁制试试。

我让 cloud 给我写了一个在各平台自动发布视频的脚本，完全是冻嘴，花了一周多时间给我干掉了半个月的套餐额度，当然了，如果自己写的话，可能一天就搞定了。大家看到这个界面完全是代码自动化在执行，我完全没有动手，它会自动的去上传视频， 上传封面，填写标题简介，选择定制发布时间等等。这是在填写标签，选择时间和分钟， 然后准备发布抖音，他自动的访问抖音的这个发布页面，大家可以看到我鼠标完全没有动，他在上传视频，填写标题，加入标签，然后是选择封面，中间各种弹窗，该如何处理，全部是代码自动写好的，其实核 是这个配置文件，当然了，这个配置文件模板也是让大冒险写好的，需要指定你的视频文件在什么地方，包括你的横屏和竖屏封面在什么地方，标题描述话题，定时发布时间。然后不同的平台可能还有些特殊的配置， 比如说，哎，某一个平台，他的定制发布时间跟别人不一样，那么你可以单独配置一下，我会录几期视频，给大家介绍一下在这一段时间里，我的各种尝试，各种经验和心理感悟。 今天先从工具讲起，你要在各平台自动发布视频吗？最重要的就是你如何去操控浏览器，进行各种导航，点击输入操作。那最传统最经典的就是 chrome dap to， 我们需要安装对应的 m c p， 想查看 看一下，直接输入 m c p。 这边可以看到我安装了 karm dev to 和 playright 这个 play rate， 你可以理解为它是 karm dev to 的一个封装，本质上差不多都是可以操控浏览器嘛。 那现在他说是连接失败，我们来重连一下，先选中这个 m c p， 然后回车进来， 然后我们选择一 reconnect 重连啊，他正在尝试重连，那么这样就连接成功了。再来看一下 我们的 payrate， 也需要重连一下， reconnect 正在重连。好，连接成功，检查一下， ok， 都连好了。那么现在还有一个工具叫做 agent browser， 这个 agent browser 它底层也是直接封装了 payrite， 只不过呢， 从名称上看，他完全面向 agent， 在 apple 的这种场景下，他消化的 token 会更少，我们待会儿会体验一下。我们先来看一下这个 mcp 吧，比如说这个 playwright。 进来，我们选择第一个 leo tools， 看一下这个 mcp 里面有哪些工具。回车进去， 他可以关闭浏览器，对浏览器窗口进行缩放，可以获得终端信息，可以操纵对话框，可以执行 gs 上传文件，填写表单，鼠标拖动悬停下拉框啊，一共有二十二个工具， 那工具特别多也不一定是好事，因为每一个工具它的功能和用法你都需要事先告诉大模型，那这样的话会消耗更多头肯，而且大模型 行面对众多工具太好之后，也不知道到底选择哪一个更合适，所以工具并不是越多越好。我们按 is keep 返回，再返回，再返回。这边我做了个测试，我想让 cloud 先导航到 我客人的动力面，然后呢，在用户名里面输一个内容，在密码框里面输一个内容，然后截屏，最后告诉我这一通操作消耗了多少头啃，而且特别强调 只能使用 chrome depth 啊，不能使用 play red 或者是 in the browser。 那么做完这个实验之后，我又做了第二个实验，跟刚才几乎一模一样。只不过呢，这次我强调他必须使用 agent browser， 而不能使用 play red 和 chrome depth。 我要对比一下，对于同样 这个任务来说，他们消耗了 token 有什么区别。我们先看这个 crome devito 吧。他说，哦，我来使用 crime devito 来完成这个工具。首先让我来检查一下相关技能，要看一下这个 m c p 里面到底有哪些工具可以使用吧。 然后他要去打开我指定的那个登录页面，中间会有一些出错，他会自己重试尝试其他方法。他调用 这个 m c p 里面的这个工具 new page 进行一个导航，哎，页面已经成功打开， 他会进行一个快招来查看里面的元素。这个快招实际上就是把一条没有元旦码下下来解读一下。他要进行快招，然后他发现了里面有一个用户名的数框，他要去调用 feel 这个工具， 填上对应的内容。然后呢，还是调用 feel 去填写密码，最后要截屏了，调用了 take screenshot 的这个工具，所以中间就是大模型不断的在调用各种工具， 他事先需要知道每个工具是什么功能这一说，我让他告诉我整套流程消耗了多少 token。 他说这个是 answer peak 记忆背后的统计的，他无法告诉我。但是呢，我们可以通过一个命令，就通过这个 context 来粗略看一下 token 消耗。 我使用的是这个模型，这边是对 token 信号进行了一个多维度统计，包括我们的 system prompt 和普通的 message 工具，小号 mcp， 小号 custom agent， memory file skill， 总共消耗了三十七 k。 这里面我重点关注一下这两个工具，十二加八二十多 k。 然后来看一下 antit browser， 它的过程呢？跟 commetop too 不太一样， 他先说让我使用 eat browser 来完成这个任务，先导航到 boycarn 的登录页面，然后找到对应的竖框， 那么这个地方我发现他对每一个数框有这样一个所谓的 rife 引用定位，什么意思呢？如果我们直接使用 it browser 这个工具，通过 open 进行导航， 导航进来之后，我们直接调用 timeshop 对网页进行一个快招，那么这个是他快招的结果。我们发现他实际上对网页内容进行了一个概括，总结 非常简明扼要。比如说用户名输入框就是 ref， 等于一五，密码输入框就是 ref， 等于一七。而传统的方式，比如说 pay right karm， dot to， 他们得通过 x， pas， 通过属性，通过 c， s， s 来定位的某一个特定的元素。 那现在呢？ agent brother 给每一个元素附了一个非常简短的名称，那将来 agent brother 就是把这样一个文本 告诉大模型，然后大模型一看，用户的命令是需要我在密码框里输入热三四五六，那么大模型就把这个一七和热三四五六 传给 agent brother， 让他去执行。所以这样的话，我发现 agent brother 和大模型之间， 他们互相传递的数据量就特别少。传统方式是需要把整个盗墓结构传给打磨型 大模型，自己理解盗墓结构，自己去提取出元素选择器，再把元素选择器返回给 mcp， 他可消耗自然会更多。我们继续看 cloud 这边说找到了输入框，然后填写用户名和密码，你看他的调这个 feel 时，直接传的是 e 五和 e 七，就就这里面的这个 e 五 和这个一期吗，参数更加简短，最后完成截屏，他说把截屏文件保存到了这个位置。那么实际上整个过程呢？ cloud 他会自动的打开浏览器，自动的去完成任务的输入，这个就他 完全自动完成的。最后还是通过 context 来看一下头滚消耗，我们发现这次呢，总共是消耗了数 k， 而刚才是三十七 k， 真真少了二十二 k， 刚才的话 com def two 这两个工具就消耗了二十多 k， 而现在 agent browser 他没有做 m c p 这个 to 只有两 k， 所以这样下来就剩了二十 k。 但是他这边的话主要是在 messages 多一些，这边是八点八 k， 那刚才 commeto 呢？ 它的 message 是四点六 k 少一些，所以我们可以认为 anti browser 它主要是通过 message 跟大模型进行交互，而 chrome 带不透呢，大模型跟工具交互，传递的数据会更 多一些。那么给我们的思考是 commandaf to pay right 这种工具它本身并没有错，只是说在 ai 时代，我们要以大模型为核心，需要对之前阅读工具重新进行一个封装，核心功能不用编，只是对外接口需要改造一下。 之前是面向程序员，现在面向大冒险，那 agent brother 也是做了这样一种封装。

从百度搜索到百度地图，从百度网盘到百度招聘，百度的反扒体系一脉相承。但招聘这个业务有个特殊点，他的 derek 会动态检测指纹环境，买点比你想的多，通用解法经常水土不服。这期视频我专门针对百度招聘的特点，拆解几种真正能落地的 derek 方案， 大家评价一下哪个才是最优解？很多人问我，为什么你们搞追星像的总是能让网页说脏话？其实不是网页老是，是他藏不住，尤其是那种一开调试器就疯狂暂停， 都把你赶出 devtools 的 页面。新手看的这种场面，第一反应通常是完了没法看了，但老手不会先慌。老手先做的第一件事情就是判断这个场景到底该上叉，装上互客，还是直接让插件来接受。这条视频我不跟你堆术语，我就教你一件事，以后你再遇到一把风暴，第一刀该从哪里下。 在视频开始之前，主播为了让零基础的小伙伴更好的学习编程，给大家准备了从零到 js 进阶的实战案例，包含从新手到大神的学习路线， 都放在主页粉丝群，大家可以自行领取。我们以这一个网站为例，首先我们在这个地方搜索一下拍摄相关的岗位， 然后我们直接 f 十二快捷键，打开 d o choose 这个界面，结果您猜怎么着？钢琴的页面，它直接跳转到空白界面，并且上面显示的是 about blank。 所以 说我们要看一下这个代码它是在哪个地方生成的。当然新手选的 一种方式就是像这个世界监听断电，我们在这里打上一个这个脚本断电，然后我们再回来刚才这个页面。好，你看到啊，它在执行这个 j s 文件的时候就直接断在这里了，那么我们就可以去搜看一下这个好不好的 blank， 它 是在哪个地方生成的，那么当前的这个截图文件呢？就没有，那么我们再看下一个截图文件也没有，那继续往下面去找。哎，您猜怎么着？这里的话呢？有一个匹配项，那我们现在可以搜一下，也就是这个代码的位置，现在我们如果说 要判定是不是这个代码修改了我们当前的这个页面，我们直接新建一个页面，然后呢我们可以在控制台上面执行一下这个代码，可以看一下他的这个功能是什么，叫做这个奥巴特巴兰特。 好，然后我们执行一下。哎，您猜怎么着？他就跳转到了一个空白的界面，所以说就是这个代码更改了我们这个页面跳转的逻辑，所以我们来看一下怎么直接删掉他。 很重要的问题是这个文件是服务器返回过来的，我们要改的话只能本地文件替换来选择一下这个文件夹。好，在这里我们可以新建一个这个文件夹，比如说叫做，嗯，就这个名字吧，然后我们选择它允许现在我们再去修改这个代码就可以了。更改了， 然后你会发现这上面有个新号，代表他还没有保存，所以你要 ctrl 加 s 保存一下，现在的话就可以了。好，然后呢我们再看一下啊，当前的这个页面，他是有这个枫叶处理的， 就有这个枫叶的按钮，我们现在点击，他是点击不不了的，因为我们现在是在断住的状态，那么我要让他在没有断掉的话，我们就可以把它取消了，然后我们再释放， 当你会发现跳转到这个空白的页面，因为我的这个浏览器不知道怎么回事啊，他没有反应过来，没关系，那么我们现在再来打开一下这个页面， 然后我们再回来， ok， 你 看现在就可以正常的正常的去 抓包了啊，然后我们再点击一下这个封面的界面，你看啊，这也就抓取到了这个数据包。当然除了这种方式啊，不像很多同学还有更好的方式，比如说呢，我们在遇到这种情况的时候呢，你可以在这一个，你可以在这个控控制台里面啊，比如说我们现在来搜索一下它， 然后我们打开这个开发者工具，你在这个控制台上面，你直接这么去写 window 点， ok， 就是 你直接把它注空， 其实这样的话也是可以的，你看啊，你看 你还是可以正常的去抓取到这个书包，对吧？这就是一个户口代码的注入，当然你会发现它就有个字体，它一直在跳，嗯，这个的话应该是跟我的这个在弹 alt 是 相关的啊，所以说你如果想让这一个字它不再跳的话呢？你可以把这一个，把这一个方法把它注册， 比如说叫做三十，加上一个这个小括号。好，你看现在他就不会跳了啊，这就是跟这个 c time out 是 相关的。好，那这是第二种互可互可代码的注入，那还有第三种方式可以去解决这个反调式的问题了，也就是我们可以啊打开这个， 打开这个上面有一些这个扩展的一些程序，可以复制一下它，我们看一下我的这个扩展程序。 ok， 我 们全部打开，然后你在这里再输一下这个网页， 再搜一下。好，现在呢你把这几个按钮全部打开，这是一种插件的方式啊，大家如果说需要这些工具啊，或者说呢，想要这一个户口代码注入的脚本，想要学习代码 这个户口注入的这些代码的话呢，都可以都可以留言，都可以留言。好，我们再回来， 现在的话呢其实就是正常了，你也可以正常的去抓包了，一样的， 这就是你看因为它这里的话已经是打开这个插件的这个按钮了，所以说你是可以使用它上面的功能的。 好，那我们今天的这个视频呢，就分享到这里，你觉得哪一种方式更好呢？当然呢我建议啊，如果你是这个小白，零基础的小白的话，你还是要学会什么是这个户口代码的注入，以及呢什么怎么去定位，找到这个代码，他的生存位置就就是你需要全职的来看。 然后如果说你有了一定基础之后呢，你去学什么这个插件啊，可以提升你的这个工作的效率。