0

WebページのJavaScriptで動的に作成されたすべてのタグをトレースするユーザースクリプトがあります。ここでの問題は、現在、アラートボックスを使用して出力を表示していることです。alert() の問題は、非常に邪魔になる可能性があることです。アラートごとに、[OK] ボタンをクリックして続行する必要があり、時間が無駄になります。だから私はアラートボックス以外のログファイルのような代替方法が欲しい. これどうやってするの。

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

Mozilla に firefox アドオンをインストールし (使用している場合)、次のコードを実行します。

console.log("test"+your_variable);

したがって、上記のコードはすべてのログをコンソールに表示します。IE の場合は F12 を押してコンソールを確認します。

于 2012-04-12T09:22:43.030 に答える
1

通常のユーザーが表示できるようにする必要がある場合、コンソールを使用するのはあまりユーザーフレンドリーな方法ではありません。

情報を配置する Web ページ上のスペースを定義し (<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 に答える