Question

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

我被限制使用console.log

Answer 1

我会使用某种静态放置在你页面上的控制台元素，必要时可以隐藏它。请参阅此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");输出到您的控制台！

Answer 2

在Mozilla上安装firefox附加组件（如果您正在使用），并使用以下代码：

console.log("test"+your_variable);

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

Answer 3

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

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

HTML：

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

的JavaScript

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

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

Answer 4

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

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

4 个答案: