浏览器的控制台工具
在大多數瀏覽器中,我們可以使用 console 對象往控制臺記錄各種信息,以方便發現 JavaScript 的問題。
IE 按 F12,Firefox 按 Ctrl+Shift+K,Chrome 按 Ctrl+Shift+J,Opera 按 Ctrl+Shift+I,Safari 按 Ctrl+Alt+I,可以打開控制臺查看所記錄的信息。注意 IE6 和 IE7 沒有 console 可以使用,而 IE8 和 IE9 中雖然有 console,但是必須先打開才能使用,否則會出錯。
控制臺函數中最常用的是 console.log(),console.info(),console.warn() 和 console.error() 。這幾個函數的用法一樣,只是瀏覽器的控制臺會按照它們的類型(日志,消息,警告,錯誤)分類顯示這些信息。具體的使用例子如下:
console.log("some log"); // some log
console.info("some info", "more info", 123); // some info more info 123
console.warn("warning: %s occured", "some problem"); // warning: some problem occured
console.error("error: %d number", 10); // error: 10 number
從上面幾個例子可以看出,這幾個函數都可以接收多個參數,如果參數不是字符串,將會自動轉化為字符串輸出。而且也可以使用類似 C 語言的 printf 函數的格式符形式的參數。所有可用的格式符如下:
格式符 |
作用描述 | IE 版本 | Firefox 版本 | Chrome 版本 | Opera 版本 | Safari 版本 |
%s |
格式化字符串 | IE 9 | Firefox 9 或FireBug 擴展 | 全部 | 無 | Safari 5.1 |
%d或%i |
格式化整數 | IE 9 | Firefox 不支持,需 FireBug 擴展 | 全部 | 無 | Safari 5.1 |
%f |
格式化浮點數 | IE 9 | Firefox 不支持,需 FireBug 擴展 | 全部 | 無 | Safari 5.1 |
%o |
格式化 DOM 元素 | IE 9 | Firefox 9 或FireBug 擴展 | 全部 | 無 | Safari 5.1 |
%O |
格式化 JavaScript 對象 | IE 9 | Firefox 不支持,需 FireBug 擴展 | 全部 | 無 | Safari 5.1 |
%c |
應用 CSS 樣式輸出 | 無 | Firefox 不支持,需 FireBug 擴展 | 全部 | 無 | 無 |
在 Chrome 或者 FireBug 中還有更多的 console 函數可以使用,詳情可以看后面的參考資料。
參考資料:
[1]使用開發人員工具調試腳本 - MSDN
[2]console - Document Object Model (DOM) | MDN
[3]Using the Console - Chrome Developer Tools - Google Developers
[4]How to open the JavaScript console in different browsers?
[5]Firebug控制臺詳解 - 阮一峰的網絡日志
[6]Does IE9 support console.log, and is it a real function?
總結
- 上一篇: 劳动最光荣的句子大全781个
- 下一篇: 最狠的真心话大全最新101个