0

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

我被限制使用 console.log

4

4 回答 4

2

我会使用某种静态放置在您的页面上的控制台元素，如有必要，可以将其隐藏。看到这个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");输出到您的控制台！

于 2012-04-12T10:12:48.113 回答
1

将 firefox 附加组件安装到您的 Mozilla（如果您正在使用）和以下代码：

console.log("test"+your_variable);

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

于 2012-04-12T09:22:43.030 回答
1

如果普通用户应该能够看到它，使用控制台并不是一种非常人性化的方式。

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

HTML：

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

JavaScript

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

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

于 2012-04-12T09:29:37.883 回答
0

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

于 2012-04-12T09:29:16.607 回答