从终端访问浏览器控制台？ [英] Access browser console from a terminal?
问题描述
是否可以从Linux终端访问开发人员工具(Chrome/Firefox)控制台以进行脚本编写？
我正在尝试从我的浏览器访问AngularJS应用程序的变量，这样我就可以在文件之间快速导航。例如，我可以请求state及其相关的partial、controller等；一旦找到结果，我就会在我的编辑器中打开该文件。
我正在探索的其他替代方案是使用某种headless browser。还有devtools-protocol，puppeteer等工具使用它以编程方式访问Chrome开发人员工具。
一个简单的Node REPL已经足够了，但问题是，如果我将站点的JavaScript文件加载到REPL中，我将不得不手动计算许多东西。
有没有人有什么好建议？
推荐答案
除非您想要使用或编写JavaScript parser，这只对非常有限的一组个人来说是有趣的，我建议使用 蓬勃发展的无头Chrome社区的优势。使用抓取JS变量 puppeteer在一些样板节点代码之后是直接的。 它的速度也令人震惊(但不是惊人的)。
运行代码前：
- 在您的计算机上运行节点js和npm
- Install
jq用于解析外壳中的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，这使外壳理解使用node来运行它。
如果我们将此文件设置为可执行文件并运行它：
chmod +x get-so-data.js
./get-so-data.js
我们有一个CLI实用程序，它将从网站的JavaScript全局执行上下文中提供JSON数据字符串。以下是一些小型通用外壳示例。
#!/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 使用25 Mbps的公共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
资源
jqofficial tutorial- Puppeteer page.evaluate docs
- Try Puppeteer in a browser
- yargs - npm(有关节点脚本中更高级的命令行参数)
这篇关于从终端访问浏览器控制台？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
