浏览器控制台注入JavaScript脚本：安卓Chrome调试技巧

在移动端网页开发和排查线上问题时，桌面端熟练使用的 F12 开发者工具无法直接在安卓版 Chrome 中通过快捷键调出。想要在安卓手机上实时查看控制台输出、动态执行 JavaScript 逻辑或提取页面元素，核心途径主要分为三类：通过电脑端 Chrome DevTools 进行 USB 远程调试、利用书签或地址栏（Bookmarklet）执行即时脚本，以及向页面动态注入移动端轻量级调试面板。掌握这几项技巧，能够帮助开发者在无缝访问移动端环境特性的同时，快速获得脚本执行与问题诊断的能力。

图1：安卓 Chrome 脚本注入与调试三大核心方案选型对比

方法一：电脑端 Chrome DevTools 远程调试（完整控制台）

这是功能最完整、能力最强大的官方调试方案。通过将安卓手机连接到电脑，桌面版 Chrome 的开发者工具可以直接绑定到手机上的 Chrome 页面。在电脑端打开 Console 面板，开发者便拥有了与桌面开发完全一致的脚本注入能力。

图2：通过 PC 端 Chrome DevTools 连接安卓设备的完整调试流程

具体配置步骤

1. 在安卓设备上启用开发者选项与 USB 调试：进入“设置” > “关于手机”，连续点击“版本号”7次开启“开发者选项”。然后进入“系统” > “开发者选项”，开启“USB 调试”。
2. 连接设备并授权：使用数据线将手机与电脑连接。手机屏幕弹出“允许 USB 调试吗？”，勾选“始终允许来自此计算机的调试”并点击“允许”。
3. 在电脑 Chrome 中检测设备：在电脑端 Chrome 地址栏输入 chrome://inspect/#devices，勾选“Discover USB devices”。列表将显示连接的安卓设备型号以及手机 Chrome 中打开的所有网页。
4. 打开调试窗口：找到想要调试的目标网页，点击其下方的“inspect”链接，电脑端将弹出完整的 DevTools 调试面板。

在 Console 面板注入脚本示例

在打开的 DevTools 中切换至 Console 面板，即可直接输入 JavaScript 语句。例如，抓取当前页面所有图片的链接并在控制台输出：

// 抓取页面内图片地址并提取
const images = Array.from(document.querySelectorAll('img')).map(img => ({
  src: img.src,
  alt: img.alt || '未设置alt',
  width: img.naturalWidth,
  height: img.naturalHeight
}));
console.table(images);

方法二：使用书签脚本（Bookmarklet）纯手机端注入

在脱离电脑的环境下，如果需要在手机 Chrome 中快速注入一段固定的辅助脚本，书签脚本（Bookmarklet）是最简单高效的原生技巧。

实现原理与特殊触发规则

书签脚本采用 javascript: 协议头。为了防止 XSS 攻击，现代移动版 Chrome 在直接向地址栏粘贴 javascript: 开头的代码时，会自动将协议前缀剥离。如果在地址栏手动补全 javascript:，虽然可以直接运行，但长代码输入非常繁琐。因此，将脚本预先存为浏览器书签，并在地址栏输入书签名称进行搜索与执行，是最稳妥的调用方式。

图3：安卓 Chrome 通过书签名检索并执行 Bookmarklet 的调用链

创建与执行范例

例如，我们需要一个能够检测当前页面 Cookie、视口尺寸以及 LocalStorage 数量的快速诊断脚本：

javascript:(function(){
  const info = [
    '【视口尺寸】: ' + window.innerWidth + ' x ' + window.innerHeight,
    '【设备像素比】: ' + window.devicePixelRatio,
    '【Cookie 长度】: ' + (document.cookie ? document.cookie.length : 0),
    '【LocalStorage 项数】: ' + localStorage.length,
    '【当前 URL】: ' + location.href
  ].join('\n');
  alert(info);
})();

设置与运行方法：

1. 在安卓 Chrome 中随意打开一个页面，点击右上角菜单将其保存为书签。
2. 打开书签管理器，找到刚保存的书签，点击“修改”。
3. 将书签名称改为容易记忆的汉字，例如 页面诊断。
4. 将“网址 (URL)”替换为上述 javascript:... 代码并保存。
5. 打开任意待检测网页，点击地址栏，输入“页面诊断”，在下拉联想列表中轻触带有星号或书签图标的“页面诊断”，代码便会立刻在当前页执行并弹出诊断弹窗。

方法三：动态注入移动端轻量控制台（Eruda / vConsole）

如果既不想连接电脑，又需要一个能像电脑 DevTools 一样随时输入多行 JS 代码、查看 console.log、审查 DOM 树、查看 Network 请求的交互界面，动态注入移动端开源调试面板是最佳解决方案。常见的工具包括 Eruda 和 vConsole。

图4：通过外部 CDN 动态加载 Eruda 形成交互式移动端控制台

一键注入 Eruda 的脚本代码

将以下代码保存为一个名为 开启Eruda 的书签：

javascript:(function() {
  if (window.eruda) {
    window.eruda.show();
    return;
  }
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/eruda';
  script.onload = function() {
    window.eruda.init();
    window.eruda.show();
  };
  document.body.appendChild(script);
})();

注入完成后，页面右下角会立即出现一个灰色的齿轮小图标。点击该图标，即可展开功能完备的移动端控制台面板。在其中的 Console 选项卡中，不仅能实时看到页面已打印的日志，还能在底部输入框中编写、注入并执行任何 JavaScript 语句。

核心调试与注入场景实战示例

1. 动态监控网络请求并拦截响应

在排查移动端接口异常时，可以通过重写 window.fetch 捕获所有的异步请求参数与响应内容：

// 注入 Fetch 拦截器，监控接口通信
(function() {
  const originalFetch = window.fetch;
  window.fetch = async function(...args) {
    const url = args[0];
    console.log('[API 请求开始]:', url);
    try {
      const response = await originalFetch.apply(this, args);
      const clone = response.clone();
      clone.text().then(text => {
        console.log('[API 响应成功]:', url, text.substring(0, 200) + '...');
      });
      return response;
    } catch (err) {
      console.error('[API 响应失败]:', url, err);
      throw err;
    }
  };
  console.log('Fetch 拦截器已注入成功');
})();

2. 修复或排查移动端触控事件冲突

移动端网页偶发点击无响应或滑动穿透，可以在控制台直接注册全局触摸监听器，快速判断事件冒泡阶段是否被意外拦截：

// 检查全局点击与触摸触发情况
['touchstart', 'touchend', 'click'].forEach(eventType => {
  window.addEventListener(eventType, (e) => {
    console.log(`事件: ${eventType} | 目标标签: ${e.target.tagName} | 类名: ${e.target.className}`);
  }, true); // 使用捕获阶段
});

常见问题与注意事项