Question

是否可以出于脚本目的从Linux终端访问开发人员工具（Chrome / Firefox）控制台？

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

我正在探索的其他替代方法是使用某种headless browser。 devtools-protocol等puppeteer之类的工具还可以使用来以编程方式访问Chrome开发者工具。

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

有人建议吗？

Answer 1

除非您想使用或编写JavaScript parser（这仅对非常有限的一组人很有趣），否则我建议您蓬勃发展的无头Chrome社区的优势。用抓取JS变量使用一些样板节点代码后，puppeteer很简单。它的速度也令人震惊（但不是“非常”）。

运行代码之前：

让节点js和npm在您的计算机上工作
Install jq用于在外壳中解析JSON。大多数软件包管理器都提供此功能，因此brew install jq或sudo apt install jq等应该可以使用。
在这些脚本要与npm i puppeteer一起驻留的目录中安装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在编辑器中打开文件。

使用三年前的Chromebook的日期约需1.5秒 从Linux (Beta) container 使用25mbps的公共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（用于节点脚本中的更高级的命令行参数）

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

1 个答案:

资源