2

我最近知道 Firefox 有一个浏览器控制台（不同于 Web 控制台），可以将其启用设置devtools.chrome.enabled为true.

我已经搜索了有关我可以用它做什么的信息，但我只找到了

浏览器控制台可让您查看浏览器中的所有 JavaScript 错误和日志记录，包括来自 Firefox 代码的日志。要启用它，请转到 url 栏中的 about:config 并将 devtools.chrome.enabled 设置为 true。通过菜单 Web Developer > Browser Console 激活它。

( https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#Browser_Console )

我发现浏览器控制台很有用，因为我可以在沙盒化的 GreaseMonkey 脚本中看到错误。但我想它可以做很多有趣的事情，我在哪里可以找到一些信息？

4

1 回答 1

3

这个 MDN 页面说明了一切（当我问这个页面不存在的问题时，它是在 2013 年 8 月 7 日下午 5:04:27 创建的）

浏览器控制台

浏览器控制台类似于Web 控制台，但适用于整个浏览器而不是单个内容选项卡。

因此，它记录与 Web 控制台相同类型的信息——网络请求、JavaScript、CSS 和安全错误和警告，以及由 JavaScript 代码显式记录的消息。但是，它不是为单个内容选项卡记录此信息，而是为所有内容选项卡、附加组件和浏览器自己的代码记录信息。

同样，您可以使用浏览器控制台执行 JavaScript 表达式。但是，当 Web 控制台在页面窗口范围内执行代码时，浏览器控制台在浏览器的 chrome 窗口范围内执行它们。这意味着您可以使用全局选项卡与浏览器的所有选项卡进行交互gBrowser，甚至可以使用用于指定浏览器用户界面的 XUL。

要打开浏览器控制台，请从 Firefox 菜单（或工具菜单，如果您显示菜单栏或在 Mac OS X 上）的 Web 开发人员子菜单中选择“浏览器控制台”：

在此处输入图像描述

您可以看到浏览器控制台的外观和行为与Web 控制台非常相似：

浏览器控制台日志记录

浏览器控制台记录与 Web 控制台相同类型的消息：

但是，它会显示以下消息：

  • 由所有浏览器选项卡托管的 Web 内容
  • 浏览器自己的代码
  • 附加组件。

来自附加组件的消息

浏览器控制台显示所有 Firefox 附加组件记录的消息。

例如，这是一个非常简单的Add-on SDK插件，当用户单击图标时它只会记录一个错误：

// base-64 encoded icon, from http://edmerritt.com/'s "Vaga" icon set
var icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9" +
"hAAAC90lEQVR4Xk1STUgbWxQ+mbmZNGqcJGjaGBq7UUGpYCEUXMSFLgRBdKeIG6F06aKUt6irEks" +
"R3JjWGAquSjeW8p6g3UQeCPKeJvCgRYP4QxK0TaPPGJPMZMzM3J4bM9ED35x7z/nOud+9c0yKooBh" +
"h6FQV1lRZmRZ9l8riksplQjhedVssWQQm4SQwOMXL3YNviAIwBmb/WDwVT6X+1snZMz18GFLe3s7e" +
"dLdDR2dncTl9bZQjhvD/D//zc+/gTtGjGJJkv5wtrTYHLIMaioFFL2sqgA8D3VWK9gcDjhvbLRlUq" +
"mX38LhB93Pn08BGnewuNhVyOennW63zX5xAdfJJKiXl6Di1ewTExWvZrNQwriYz4PT4yH/Hx9PHm5" +
"s3DRQ8M5CQ0OzXZKgnMmAjqfqmBBHRqC+pwcco6OgUQoaxhXMO3QdiMVCsvH462Qy2UxKkuTHO4N2" +
"clIh6UimABVA1bOYztaYB1TpvH8fThMJj1vTholcLLqsHAeqJN0Wo9dwz0wtFkFjC6MRxus9Hrj68" +
"QM0TRsgiiQRARtI2J0yQpVYzuVuGqA3VFCGchnqzGaQrq5A13Uf4fE/lzSNUJ4HDZMGObu1xXArv6" +
"rOhDy5VALzvXtMQSvHC0Imz4YJA4ysVQvE3l7oCAaZZ/EaTPhLc4UC1DU1sQZJTsAJO0+ngXM6Qef" +
"5mgKusRGY8aJYK2YqCfLSiQSIbW3sClGOx/EsZLP5M10Hs8sFOsdVyL/W1yERCkF6ba1WLGD+Fz6q" +
"xObh6VOmIML5ZmZ26x2Odz+PjtRzfBzB6wXebgeTIEBubw/AYgEz7q2PHsE5HnK6vw/uvj7gRPEvV" +
"LAKOEgVbL59u/zl2bPy2vQ03Z6bo7vBID0Ih+n3hQW6NTtLMUc/jo/TjaUlGovFtqPRaD97WFZcQ2" +
"xlZSoSCJx8RvLy0BB97/fTD4OD9NPkJP0aCNB/IxGKhX/u7Oz0Mz5rYGKfuxaPx5tR2jBiAHM+9K2" +
"IJK6jiAhi1efznRn837fI5BVWw7NCAAAAAElFTkSuQmCC";

widget = require("sdk/widget").Widget({
  id: "an-error-happened",
  label: "Error!",
  contentURL: icon,
  onClick: logError
});

function logError() {
  console.error("something went wrong!");
}

如果您将其构建为 XPI 文件，然后打开浏览器控制台，然后在 Firefox 中打开 XPI 文件并安装它，您将在插件栏中看到一个图标：

在此处输入图像描述

单击图标。您将在浏览器控制台中看到如下输出：

在此处输入图像描述

仅对于基于 SDK 的附加组件，消息以附加组件的名称为前缀（“log-error”），使用“过滤器输出”可以轻松找到来自此附加组件的所有消息搜索框。默认情况下，只有错误消息会记录到控制台，尽管您可以在浏览器的首选项中更改它。

浏览器控制台命令行

与 Web 控制台一样，命令行解释器使您能够实时评估 JavaScript 表达式：

在此处输入图像描述

与 Web 控制台的命令行解释器一样，此命令行支持自动完成、历史记录以及各种键盘快捷键 和辅助命令。如果命令的结果是一个对象，您可以单击该对象以查看其详细信息。

但是，当 Web 控制台在其附加的内容窗口范围内执行代码时，浏览器控制台在浏览器的 chrome 窗口范围内执行代码。您可以通过评估来确认这一点window：

在此处输入图像描述

这意味着您可以控制浏览器：打开、关闭选项卡和窗口以及更改它们所承载的内容，并通过创建、更改和删除 XUL 元素来修改浏览器的 UI。

控制浏览器

命令行解释器通过全局访问tabbrowser对象，gBrowser这使您能够通过命令行控制浏览器。尝试在浏览器控制台的命令行中运行此代码（请记住，要将多行发送到浏览器控制台，请使用 Shift+Enter）：

var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function() {
  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
}, true);
newTabBrowser.contentDocument.location.href = "https://mozilla.org/";

它为当前选择的选项卡的load事件添加一个监听器，它将吃掉新页面，然后加载一个新页面。

修改浏览器 UI

由于全局window对象是浏览器的 chrome 窗口，因此您也可以修改浏览器的用户界面。在 Windows 上，以下代码将向浏览器的主菜单添加一个新项目：

var parent = window.document.getElementById("appmenuPrimaryPane");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);

在此处输入图像描述

在 OS X 上，类似的代码会在“工具”菜单中添加一个新项目：

var parent = window.document.getElementById("menu_ToolsPopup");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);

在此处输入图像描述

于 2013-08-10T02:38:44.500 回答