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

Question

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

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

我正在探索的其他替代方法是使用某种 headless browser. There is also devtools-protocol which is used by tools like puppeteer 以编程方式访问 Chrome 开发人员工具。

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

大家有什么好的建议吗？

Answer 1

除非你想使用或写一个JavaScript parser，它只对非常有限的一组人有趣，我建议采取利用蓬勃发展的无头 Chrome 社区。获取 JS 变量 puppeteer 在一些样板节点代码之后很简单。它的速度也快得惊人（但不是“惊人地”）。

在运行宁代码之前：

让 node js 和 npm 在你的机器上运行
Install jq 用于在 shell 中解析 JSON。它在大多数包管理器中都可用，因此 brew install jq 或 sudo apt install jq 等应该可以工作。
将 Puppeteer 安装在这些脚本将与 npm i puppeteer 一起存在的目录中
- 为避免卷入杂草，我将在此处跳过 global node imports 主题。

像这样的文件就是开始使用 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://whosebug.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()
})()

注意顶部的 shebang，这使得 shell 可以理解为运行 node。

如果我们使这个文件可执行并且运行它：

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 日期示例在 three-year-old Chrome 书中大约需要 1.5 秒 来自 Linux (Beta) container 使用 25mbps public wifi。您的里程将根据性能而有所不同您正在调试的站点和脚本中的步骤。

$ 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

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

Access browser console from a terminal?

browser

development-environment

资源