Dev Browser

你可以

• 在 搜索或输入 URL 中输入地址或搜索内容，然后按键盘上的「前往」键；X（取消）会停止编辑。
• 用 重新加载 重新加载页面；页面加载过程中，同一个按钮会变成 停止。
• 用 </> 按钮（开发者工具）打开或关闭 DevTools 面板。红色角标统计控制台中的错误数，最多显示到 99+。
• 打开 浏览器菜单（⋮）。

你不能做什么，以及原因

• 加载 file://、content://、data:、javascript:、intent:、mailto: 或 tel: 地址：在地址栏中输入这些地址，它们会变成一次 Google 搜索。有意为之
• 选择其他搜索引擎：不是地址的文字始终在 Google 上搜索。有意为之
• 打开本地网络中的纯 http:// 地址（例如 http://192.168.1.20）：应用的网络策略只允许对 localhost、127.0.0.1 和 10.0.2.2 使用未加密的 HTTP。请使用 HTTPS 或隧道。需要网络

你可以

• 在 页内查找 中输入文字：边输入边搜索，在页面中标出匹配项，并显示一共有多少个。
• 用 下一个 和 上一个 跳到下一个或上一个匹配项；键盘上的搜索键同样会跳到下一个。
• 用 关闭 关闭它；这会清除搜索。

你不能做什么，以及原因

—

你可以

• 像平时一样使用页面：滚动、点击、输入和双指缩放。
• 通过系统文件选择器，为文件上传字段选择文件。
• 看到页面自己的 alert 和 confirm 对话框。
• 在可复制的红色提示中读取加载错误：WebView 自己的消息；当页面本身以 400 或更高的状态码响应时，显示 HTTP <状态码> <原因>；或者 WebView render process crashed. Reload the page.。页面的渲染进程崩溃不会关闭 PocketCode。

你不能做什么，以及原因

• 跟随使用其他协议的链接（tel:、mailto:、intent:、file: 等）：它们会被忽略，没有任何提示。有意为之
• 在 HTTPS 页面中加载 HTTP 内容（混合内容）。有意为之
• 越过无效的 TLS 证书、使用 HTTP 基本认证登录或出示客户端证书：请求会被取消。只信任系统的证书颁发机构。有意为之
• 让页面使用摄像头、麦克风或你的位置：它们始终被拒绝，控制台 会显示一条警告（Warning）。有意为之
• 在应用内下载文件：下载链接会在系统浏览器中打开。有意为之
• 打开弹出窗口。有意为之

你可以

• 用四个标签按级别筛选（错误、警告、信息、调试）。每个标签显示其数量；再点一次即可取消筛选。普通的 console.log 没有对应标签：未开启筛选时才能看到它们。右侧的数字是列出的消息数量。
• 用垃圾桶图标（清除）清空控制台。
• 在页面的主框架中运行 JavaScript：在 执行 JavaScript… 中输入，然后点击 运行。命令及其结果（截断至 2,000 个字符）会作为普通消息添加，因此筛选对它们同样有效。
• 用 上一条命令 调出之前的命令：它会循环浏览这些命令，并且不会连续两次重复同一条命令。
• 长按消息文字即可复制。
• 只有当你本来就在列表末尾时，新消息才会自动滚动到可见位置。

你不能做什么，以及原因

• 查看最近 1,000 条以上的消息：更早的会被丢弃。页面跳转不会清空控制台，但用不同的地址打开 Dev Browser 会清空。有意为之

你可以

• 用标签 All、Doc、CSS、JS、XHR（包含 fetch）和 Img 按类型筛选。这些词始终是英文。
• 点击某个请求，在列表下方打开其详情，共有三个标签页：概览（url、method、status、size、time、duration 和 error）、请求头（WebView 提供的请求头）和 响应头。
• 用垃圾桶图标（清除）清空列表。

你不能做什么，以及原因

• 查看请求体或响应体、响应头或 MIME 类型：响应头 标签页始终显示 无，因为目前还没有任何内容填充这些字段。尚未提供
• 把请求拆分为 DNS、TLS 和等待阶段：每个请求只有一条条形，因为 WebView 不提供这些耗时。设备
• 在页面之间保留列表：主页面每次跳转都会清空它（只保留新文档），并且最多保存 1,000 个请求。有意为之
• 指望每个成功的请求都有状态：状态来自页面的 Resource Timing 数据，WebView 没有报告时该列显示短横线。错误状态（400 及以上）始终会显示。设备

你可以

• 点击某一行，在列表下方的详情中打开其完整的键和值。
• 点击 复制 复制该值（已复制到剪贴板 会确认）。
• 点击 删除 只移除这一个键。
• 用分区标题旁边的红色清除图标（清除）清空整个分区。
• 页面没有任何内容时，面板显示 没有存储数据，并建议试试 google.com 这样的网站。

你不能做什么，以及原因

• 查看 HttpOnly Cookie 或 Cookie 的属性（域、过期时间、Secure、SameSite）：面板读取的是 document.cookie，它对页面脚本隐藏了这些内容。有意为之
• 删除为其他路径或域设置的 Cookie：删除 Cookie 的做法是用 path=/ 让它过期。有意为之

你可以

• 点击选取图标（在页面中选择元素），然后点击页面上的任意位置。标题会显示 点击页面中的元素；你的下一次点击会选取该元素而不会触发它（不会跟随链接，也不会提交表单），树会展开到该元素，在页面上高亮它，并在列表下方打开它的详情。如果该元素比快照更深，则选取快照中最深的那个祖先元素。
• 用 刷新 DOM 重新读取快照。
• 用节点的 (i) 图标（条目详情）打开节点的详情：它的 <tag>、它的 CSS 选择器，以及它的 id、class、属性和 text。
• 点击 复制选择器 复制形如 html > :nth-child(2) > :nth-child(1) 的位置选择器；它使用位置，而不是 id 或 class。
• 点击 在页面中高亮 用橙色框出该元素，并把它滚动到中央。轮廓会一直保留，直到你高亮另一个节点或重新加载页面。
• 未加载任何内容时，面板显示 没有 DOM 树 和 加载页面后点击刷新。

