Javascript 如何在不使用用户脚本中的警报的情况下记录信息

我有一个userscript，它可以跟踪网页javascript中所有动态创建的标记。这里的问题是，目前我正在使用警报框显示输出。alert（）的问题在于它可能非常显眼。对于每个警报，您都需要单击“确定”按钮继续，这会浪费您的时间。所以我想要一个替代方法，比如日志文件，而不是警报框。我怎样才能做到这一点

---

我被限制使用console.log

将firefox加载项安装到您的Mozilla（如果您正在使用）中，并输入以下代码：

console.log("test"+your_variable);

---

因此，上面的代码将显示控制台中的所有日志。如果IE按F12并检查控制台。

将firefox加载项安装到您的Mozilla（如果您正在使用），然后输入以下代码：

console.log("test"+your_variable);

---

因此，上面的代码将显示控制台中的所有日志。如果IE按F12并选中console。

使用设置的宽度/高度和溢出自动在页面的顶部、底部或角落创建一个固定div，然后将日志条目插入其中。

使用设置的宽度/高度和溢出自动在页面的顶部、底部或角落创建一个固定div，然后将日志条目插入其中。

如果普通用户能够看到它，那么使用控制台并不是一种非常友好的方式

在您的网页上定义一个空间（一个

可能很方便）来存放信息，只需使用javascript（或jQuery）将消息添加到该空间即可修改DOM：

HTML:

---

允许用户通过按钮或其他方式显示/隐藏div可能很友好。

如果普通用户能够看到它，使用控制台不是一种非常友好的方式

在您的网页上定义一个空间（一个

可能很方便）来存放信息，只需使用javascript（或jQuery）将消息添加到该空间即可修改DOM：

HTML:

---

允许用户使用按钮或其他方式显示/隐藏div可能会很友好。

我会使用静态放置在页面上的某种控制台元素，必要时可以将其隐藏。看这个

HTML:

Javascript:

function log(text) {
    var consoleContent = document.getElementById('console')
        .getElementsByClassName('content')[0];
    var line = document.createElement('div');
    line.className = 'consoleLine';
    line.innerHTML = text;
    consoleContent.appendChild(line);
}

function toggleConsole() {
    var content = document.getElementById('console')
        .getElementsByClassName('content')[0];
    if (content.style.display === "none") {
        content.style.display = "block";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "-";
    } else {
        content.style.display = "none";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "+";
    }
}

document.onload = function() {
    document.getElementById('console')
        .getElementsByClassName('expand')[0].onclick = toggleConsole;
};

---

使用

log（“一些文本”）输出到您的控制台
 我会使用静态放置在页面上的某种控制台元素，必要时可以将其隐藏。看这个

HTML:

Javascript:

function log(text) {
    var consoleContent = document.getElementById('console')
        .getElementsByClassName('content')[0];
    var line = document.createElement('div');
    line.className = 'consoleLine';
    line.innerHTML = text;
    consoleContent.appendChild(line);
}

function toggleConsole() {
    var content = document.getElementById('console')
        .getElementsByClassName('content')[0];
    if (content.style.display === "none") {
        content.style.display = "block";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "-";
    } else {
        content.style.display = "none";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "+";
    }
}

document.onload = function() {
    document.getElementById('console')
        .getElementsByClassName('expand')[0].onclick = toggleConsole;
};

使用
log（“一些文本”）输出到您的控制台
 对于console.log，我们必须转到inspectelement->console，用户可能会不舒服。我的应用程序应该在脚本运行时显示输出，而不让用户通过控制台查看输出。抱歉，我忘了提到这一点。您想只为您（开发人员/帮助台）记录信息，还是普通用户必须能够看到它？普通用户应该能够看到它。@user1275375-然后将输出添加到页面的HTML中。在这一点上，我不确定您的想法是什么：-？是否可以使用userscriptfor console.log将代码添加到网站中我们必须转到inspectelement->console，用户可能会不舒服。我的应用程序应该在脚本运行时显示输出，而不让用户通过控制台查看输出。抱歉，我忘了提到这一点。您想只为您（开发人员/帮助台）记录信息，还是普通用户必须能够看到它？普通用户应该能够看到它。@user1275375-然后将输出添加到页面的HTML中。在这一点上，我不确定您的想法是什么：-？是否可以使用userscript将代码添加到网站中注意，使用console.log可以传递多个参数。因此，您可以说
console.log（“我的对象是：”+myObj）
，而不是
console.log（“我的对象是：”，myObj）
，这将允许您展开对象并查看其属性是的，我们可以。我刚才解释是为了得到一个想法。无论如何，谢谢：-）注意，使用console.log可以传递多个参数。因此，您可以说
console.log（“我的对象是：”+myObj）
，而不是
console.log（“我的对象是：”，myObj）
，这将允许您展开对象并查看其属性是的，我们可以。我刚才解释是为了得到一个想法。无论如何，谢谢：-）这种方法是正确的想法，不仅仅是在某个第三方网站上，我会投票支持。这种方法是正确的，不仅仅是在某个第三方网站上，我会投票表决。
#console {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 300px;
    border: solid 1px #dddddd;
}
#console .header {
    background-color: #ededed;
    border: solid 1px #dddddd;
}
#console .header .expand {
    padding-right: 5px;
    float: right;
    cursor: pointer;
}
#console .content {
    overflow: auto;
    background-color: #F9F9F0;
    width: 100%;
    height: 180px;
}

function log(text) {
    var consoleContent = document.getElementById('console')
        .getElementsByClassName('content')[0];
    var line = document.createElement('div');
    line.className = 'consoleLine';
    line.innerHTML = text;
    consoleContent.appendChild(line);
}

function toggleConsole() {
    var content = document.getElementById('console')
        .getElementsByClassName('content')[0];
    if (content.style.display === "none") {
        content.style.display = "block";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "-";
    } else {
        content.style.display = "none";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "+";
    }
}

document.onload = function() {
    document.getElementById('console')
        .getElementsByClassName('expand')[0].onclick = toggleConsole;
};