我怎樣才能記錄信息，而不使用腳本中的警報

我有一個用戶腳本跟蹤網頁的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

我怎樣才能記錄信息，而不使用腳本中的警報

回答

相關問題