从终端访问浏览器控制台？

Question

是否可以从 Linux 终端访问开发人员工具 (Chrome/Firefox) 控制台以进行脚本编写？

我正在尝试从浏览器访问 AngularJS 应用程序的变量，以便可以快速浏览文件。例如，我可以要求state、 及其相关的partial，controller等等；一旦找到结果，我就会在编辑器中打开该文件。

我正在探索的其他替代方案是使用某种无头浏览器。还有devtools-protocol，它被puppeteer等工具用来以编程方式访问 Chrome 开发者工具。

一个简单的 Node REPL 就足够了，但问题是，如果我将网站的 JavaScript 文件加载到 REPL 中，我将不得不手动计算很多东西。

有人有一些好的建议吗？

Answer 1

除非您想使用或编写JavaScript 解析器（这只对极少数人来说很有趣），否则我建议您利用蓬勃发展的无头 Chrome 社区。在一些样板节点代码之后，使用puppeteer获取 JS 变量 非常简单。它的速度也快得惊人（但不是“惊人”）。

运行代码之前：

• 让 Node js 和 npm 在你的机器上运行
• 安装jq用于在 shell 中解析 JSON。它在大多数包管理器中都可用，所以brew install jq或sudo apt install jq等应该可以工作。
• 将 Puppeteer 安装在这些脚本所在的目录中npm i puppeteer
  • 为了避免陷入困境，我将在这里跳过全局节点导入主题。

像这样的文件就是您开始使用 Puppeteer 所需的全部内容。我在关键区域添加了评论。

#!/usr/bin/env node

const puppeteer = require('puppeteer')

;(async () => {
  const browser = await puppeteer.launch()
  // Replace the line above with this statement a fun show
  // const browser = await puppeteer.launch({
  //   headless: false,
  //   devtools: true,
  // })
  const page = await browser.newPage()

  // Arbitrarily choosing SO for the demo, replace with your website
  await page.goto('https://stackoverflow.com/')
  // Or use an argument:
  // const uri = process.argv[2]
  // await page.goto(process.argv[0])

  const retrievedData = await page.evaluate(() => {
    // This block has the page context, which is almost identical to being in the console
    // except for some of the console's supplementary APIs.

    // Get the URL host name and path separately
    const { origin, pathname } = window.location;

    // Get the title in a silly way, for demonstration purposes only
    const title = document.querySelector('title').textContent

    // More interesting - save data from the `StackExchange` object from `window`
    const { options: soOptions } = window.StackExchange

    // Return an object literal with data for the shell script 
    return {
      origin,
      pathname,
      soOptions,
    }
  })

  // Convert the object from the browser eval to JSON to parse with with jq later
  const retrievedJSON = JSON.stringify(retrievedData, null, 4)

  // console.log writes to stdout in node
  console.log(retrievedJSON)

  await browser.close()
})()

请注意顶部的shebangnode ，它使 shell 理解使用 来运行它。

如果我们使该文件可执行并运行它：

chmod +x get-so-data.js
./get-so-data.js

我们有一个 CLI 实用程序，它将提供来自网站的 JavaScript 全局执行上下文的 JSON 数据字符串。以下是一些小型通用 shell 示例。

#!/bin/sh

# Confirm that jq understands the result (should pretty print with ANSI colors):
./get-so-data.js | jq
# {
#   Many data...
# }

# Check if user is logged in (the user is our node script in a sandboxed browser, so no):
./get-so-data.js | jq '.soOptions.user.isRegistered' 
# null

# Tell the time, according to StackExchange's server clock (linux only):
./get-so-data.js | jq '.soOptions.serverTime' | date -d $(echo -n '@' && cat --)
# Fri 11 Sep 2020 04:37:02 PM PDT

# Open a subset of the JSON payload returned by Puppeteer in the default editor:
./get-so-data.js | jq '.soOptions' | $EDITOR --
# or VS Code specifically
./get-so-data.js | jq '.soOptions' | code --

# ...

只要等式的 JavaScript 端返回足够的信息来构造文件路径，您就可以在浏览器中基于 JavaScript 在编辑器中打开文件。

shell 日期示例在Linux（Beta）容器内使用 25mbps 公共 wifi 的三年前的 Chromebook 上大约需要 1.5 秒 。您的里程将根据您正在调试的站点的性能和脚本中的步骤而有所不同。

$ time ./get-so-data.js | jq '.soOptions.serverTime' | date -d $(echo -ne '@' && cat --)
Fri 11 Sep 2020 04:43:24 PM PDT

real    0m1.515s
user    0m0.945s
sys     0m0.383s

$ time ./get-so-data.js | jq '.soOptions.serverTime' | date -d $(echo -ne '@' && cat --)
Fri 11 Sep 2020 04:43:30 PM PDT

real    0m1.755s
user    0m0.999s
sys     0m0.433s

$ time ./get-so-data.js | jq '.soOptions.serverTime' | date -d $(echo -ne '@' && cat --)
Fri 11 Sep 2020 04:43:33 PM PDT

real    0m1.422s
user    0m0.802s
sys     0m0.361s

资源

• jq官方教程
• Puppeteer page.evaluate 文档
• 在浏览器中尝试 Puppeteer
• yargs - npm（用于节点脚本中更高级的命令行参数）