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

Question

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

我试图从我的浏览器访问AngularJS应用程序的变量，这样我就可以快速浏览文件。例如，我可以要求状态，及其相关的部分，控制器等；一旦我找到结果，我会在编辑器中打开该文件。

我正在探索的其他选择是使用某种无头浏览器。另外还有一个开发工具协议，它被木偶师等工具用来编程访问Chrome开发工具。

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

Answer 1

除非你想使用或编写一个JavaScript解析器，这只对非常有限的个人有乐趣，否则我建议利用繁荣的无头Chrome社区。在一些样板节点代码之后，用木偶工具抓取JS变量是很简单的。它也快得惊人（但不是“炽热”）。

在运行代码之前：

• 让节点js和npm在你的机器上工作
• 在shell中安装用于解析JSON的jq。它在大多数包管理器中可用，所以brew安装jq或sudo apt安装jq等应该可以工作。
• 安装Puppeteer在任何目录中这些脚本将生活与npm我木偶
  • 为了避免陷入混乱，我将跳过这里的全局节点导入主题。

  像这样的文件是所有你需要开始与木偶演员。我在关键领域添加了评论。

  #!/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能够理解如何使用节点运行它。

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

  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 date示例使用25mbps公共wifi，从Linux（测试版）容器中下载一本三年历史的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官方教程
  • 木偶page.evaluate文档
  • 在浏览器中尝试Puppeteer
  • yargs-npm（用于节点脚本中更高级的命令行参数）