你不能做什么，以及原因

• 查看完整的 DOM：快照最多到深度 10，每个节点 100 个子节点（… +N more 节点代表其余部分），每个元素 20 个属性，500 个字符的文字，每个属性值 200 个字符。它只包含元素（不含注释），也不会查看 iframe 或 Shadow DOM 内部。有意为之

你可以

• 在编辑器（编辑器）中编写 CSS，然后点击 应用 CSS：它会在页面中创建或更新一个 id 为 pocket-css-inject 的 <style> 元素。
• 用 清除 移除你应用的内容（只有在已应用内容时才可用）。
• 你最后应用的 CSS 会在每次加载、重新加载和跳转后再次应用，即使跳到另一个网站也一样，直到你点击 清除。用不同的地址打开 Dev Browser 时它会丢失。
• 切换到 规则 (n) 阅读页面的规则：选择器、属性数量、前三个属性以及来源（样式表的地址或 inline）。点击一条规则可把它的声明复制到编辑器中；此时应用它们会覆盖原规则，而不是原地修改。
• 没有可列出的内容时，面板显示 未检测到 CSS 规则。

你不能做什么，以及原因

• 查看超过 200 条规则、@media、@supports 或 @keyframes 内的规则，或浏览器不允许页面读取的样式表：只列出顶层规则，读取不到的样式表会被悄悄跳过，没有任何提示。有意为之

你可以

• 阅读 核心 WEB 指标 下的卡片：首次绘制（FP）、首次内容绘制（FCP）、DOM 内容已加载（DCL）和 页面加载 始终显示；最大内容绘制 (LCP)、累积布局偏移 (CLS) 和 总阻塞时间（TBT）在其值大于零时显示。每张卡片按固定阈值着色为良好、需改进或较差（例如 LCP 为 2,500 和 4,000 ms，CLS 为 0.1 和 0.25，TBT 为 200 和 600 ms）。
• 阅读 页面统计：DOM 节点、资源，以及 WebView 提供时的 JS 堆内存 和 传输量。
• 阅读 资源瀑布流 (n)：最多 50 个资源，包含它们的类型、名称的最后 30 个字符和耗时。
• 点击 录制：它每隔 1.5 秒重新读取一次指标，直到你点击 停止。它不会录制 trace，只是实时刷新。

你不能做什么，以及原因

• 在 WebView 没有报告时看到 LCP、CLS 和 TBT 卡片：只有当它们的值大于零时才会出现。JS 堆内存和传输大小同样取决于 WebView 提供什么。设备

你可以

• 点击 运行审计（运行时显示 审计中…）。审计只会在你点击该按钮时运行。第一次运行之前，面板显示 运行审计以分析页面质量 和 检查性能、无障碍、最佳实践、SEO 和 PWA。
• 阅读五个 0 到 100 的仪表（Perf、A11y、BP、SEO 和 PWA；90 起为绿色，50 起为橙色）、被审计的地址，以及审计耗时（毫秒）。
• 阅读摘要（N passed、N warnings、N failed），并用标签 全部 (n)、passed、warnings 和 failed 筛选。得分达到 0.9 或以上的检查通过，从 0.5 到不足 0.9 为警告，低于 0.5 则失败。
• 折叠各个类别，并打开某项检查阅读它的详情（最多 8 行）。
• 再次点击该按钮（现在位于顶部栏中）即可重新测量。

你不能做什么，以及原因

• 获得可与 Lighthouse 或 PageSpeed Insights 相比的分数：这些是 PocketCode 自己的估算，而且某些检查只查看页面的一个样本（DOM 深度读取前 150 个元素，字号 100 个，点击目标 50 个）。有意为之
• 检查 service worker：该项检查只检测是否有 service worker 在控制页面。有意为之

你可以

• 在 历史记录 和 书签 标签页之间切换。
• 点击一个条目即可打开它的地址（遵循与地址栏相同的规则）并关闭对话框。
• 用垃圾桶图标（删除）删除一个书签。
• 用红色清扫图标（清除）删除全部历史记录，它只在历史记录标签页且有条目时显示。不会要求确认。
• 列表为空时，会显示 暂无历史记录。先浏览一些网页吧。 或 暂无书签。可通过菜单添加。

你不能做什么，以及原因

• 保留超过 100 条历史记录或 200 个书签。有意为之

你可以

• 编辑 标题（预填页面的标题或地址）和 URL（预填当前地址）。
• 点击 保存（任一字段为空时保持禁用）或 取消。即使该地址已经保存过，也会出现 书签已添加；它不会被重复保存。

你不能做什么，以及原因

—

你可以

• 点击 确认 或 取消。
• 确认后，它会清除 WebView 的 HTTP 缓存；当前打开页面所属站点的 localStorage、sessionStorage、JavaScript 可见的 Cookie 和 IndexedDB 数据库；以及应用 WebView 的全部 Cookie，而不只是此站点的。随后 存储 面板刷新，并出现 站点数据已清除。
• 它会保留你的浏览历史：页面的前进后退历史和 历史记录 列表都不会被清除。

你不能做什么，以及原因

• 只清除某一个站点的数据：Cookie 清除覆盖应用 WebView 所知的每个站点。有意为之