我怎样才能记录信息，而不使用脚本中的警报

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

我正在限制使用的console.log

来源

2012-04-12 user1275375

console.log（）？ – 2012-04-12 09:21:09

for console.log，我们必须去inspectelement->控制台，其中用户可能不舒服。我的应用程序应该在脚本运行时显示输出，而不需要用户去控制台查看输出。对不起，我忘了提及这个 – user1275375 2012-04-12 09:24:06

你只想为你记录信息（开发人员/服务台），还是普通用户必须能够看到它？ – Konerak 2012-04-12 09:25:07

我会使用静态放置在页面上的某种控制台元素，如果需要可以隐藏。看到这个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-12 10:12:48 jb10210

这种方法是正确的想法。 [把这里的相关代码放在这个答案中]（http://meta.stackexchange.com/q/8231/148310），而不仅仅是在某个第三方网站上，我会加注它。 – 2012-04-12 10:59:02

@BrockAdams在这里，你去！ – jb10210 2012-04-12 11:06:41

谢谢！ +1 – 2012-04-12 14:17:51

安装Firefox插件到您的Mozilla（如果您正在使用），你的follwing代码：

console.log("test"+your_variable);

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

来源

2012-04-12 09:22:43 Unknown

请注意，使用console.log您可以传递多个参数。因此，而不是'console.log（“我的对象是：”+ myObj）''你可以说'控制台。日志（“我的对象是：”，myObj）'这将允许您展开对象并查看其属性 – bcoughlan 2012-04-12 09:25:43

是的，我们可以。我刚才解释说要得到一个想法。无论如何谢谢你:-) – Unknown 2012-04-12 09:27:58

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

来源

2012-04-12 09:29:16

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

定义网页上的空间（<div>可能会派上用场），您想要的信息是，只是使用JavaScript（或jQuery的）来修改DOM添加的消息，该空间：

HTML：

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

的JavaScript

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

这可能是友好的，以允许用户显示/隐藏有一个按钮或其他方式的股利。

来源

2012-04-12 09:29:37 Konerak

我怎样才能记录信息，而不使用脚本中的警报

回答

相关问题