如何通过JavaScript调用Firefox开发者工具的“Use as Fetch in Console”右键菜单？

核心限制说明 #

Firefox开发者工具的UI交互（包括右键菜单的"Use as Fetch in Console"选项）属于浏览器内部私有API，无法通过网页或书签工具中的常规JavaScript直接调用。浏览器会严格隔离网页上下文与开发者工具上下文，防止外部代码干扰调试工具的正常运行。

替代解决方案：手动提取Fetch代码并封装为书签工具 #

既然无法直接触发该右键选项，我们可以复制它生成的Fetch代码，封装成可直接调用的书签工具：

1. 手动获取目标API的Fetch代码

   • 打开Firefox开发者工具（快捷键F12），切换到「网络监视器」标签页
   • 触发目标API请求（如刷新页面、点击对应功能按钮）
   • 在请求列表中找到目标API条目，右键选择「Use as Fetch in Console」
   • 控制台会自动生成对应请求的Fetch代码，复制这段代码

2. 封装为书签工具

   • 创建新书签，将书签的URL替换为以下格式的代码（把复制的Fetch代码替换到对应位置）：

     javascript:(function(){
       // 粘贴复制的Fetch代码
       fetch('https://目标API地址/接口路径', {
         method: 'GET',
         headers: {
           'Authorization': 'Bearer 你的认证令牌',
           // 其他请求头参数
         },
         // 其他请求配置（如body、credentials等）
       })
       .then(response => response.json())
       .then(data => console.log(data))
       .catch(error => console.error('请求错误:', error));
     })();
     

   • 保存书签，在登录目标网站后点击该书签即可直接调用API

进阶优化：动态获取认证信息 #

如果API的认证令牌会随会话过期，可以修改书签工具，从页面Cookie或本地存储中动态提取令牌：

javascript:(function(){
  // 从Cookie中提取认证令牌（需替换为目标网站的Cookie键名）
  const authToken = document.cookie.split('; ').find(row => row.startsWith('auth_token=')).split('=')[1];
  
  fetch('https://目标API地址/接口路径', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${authToken}`,
      'X-Requested-With': 'XMLHttpRequest'
    },
    credentials: 'include' // 携带当前会话Cookie
  })
  .then(res => res.json())
  .then(data => alert(JSON.stringify(data, null, 2)))
  .catch(err => alert('请求失败：' + err.message));
})();

内容的提问来源于stack exchange，提问作者Hadi Dadkhah