Question

如何使用＆＃34;浏览器控制台＆＃34;来自工人？

编辑：我讨厌dum pconsole：

我刚开始使用ChromeWorker并且无法使用真棒console.log。但控制台窗口太糟糕了，事情被切断了，你无法滚动等等。dump有ChromeWorker的替代方案吗？我知道throw但是会中断代码。

我正在谈论的firefox.exe -console（转储控制台）的图片：

Answer 1

工作中dump()或throw()的替代方法（您的问题不明确，您希望使用不同的方法来输出到系统控制台，或者你想要使用系统控制台作为工人文本输出的显示器的替代方案：

如果您希望使用系统控制台（即＆＃34; Native Console＆＃34;，＆＃34;转储控制台＆＃34;），似乎没有替代{{1来自JavaScript的{}和dump()，或者至少我没有找到一个搜索文档和尝试各种各样的东西。但是，您可以控制系统控制台的属性，以缓解您在问题中提到的一些问题。如何操作取决于您的操作系统（见下文）。
MDN文档表明，您可以通过重定向stderr将带有throw()选项的定向到系统控制台的输出重定向到文件。实际上，这意味着您应该能够将该输出重定向到您想要的任何内容。这将包括您希望的任何显示/分页/控制台，如应用程序/进程。显然，如何做到这一点以及可用的替代方案取决于您的操作系统。许多有不同的选项和可能性。
使用工作人员的JavaScript控制台：MDN docs表示"normal" console（例如Web Console，Browser Console，JavaScript控制台等）可用通过WorkerGlobalScope属性到Worker。因此，可以通过-console或WorkerGlobalScope.console或工作类型专用的GlobalScope访问普通控制台。因此，正常self.console应为console.log()。从Firefox 32.0.1开始self.console.log()和多个其他self.console.log方法被定义为工作者上下文中的函数，但在任何控制台中都不产生输出。因此，我们必须伪造它（参见Polyfill）。

Re：您在系统控制台中遇到的问题： [将我们的评论中的信息提取到我之前的答案中，以便将实际相关的内容整合到一个答案中]：

您在问题中引用的控制台是＆＃34;系统控制台＆＃34;，也称为＆＃34; Native Console＆＃34;。此控制台的特性取决于运行Firefox的操作系统。因此，我们需要知道您正在使用的操作系统。

在Windows上（您之前曾在其他地方询问过基于Windows的FF问题，因此信息可能会有所帮助）：通过右键单击窗口标题栏 - ＆gt;属性打开的菜单可以访问窗口的属性。然后你想要＆＃34;布局＆＃34;标签。您可能还想更改＆＃34; Font＆＃34;下的字体。标签。您可以更改显示的窗口的宽度和高度以及缓冲区的宽度和高度。更改缓冲区的大小允许您拥有一个未被裁剪的较大的可滚动区域。然后，您可以将更改分配给启动窗口的快捷方式，并在下次启动Firefox时进行更改（至少如果您创建了访问特定配置文件的快捷方式并将-console添加到其中，则会更改）。这是在＆＃34; Target＆＃34;字段：self.console.*。

填充工具：

MDN Console documentation中描述的大量方法实际上并不存在于我尝试过的任何上下文中。这些是从polyfill注释掉的。 polyfill不会尝试使源文件或控制台中显示的行号正确无误。至少可以使错误和警告显示正确的文件，但是已经正确地发生了实际的错误和警告（即不是写入代码的错误和警告）。

此polyfill依赖于劫持发回给调用进程的非常具体的消息。如果传递的消息是具有"C:\Program Files\Mozilla Firefox\firefox.exe" -purgecaches -no-remote -P "<your profile name here>"的对象，则假定它是通过subType中指定的方法转发到控制台的消息。

以下代码已在您提供的工作代码中进行了测试。

bootstrap.js中的代码有两个替代项。如果您真的只打算使用简单的传入消息打印，则应使用备用1。备用＃2：如果您已经对消息进行了复杂的处理，那么在概念上可能更容易使控制台消息处理包装函数。

代码已添加到 myWorker.js ：

{type : "Console message", subType : <one of the console types>}

替代＃1： bootstrap.js 中添加了代码（带有少量上下文）（只是插入处理控制台消息内联）：

var console = {
    log : function (msg) {
        var toSend = { type : "Console message", subType : "log",            message : msg};
        postMessage(toSend);
    },
    error : function (msg) {
        var toSend = { type : "Console message", subType : "error",          message : msg};
        postMessage(toSend);
    },
    /* Not an actual function.
    _exception : function (msg) {
        var toSend = { type : "Console message", subType : "_exception",     message : msg};
        postMessage(toSend);
    },
    */
    info : function (msg) {
        var toSend = { type : "Console message", subType : "info",           message : msg};
        postMessage(toSend);
    },
    warn : function (msg) {
        var toSend = { type : "Console message", subType : "warn",           message : msg};
        postMessage(toSend);
    },
    /* Not a standard function, and did not want to deal with an arbitrary number of parameters. 
    assert : function (msg,stat) {
        var toSend = { type : "Console message", subType : "assert",         message : msg, status : stat};
        postMessage(toSend);
    },
    */
    /* Not an actual function.
    count : function (msg) {
        var toSend = { type : "Console message", subType : "count",          message : msg};
        postMessage(toSend);
    },
    */
    debug : function (msg) {
        var toSend = { type : "Console message", subType : "debug",          message : msg};
        postMessage(toSend);
    },
    dir : function (msg) {
        var toSend = { type : "Console message", subType : "dir",            message : msg};
        postMessage(toSend);
    },
    group : function (msg) {
        var toSend = { type : "Console message", subType : "group",          message : msg};
        postMessage(toSend);
    },
    /* Not an actual function.
    groupCollapsed : function (msg) {
        var toSend = { type : "Console message", subType : "groupCollapsed", message : msg};
        postMessage(toSend);
    },
    */
    groupEnd : function (msg) {
        var toSend = { type : "Console message", subType : "groupEnd",       message : msg};
        postMessage(toSend);
    },
    /* Not actual functions. Probably would not have worked correctly anyway.
    profile : function (msg) {
        var toSend = { type : "Console message", subType : "profile",        message : msg};
        postMessage(toSend);
    },
    profileEnd : function (msg) {
        var toSend = { type : "Console message", subType : "profileEnd",     message : msg};
        postMessage(toSend);
    },
    */
    /* Not an actual function.
    table : function (msg) {
        var toSend = { type : "Console message", subType : "table",          message : msg};
        postMessage(toSend);
    },
    */
    time : function (msg) {
        var toSend = { type : "Console message", subType : "time",           message : msg};
        postMessage(toSend);
    },
    timeEnd : function (msg) {
        var toSend = { type : "Console message", subType : "timeEnd",        message : msg};
        postMessage(toSend);
    },
    trace : function (msg) {
        var toSend = { type : "Console message", subType : "trace",          message : msg};
        postMessage(toSend);
    },
}

备用＃2：在 bootstrap.js 中添加/更改了代码（带有少量上下文）（使用处理控制台消息的函数包装消息处理程序，从概念上保持这一点更独立）：

function handleMessageFromWorker(msg) {
    if (   typeof msg.data == "object"
        && typeof msg.data.type == "string"
        && typeof msg.data.subType == "string"
        && msg.data.type == "Console message"
        && typeof console[msg.data.subType] == "function"
    ){
        if(msg.data.subType == "trace") {
            //This will not work as desired.
            //Obviously doing a trace here will output a trace of this function, not the worker.
            console.error("WORKER STACK TRACE REQUESTED: This is NON-FUNCTIONAL.");
            return;
        } //else
        console[msg.data.subType](msg.data.message);
        return;
    }
    console.log('incoming message from worker, msg:', msg);
}

myWorker.addEventListener('message', handleMessageFromWorker);

测试代码已添加到 myWorker.js ：

function wrapHandleMessageFromWorker(msg) {
    if (   typeof msg.data == "object"
        && typeof msg.data.type == "string"
        && typeof msg.data.subType == "string"
        && msg.data.type == "Console message"
        && typeof console[msg.data.subType] == "function"
    ){
        if(msg.data.subType == "trace") {
            //This will not work as desired.
            //Obviously doing a trace here will output a trace of this function, not the worker.
            console.error("WORKER STACK TRACE REQUESTED: This is NON-FUNCTIONAL.");
            return;
        } //else
        console[msg.data.subType](msg.data.message);
        return;
    }
    handleMessageFromWorker(msg);
}

function handleMessageFromWorker(msg) {
    console.log('incoming message from worker, msg:', msg);
}

myWorker.addEventListener('message', wrapHandleMessageFromWorker);

Answer 2

[这个答案提供了有关发送输出浏览器/ Web / JavaScript控制台的信息，这不是原始问题所希望的。]

是的，控制台窗口有一些非常明显的缺点。对我来说，最重要的是显示大量信息时非常非常慢。

我不确定你的问题是关于缺少滚动问题。一种可能性是你说它没有显示那么多行。您可以通过更改以下首选项来调整控制台中显示的行数：

devtools.hud.loglimit.exception
devtools.hud.loglimit.console
devtools.hud.loglimit.cssparser
devtools.hud.loglimit.network

将这些更改为您想要显示的行数。

对于被切断的事情，我所遇到的唯一一件事就是长的单呼叫输出最初显示为截断状态。但是，始终存在控制（与输出一致）以将此输出扩展到其全长。如果我没记错的话，这是一个椭圆＆＃34; ...＆＃34;在行尾。单击它，它将扩展为该调用中输出的所有文本。

我不确定它是否适用于Chromeworker，因为我目前没有编码。因此，您需要在您的环境中进行测试。但是，当没有window可用时（例如在引导过程中），我发现可以工作的是：

Components.utils.import("resource://gre/modules/Services.jsm");       //Services
/*
 * Send a string to the Browser/Web console marked as a warning.
 */
function consoleWarningMessage(text) {
    var warningMessage = Components.classes["@mozilla.org/scripterror;1"]
                                 .createInstance(Components.interfaces.nsIScriptError);
    warningMessage.init(text,null,null,null,null,1,null);
    Services.console.logMessage(warningMessage);
}

/*
 * Send a string to the Browser/Web console marked as an exception.
 */
function consoleExceptionMessage(text) {
    var exceptionMessage = Components.classes["@mozilla.org/scripterror;1"]
                                 .createInstance(Components.interfaces.nsIScriptError);
    exceptionMessage.init(text,null,null,null,null,2,null);
    Services.console.logMessage(exceptionMessage);
}

/*
 * Send a string to the Browser/Web console marked as a strict error.
 */
function consoleStrictMessage(text) {
    var strictMessage = Components.classes["@mozilla.org/scripterror;1"]
                                 .createInstance(Components.interfaces.nsIScriptError);
    strictMessage.init(text,null,null,null,null,4,null);
    Services.console.logMessage(strictMessage);
}

/*
 * Send a string message to the Browser/Web console.
 */
function consoleMessage(text) {
    Services.console.logStringMessage(text);
}

Answer 3

如果你的意思是来自插件，使用console.log，这就是我使用的：

// import the module, usually on top of the page
Components.utils.import('resource://gre/modules/devtools/Console.jsm');

// afterwards  you can use console.log normally
console.log('whatever');

如何从ChromeWorker中控制console.log（替代dump）

3 个答案:

填充工具：