JavaScript Console 之瀏覽器控制臺
Chrome?幾乎是最好的瀏覽器，是的，我一直這么認為，它的開發(fā)者工具也覺不含糊，來，試一試?Console。
輸出信息
輸出日志信息
// 普通日志信息console.log('this is a log');// 簡單樣式的日志信息var template = '%cHello World!', style = 'font-size: 30px; color: blue;';console.log(template, style);// 華麗樣式的日志信息var template = '%cHello World!', style = '';style += 'background-image: -webkit-gradient(linear, left top, right top,';style += 'color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),';style += 'color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2),';style += 'color-stop(0.9, #ff2), color-stop(1, #f22));';style += 'color: transparent; -webkit-background-clip: text; font-size: 6em;)';console.log(template, style);// 圖片日志信息var style = 'padding: 150px 200px; line-height: 300px; background: url(http://www.wyzu.cn/data/uploadfile/200803/2008032812262650.gif) no-repeat;';console.log('%c', style);// 接受不定參數(shù)console.log('%cHello World!', 'color: red;', 'JavaScript', 'Web Developer');
輸出提示信息
console.info('this is a info');輸出警告信息
console.warn('this is a warn.');輸出錯誤信息
console.error('this is a error');輸出分組信息
// 普通組console.group('App.log');console.log('this is a group log.');console.groupEnd();console.group('App.info');console.info('this is a group info.');console.groupEnd();// 組嵌套var user = 'Atkinson', authenticated = true, authorized = true;console.group("Authenticating user '%s'", user);if (authenticated) {console.log("User '%s' was authenticated.", user);console.group("Authorizing user '%s'.", user);if (authorized) {console.log("User '%s' was authorized.", user);}console.groupEnd();}console.groupEnd();console.log("A nested group log trace.");// 折疊組var user = 'Atkinson', authenticated = true, authorized = true;console.groupCollapsed("Authenticating user '%s'", user);if (authenticated) {console.log("User '%s' was authenticated.", user);console.groupCollapsed("Authorizing user '%s'.", user);if (authorized) {console.log("User '%s' was authorized.", user);}console.groupEnd();}console.groupEnd();console.log("A nested group log trace.");
字符串替換和格式
格式說明符的完整列表
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());將 DOM 結(jié)點以 JavaScript 對象的形式輸出到控制臺
console.dir(document.body);console.dir(document.body.firstElementChild);
輸出表格信息
// 基本表格var table = [{'名稱': 'MacBook Pro', '數(shù)量': 2, '單位': '臺'},{'名稱': 'ThinkPad', '數(shù)量': 10, '單位': '臺'},{'名稱': 'JavaScript 工程師', '數(shù)量': 2, '單位': '人'},{'名稱': 'PHP 工程師', '數(shù)量': 10, '單位': '人'}];console.table(table);// 高級表格function Person(name, email, age) {this.name = name;this.email = email;this.age = age;}var language = {};language.c = new Person('C', '[email protected]', 40);language.php = new Person('PHP', '[email protected]', 25);language.java = new Person('Java', '[email protected]', 30)language.javascript = new Person('JavaScript', '[email protected]', 20);console.table(language, ['name', 'email', 'age']);
斷言
// 代替三目運算，先對傳入的表達式進行斷言，只有表達式為假時才輸出信息var isDebug = false;console.log(isDebug, '請稍候, 系統(tǒng)正在調(diào)試中...');
堆棧跟蹤
function add(num) {if (num > 0) {console.trace('recursion is function:', num);return num + add(num - 1);} else {return 0;}}add(3);
計數(shù)
// 統(tǒng)計某段代碼執(zhí)行了多少次var Test = function() {var testFunc = function() {console.count('`testFunc()` 函數(shù)被執(zhí)行的次數(shù)');};return {init: function() {testFunc();}};};var f = new Test();f.init(); // `testFunc()` 函數(shù)被執(zhí)行的次數(shù)：1f.init(); // `testFunc()` 函數(shù)被執(zhí)行的次數(shù)：2
統(tǒng)計任務(wù)耗時
console.time('Array initialize');var array = new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {array[i] = new Object();}console.timeEnd('Array initialize'); // Array initialize: 1416.217ms
評論
圖片
表情