Wie kann ich Informationen ohne Verwendung der Warnung in userscripts protokollieren

Question

Ich habe ein Benutzer-Skript, das alle dynamisch erzeugten Tags in Javascript einer Webseite verfolgt. Das Problem hier ist derzeit ich benutze Alarm-Box, um die Ausgabe anzuzeigen. Das Problem mit alert() ist, dass es sehr aufdringlich sein kann. Für jede Warnung müssen Sie auf OK klicken, um fortzufahren, was Ihre Zeit verschwendet. also möchte ich eine alternative methode wie protokolldateien anders als alarmbox. Wie kann ich das machen.

ich bin beschränkt console.log verwenden

Answer 1

Ich würde eine Art von Konsolenelement verwenden, das statisch auf Ihrer Seite platziert ist und bei Bedarf ausgeblendet werden kann. Siehe hierzu 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; 
}; 

Verwenden log("some text"); zur Ausgabe an die Konsole!

Answer 2

Installieren Sie Firefox-Add-on zu Ihrem Mozilla (wenn Sie verwenden) und Sie die follwing Code:

console.log("test"+your_variable); 

So obigen Code werden alle Protokolle anzeigen in der Konsole. Wenn IE F12 drücken und Konsole überprüfen.

Answer 3

Erstellen Sie eine feste div entweder oben, unten oder Ecke Ihrer Seite mit der eingestellten Breite/Höhe und Überlauf automatisch, dann fügen Sie die Protokolleinträge ein.

Answer 4

Wenn ein normaler Benutzer es sehen kann, ist die Verwendung der Konsole nicht sehr benutzerfreundlich.

HTML: das DOM zu sein, und fügen Sie einfach die Nachrichten in diesen Raum mit Hilfe von JavaScript (oder jQuery) zu modifizieren

einen Platz auf Ihrer Webseite definieren (a <div> könnte sehr nützlich sein), wo Sie die Informationen wünschen:

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

JavaScript

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

Es könnte freundlich sein, damit der Benutzer die div mit einem Knopf oder eine andere Art und Weise zeigen/verstecken.