Browser Use 教程

Browser Use 教程

本教程面向日常 Web 使用与前端开发调试，覆盖浏览器基础操作、开发者工具、性能与安全、自动化与排查技巧，帮助你高效定位与解决问题。

1. 概览与选择

• • 常用浏览器：Chrome / Edge（Chromium 系）、Firefox、Safari（macOS）。
• • 开发推荐：Chromium 系 + DevTools，搭配扩展与远程调试能力。
• • 基本组件：地址栏、标签页、书签、下载管理、扩展、隐私/安全设置。

2. 快速上手

• • 地址栏搜索：输入关键字或直接输入 URL；使用 ?、site:、filetype: 组合精准检索。
• • 标签页与窗口：使用组与固定标签管理上下文；善用快捷键（如 Ctrl + L 定位地址栏）。
• • 隐私与安全：使用无痕模式避免缓存干扰；检查证书与站点权限（麦克风、位置、通知）。

3. 开发者工具（DevTools）

3.1 Elements（元素）

• • 查看/编辑 DOM 与 CSS，实时预览样式变更与盒模型布局。
• • 检查计算样式（Computed），定位继承、优先级与覆盖问题。

3.2 Console（控制台）

• • 查看日志、错误堆栈，执行临时脚本与表达式。
• • 输出建议：使用分级 console.debug/info/warn/error，配合结构化对象与 console.table。

3.3 Network（网络）

• • 监控请求：方法、状态码、耗时、头与载荷、响应体、缓存命中。
• • 常见排查：
  • • 跨域（CORS）：检查 Origin、Access-Control-* 头，确认预检 OPTIONS 是否通过。
  • • 缓存：看 Cache-Control、ETag、If-None-Match；必要时禁用缓存或硬刷新。
  • • 压缩与传输：确认 Content-Encoding（gzip/br）与分块传输影响。

3.4 Sources（源码）

• • 断点调试：行断点、条件断点、XHR/Fetch 断点、事件断点。
• • Source Map：确保构建配置生成 .map，便于定位到源码而非打包产物。
• • 本地覆盖（Overrides）：在浏览器侧覆盖静态资源，验证修复思路。

3.5 Application（应用）

• • 存储：LocalStorage、SessionStorage、IndexedDB、Cookies、Cache Storage。
• • 认证与状态：观察 Cookie 属性（Secure、HttpOnly、SameSite），调试登录态与 CSRF 问题。
• • PWA：Service Worker、 manifest、离线缓存策略与更新生命周期。

3.6 Performance / Lighthouse（性能与质量）

• • Performance：录制页面行为，分析主线程、帧率、长任务与内存占用。
• • Lighthouse：生成可访问性、性能、最佳实践与 SEO 报告，给出改进建议。

4. 前端调试工作流

• • 启动本地开发服务（如 http://localhost:3000/），在 DevTools 中禁用缓存并打开性能面板。
• • Elements 面板检查布局与响应式；Device Toolbar 切换设备与 DPR；调试媒体查询与容器查询。
• • Network 面板验证接口与缓存；Sources 设置断点定位逻辑问题；Console 跟踪状态与事件。
• • 应用面板清理存储与 Service Worker，确保不会被旧缓存影响测试结果。

5. 常见问题与解决

• • 白屏或异常：查看 Console 错误与 Network 失败请求；确认资源路径、构建产物与权限。
• • 跨域失败：检查服务端 CORS 头与预检；如需本地联调，使用代理或服务端调整策略。
• • 缓存导致旧资源：执行硬刷新（Windows Ctrl + F5），或 Network 面板勾选“Disable cache”。
• • Source Map 无法映射：确认构建工具开启 devtool/sourceMap；在生产谨慎暴露源码。

6. 自动化（Puppeteer / Playwright）

以下为概念与示例，实际项目请根据语言与依赖选择具体库。

6.1 Puppeteer（Node.js）

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle0' });
  const title = await page.title();
  console.log(title);
  await browser.close();
})();

• • 典型用途：截图、表单自动化、抓取数据、端到端（E2E）测试。

6.2 Playwright（多浏览器引擎）

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.click('text=More information');
  await browser.close();
})();

• • 优势：支持 Chromium/Firefox/WebKit，强大选择器与测试工具集。

7. 安全与隐私

• • Cookie 与存储安全：敏感信息不存储于可读存储；使用 HttpOnly、Secure、SameSite。
• • CSP（内容安全策略）：限制脚本/资源来源，降低 XSS 风险；审阅 Content-Security-Policy 头。
• • Mixed Content：避免在 HTTPS 下加载 HTTP 资源；检查浏览器拦截与控制台警告。
• • 权限与隔离：按需授予摄像头、麦克风、位置；不信任第三方扩展的过度权限。

8. 可访问性（a11y）

• • 语义化标签：正确使用 button、nav、main、header 等。
• • ARIA：仅在语义不足时补充；避免滥用导致阅读器混乱。
• • 键盘可用性：确保 Tab 顺序与焦点管理正确。
• • 颜色与对比：参考 WCAG 标准；使用 Lighthouse 与扩展检查。

9. 移动端与远程调试

• • Device Toolbar：模拟移动设备尺寸、DPR 与触摸事件。
• • 远程调试：在移动设备启用开发者选项，通过 USB 或网络连接到桌面 DevTools。
• • 性能采样：采集真实设备上的网络与 CPU，避免仅凭桌面评估。

10. 高效技巧

• • 快捷键：F12 打开 DevTools，Ctrl + Shift + I/Ctrl + Shift + C 检查元素。
• • 断点类型：条件断点、DOM 断点、事件监听断点、XHR 断点定位异步问题。
• • 覆盖率（Coverage）：查找未使用的代码，指导拆分与按需加载。
• • HAR 导出：导出网络请求快照，便于复现与分享问题。

11. 故障排查清单

• • 是否命中缓存？是否禁用缓存？是否强制刷新？
• • 是否跨域问题？服务端是否设置正确的 CORS 头？
• • 是否资源路径或构建问题？Source Map 是否正确？
• • 是否被 Service Worker/离线缓存影响？已清理与更新？
• • 是否权限或证书问题？错误日志与网络请求状态如何？

12. 进阶方向

• • 端到端测试：使用 Playwright Test 或 Cypress 构建稳定的 E2E 测试。
• • 性能治理：结合 RUM（真实用户监控）与 Profiling 持续优化关键路径。
• • 观测与排障：前端埋点与后端链路追踪（如 traceparent）构建统一视图。

推荐阅读

• • 别再用微信传视频了！这款“不限速”神器，重新定义文件传输
• • 在线编码工具TraeOnline

---