最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day 9 – Dev Tools Domination

XAMPP下载 admin 591浏览 0评论
 今天同樣不會做出東西,而是學習 console 的各種小技巧!大家可以將下面示範的程式碼貼在瀏覽器玩看看

console.log(..)
最基本的使用方式,常用來查看 JS 是否串接成功,或是當不確定狀況時查看變數或目前狀態

console.log(‘Hello world!’);

// Hello world!
console.log(%s .. , ..)
這種方式可以插入值到字串當中,例如:

console.log(‘I am an %s string’, ‘?’);

// I am an ? string
可以看到 %s 被貓頭鷹 emoji 給取代了,這種用法有點類似在 C 之類的語言的表達方式(%s 代表 string),如果要帶入數字,則使用 %i 或者 %f(integer & float)

console.log(%c .. , ..)
這種謝法使我們能夠將 console.log 的內容當成 CSS 更改樣式,但 %c 只能放在開頭

console.log(‘%c I am some hugeee text!’, ‘font-size: 20px; color: tomato’);
可以看到文字變大也變顏色了!

console.warn(..)
印出黃底的警告文字

console.warn(‘Oh snap!’);
console.error(..)
如一般出錯時看到的錯誤提示,此語法會印出紅底的錯誤訊息

console.error(‘Something went wrong!’);
console.info

(..)
此語法會印出如 console.log 的顯示方式,但在開頭前面會有一個 i 的符號(我在 chrome 沒看到符號,但 firefox 及 safari 都有)

console.info

(‘在非洲,每六十秒,就有一分鐘過去’);
console.assert(.. , ..)
此語法可以用於測試使用,共有兩個參數:第一個參數帶入欲測試的項目,如果結果是 false 才會印出第二個參數的字串

// HTML
<p>hello</p>

const p = document.querySelector(‘p’);
console.assert(p.classList.contains(‘test’), ‘That is not true!’);  // 逗點後的訊息只有在前一項為 false 時才會顯示
console.clear()
此語法會將 console 中的內容全部清除,請謹慎使用!

console.clear();
console.dir(element)
// HTML
<p>hello</p>

const p = document.querySelector(‘p’);
console.log(p);

// <p>hello</p>
可以看到平常印出 DOM 元素時至只會印出該元素本身,並無法看到可用的方法(methods)或屬性(properties),但使用 console.dir() 就可以囉!

console.dir(p);

// 會印出一個 HTMLElement 內含方法及屬性
console.group(..) / console.groupCollapsed(..) & console.groupEnd(..)
當需要使用迴圈印出一些重複的內容時,console 的版面會顯得雜亂,此時可以使用 console.group(..) 來群組同一組的內容,記得結尾時要使用 console.groupEnd(..) 來標示結束

const dogs = [{ name: ‘Snickers’, age: 2 }, { name: ‘hugo’, age: 8 }];

dogs.forEach(dog => {
console.groupCollapsed(`${dog.name

}`);  // console.group(..) 則預設會展開內容
console.log(`This is ${dog.name

}.`);
console.log(`${dog.name

} is ${dog.age} years old.`);
console.log(`${dog.name

} is ${dog.age * 7} dog years old.`);
console.groupEnd(`${dog.name

}`);
});
console.count(..)
此語法紀錄總共呼叫 console.count(..) 的次數;會依照不同的內容分別計算

console.count(‘Henry’);
console.count(‘Henry’);
console.count(‘Kai’);
console.count(‘Kai’);
console.count(‘Henry’);
console.count(‘Kai’);
console.count(‘Kai’);
console.count(‘Henry’);
console.count(‘Kai’);

// Henry: 1
// Henry: 2
// Kai: 1
// Kai: 2
// Henry: 3
// Kai: 3
// Kai: 4
// Henry: 4
// Kai: 5
console.time(..) & console.timeEnd(..)
此語法紀錄了某個動作的花費總時間,開頭使用 console.time(..),結尾使用 console.timeEnd(..)

console.time(‘hello’);
alert(‘Hello world!’);
console.timeEnd(‘hello’)

// hello: 1620.22412109375ms
console.table(..)
console.table() 內容如果放入一個 array,console 會自動以表格方式呈現

const dogs = [{ name: ‘Snickers’, age: 2 }, { name: ‘hugo’, age: 8 }];

console.table(dogs);

// 以表格方式呈現
以上就是今天的介紹,沒辦法呈現完整結果的部分,請大家點擊最上方連結或是實際在 console 操作~

转载请注明:XAMPP中文组官网 » Day 9 – Dev Tools Domination

您必须 登录 才能发表评论!