浏览器控制台 - Firefox 开发者工具 编辑

Browser Console （浏览器）控制台类似于Web控制台，但是其不仅仅作用于某个标签页，更是针对整个浏览器。

因此它会记录与网页控制台相同的日志信息：网络请求，JavaScript脚本，CSS样式表，安全错误和警告，以及JavaScript代码中显式输出的日志信息。然而，它并非只是输出单个网页的此类信息，而是会记录下所有标签页、附加组件和浏览器自身代码的相关信息。

在附加组件或者浏览器代码的常用Web工具箱中，如果还想使用其他的Web开发者工具，可以尝试一下浏览器工具箱。

同样，你也可以在浏览器控制台执行JS表达式。这里的区别是，web控制台在页面窗体作用域中执行代码，而浏览器控制台在浏览器窗体作用域中执行代码。 This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.

NB: From Firefox 30, the Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable browser chrome and add-on debugging toolboxes" (Firefox 40 and later) / "Enable chrome and add-on debugging" (Firefox 38.0.5 and earlier) option in the developer tool settings.

打开浏览器控制台

打开浏览器控制台的两种方式:

1. 激活菜单栏（按Alt），选择 “工具” 的子菜单“Web开发者”的子菜单 “浏览器控制台” (or Tools menu if you display the menu bar or are on OS X)
2. 使用快捷键: Windows平台 Ctrl+Shift+J 、MAC平台 Cmd+Shift+J .

注意直到Firefox 38, if the Browser Console has become hidden by a normal Firefox window and you select it again, either from the menu or from the keyboard, then it will be closed. From Firefox 38 onwards, this instead has the effect of switching the focus back to the Browser Console, which is more likely to be what you wanted.

你也可以通过在命令行启动Firefox并传递 -jsconsole 参数来打开浏览器控制台:

/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

浏览器控制台如图所示:

浏览器控制台的外观、行为看起来和 Web控制台 一样:

• 窗口的大部分空间被 一个展示信息的容器
• 在顶部有一个工具条可以帮助你来筛选你想看到的信息
• 最底部是一个命令行解释器，你可以在这里执行Js表达式

浏览器控制台日志

浏览器控制台和Web控制台有着相同的日志记录:

• HTTP请求
• 警告和错误 (包括JavaScript, CSS, 安全警告和错误,  JavaScript脚本使用 console API产生的信息)
• 输入和输出信息: 命令发送到浏览器通过命令行，然后执行它们.

但是，浏览器控制台能显示如下信息（网页控制台不具备的）:

• 所有浏览器标签页的网页内容
• 浏览器内部的代码
• 附加组件.

附加组件（add-ons）的信息

浏览器控制台显示所有的Firefox add-ons信息.

Console.jsm

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.

Components.utils.import("resource://gre/modules/devtools/Console.jsm");
console.log("Hello from Firefox code"); //output messages to the console

Learn more:

• console API reference
• Console.jsm source code in the Mozilla Cross-Reference

HUDService

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla Cross-Reference. We see we can not only access the Browser Console but also Web Console.

Here is an example on how to clear the contents of the Browser console:

Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
var HUDService = devtools.require("devtools/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();
hud.jsterm.clearOutput(true);

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:

Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
var HUDService = devtools.require("devtools/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();

var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
clearBtn.addEventListener('mouseover', function() {
  hud.jsterm.clearOutput(true);
}, false);

Bonus Features Available

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

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

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

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:

Click the icon. You'll see output like this in the Browser Console:

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

浏览器控制台命令行

From Firefox 30, the Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable chrome debugging" option in the developer tool settings.

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

Controlling the browser

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use 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/";

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

修改浏览器的UI（用户界面）

Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:

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);

On OS X, this similar code will add a new item to the "Tools" menu:

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);