學習筆記：
方法
1. Regular
2. Interpolated
3. Styled
4. warning!
5. Error :|
6. Info
7. Testing
8. clearing
9. Viewing DOM Elements
10. Grouping together
11. counting
12. timing
13. table
14. network
// Regular
console.log(123,456)
// Interpolated
console.log("Hello I am a %s string!", "💩");
// Styled
console.log(
"%c I am some great text",
"font-size:50px; background:red; text-shadow: 10px 10px 0 blue"
);
// warning!
console.warn(123, 456);
// Error :|
console.error(123, 456);
// Info
console.info(123, 456);
// Testing
console.assert(false, "錯誤");
const p = document.querySelector("p");
console.assert(p.classList.contains("ouch"), "That is wrong!");
// clearing
console.clear()
// Viewing DOM Elements
console.log(p);
console.dir(p);
// Grouping together
dogs.forEach(function (dog) {
console.group(dog["name"]);
console.log(`${dog["name"]} is ${dog["age"]} years old!`);
console.groupEnd(dog["name"]);
});
// counting
console.count("Wes");
console.count("Wes");
console.count("Steve");
console.count("Steve");
console.count("Wes");
console.count("Steve");
console.count("Wes");
console.count("Steve");
console.count("Steve");
console.count("Steve");
console.count("Steve");
console.count("Steve");
// timing
console.time("fetching data");
fetch("https://github.com/xu75/JavaScript30")
.then((data) => data.json())
.then((data) => {
console.timeEnd("fetching data");
console.log(data);
});
// table
console.table(dogs);除了console的運用外，也可以去network這個分類去查看，讀取哪些檔案，哪邊有異狀。
console.log除錯的控制使用，提供大家參考，用在測試時不用註解或是手動刪console.log
// isDev: true ; console.log會出現
// isDev: fslae; console.log會消失
let console = {
isDev: true;
log(...args) {
if(!this.isDev) return;
window.console.log(...args);
}
}
console.log(123,456)提供我的github可以參考不同的做法
參考資料
github:
hackmd筆記：JS30 — Dev Tools Domination
