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

Question

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

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

我正在探索的其他替代方案是使用某种 headless browser .还有devtools-protocol由 puppeteer 等工具使用用于以编程方式访问 Chrome 开发人员工具。

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

有人有什么好的建议吗？

Answer 1

除非你想使用或写一个 JavaScript parser ，这只是对非常有限的一组人来说很有趣，我建议采取
蓬勃发展的 headless 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://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()
})()

请注意 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 日期示例大约需要 1.5 秒 在三年前的 Chromebook 上
来自 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

资源

jq official tutorial

Puppeteer page.evaluate docs

Try Puppeteer in a browser

yargs - npm (用于节点脚本中更高级的命令行参数)