如何在用户脚本中不使用警报来记录信息

How can I log information without using alert in userscripts

本文关键字：信息 记录 用户 脚本      更新时间：2023-09-26

我有一个用户脚本，它跟踪网页的JavaScript中所有动态创建的标签。 这里的问题是目前我正在使用警报框来显示输出。alert（） 的问题在于它可能非常突兀。对于每个警报，您需要单击"确定"按钮继续，这会浪费您的时间。所以我想要一种替代方法，例如警报框以外的日志文件。我该怎么做。

我只能使用控制台.log

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

.HTML：

<div id="console">
  <div class="header">
     Console
     <span class="expand" onclick="toggleConsole();">+</span>
  </div>
  <div class="content" style="display: none;"></div>
</div>

.CSS：

#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;
}

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("some text");输出到您的控制台！

将 Firefox 附加组件安装到您的 Mozilla（如果您正在使用）中，然后使用以下代码：

console.log("test"+your_variable);

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

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

在网页上定义一个空间（<div>可能很方便），你想要信息的位置，然后使用 javascript（或 jQuery）将消息添加到该空间以修改 DOM：

.HTML：

<div id='logmessages'>Log messages:</div>

JavaScript

function log(yourMsg) {
document.getElementByID('logmessages').innerHTML() += yourMsg;
}

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

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

相关文章：