ユーザスクリプトでアラートを使わずに情報を記録する方法

Question

ウェブページのjavascriptで動的に作成されたすべてのタグをトレースするuserscriptがあります。ここの問題は、現在、出力を表示するためにアラートボックスを使用しています。 alert（）の問題は、それが非常に目立つことがあるということです。すべてのアラートについて、[OK]ボタンをクリックして時間を無駄にする必要があります。だから私は、アラートボックス以外のログファイルのような別の方法が欲しい。これどうやってするの。

私はFirefoxはfollwingコード（あなたが使用している場合）あなたのMozillaにアドオンし、あなたのインストールに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

を使用するように制限されています：

console.log("test"+your_variable); 

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

Answer 3

設定された幅と高さとオーバーフロー自動でページの上部、下部または隅に固定ディビジョンを作成し、その中にログエントリを挿入します。

Answer 4

普通のユーザーがそれを見ることができるはずであれば、コンソールを使用するのは非常にユーザーフレンドリーな方法ではありません。

あなたは情報になりたいあなたのウェブページ上の領域を（<div>が便利かもしれません）を定義し、そしてちょうどDOM変更するためにはJavaScript（またはjQueryの）を使用して、そのスペースにメッセージを追加します。

HTMLを：

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

はJavaScript

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

ユーザーがボタンまたは別の方法でのdivを表示/非表示することができるように優しいかもしれません。