摘要:調試各種姿勢指南作者簡介是推出的一個天挑戰。現在你看到的是這系列指南的第篇。完整中文版指南及視頻教程在從零到壹全棧部落。項目效果各種調試正確姿勢的更多用法這個是最常用的,但它還有一些更多功能比如參數支持類似語言的字符串替換模式。
Day09 - Console 調試各種姿勢指南
項目效果</>復制代碼
作者:?liyuechun
簡介:JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西,不借助框架和庫,也不使用編譯器和引用。現在你看到的是這系列指南的第 9 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。
這個是最常用的,但它還有一些更多功能:比如參數支持類似 C 語言的字符串替換模式。
%s 字符串
%d 整數
%f 浮點值
%o Object
%c 設定輸出的樣式,在之后的文字將按照第二個參數里的值進行顯示
</>復制代碼
console.log("I am a String: %s ", "log"); //log
console.log("I am a int number: %d ", 1); //1
console.log("I am a float number: %d ", 1.23); //1.23
let dog = {name: "Lucky",age: "5"};
console.log("%o",dog);
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
清空 console 面板輸出內容
要清空已經打印輸出的內容,有兩種方式,一種是 JavaScript 語句: console.clear()。另一個是快捷鍵 Ctrl + L。
不同樣式的輸出除了常規的 log 之外,還有一些其他已設定好的樣式,區別在于圖標或者顏色不一樣:
</>復制代碼
// warning!
console.warn("用于輸出警示信息");
// Error :|
console.error("用于輸出錯誤信息");
// Info
console.info("用于輸出提示性信息");
//debug
console.debug("用于輸出調試信息");
打印DOM節點
獲取 DOM 元素之后,可以直接打印輸出。
</>復制代碼
const p = document.querySelector("p");
console.log(p);
console.dir(p);
.log 輸出這個 DOM 的 HTML 標簽。
.dir 則會輸出這個 DOM 元素的屬性列表。
斷點調試console.asset(arg1,arg2)方法接受一個表達式作為參數,如果參數返回值是false,則會輸出第二個參數中的內容。
</>復制代碼
const p = document.querySelector("p");
console.assert(p.classList.contains("ouch"), "That is wrong!");
打印表格
console.table()方法,可以將數組、對象以表格的形式打印輸出,如果只輸出其中的某一列,可以加上第二個參數,如下所示:
</>復制代碼
console.table(dogs);
console.table(dogs, ["age"]);
分組打印
</>復制代碼
const dogs = [{ name: "Snickers", age: 2 }, { name: "hugo", age: 8 }];
dogs.forEach(dog => {
console.group(`${dog.name}`);
// console.groupCollapsed(`${dog.name}`); // 列表默認疊起狀態
console.log(`${dog.name}`);
console.log(`${dog.age}`);
console.log(`${dog.name} 有 ${dog.age} 歲了`);
console.groupEnd();
});
group()方法中可以傳入這個分組的名稱。group()/groupCollapsed() 與 groupEnd() 之間的內容會自動分組,區別在于是否能自動折疊。
通過console.count()可以對輸出的對象進行計數。但需要注意的是這里的計數對象僅限于由 count() 輸出的內容,并非所有 console 中的輸出。
time 計時用 time("name") 和 timeEnd("name") 分別控制開始點和結束點,它們兩的參數表示當前計時的名稱,可以自定義但需要保持相同。所以如果想看異步獲取數據花了多場時間,可以這樣寫:
</>復制代碼
console.time("fetch my data");
fetch("https://api.github.com/users/soyaine")
.then(data => data.json())
.then(data => {
console.timeEnd("fetch my data");
console.log(data);
});
如果 timeEnd 中的名稱如果和上面不一樣,得到的數據是系統當前時間換算后的毫秒值。
源碼下載Github Source Code
</>復制代碼
社群品牌:從零到壹全棧部落
定位:尋找共好,共同學習,持續輸出全棧技術社群
業界榮譽:IT界的邏輯思維
文化:輸出是最好的學習方式
官方公眾號:全棧部落
社群發起人:春哥(從零到壹創始人,交流微信:liyc1215)
技術交流社區:全棧部落BBS
全棧部落完整系列教程:全棧部落完整電子書學習筆記
關注全棧部落官方公眾號,每晚十點接收系列原創技術推送 |
---|
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/84339.html
摘要:攝像拍照,濾鏡中文指南本文出自春哥個人博客作者黎躍春追時間的人簡介是推出的一個天挑戰。完整中文版指南及視頻教程在從零到壹全棧部落。這個新的對象表示指定的對象或對象。 Day19 - 攝像、拍照,濾鏡中文指南 本文出自:春哥個人博客作者:?黎躍春-追時間的人簡介:JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文...
摘要:中文指南二作者簡介是推出的一個天挑戰。完整中文版指南及視頻教程在從零到壹全棧部落。第七天的練習是接著之前中文指南一的練習,繼續熟練數組的方法,依舊沒有頁面顯示效果,所以請打開瀏覽器的面板進行調試運行。 Day07 - Array Cardio 中文指南二 作者:?liyuechun 簡介:JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個...
摘要:指南一作者簡介是推出的一個天挑戰。目的是幫助人們用純來寫東西,不借助框架和庫,也不使用編譯器和引用。現在你看到的是這系列指南的第篇。完整指南在從零到壹全棧部落。篩出運行結果是的組成數組返回。 Day04 - Array Cardio 指南一 作者:?liyuechun 簡介:JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30...
閱讀 1997·2021-11-22 19:20
閱讀 2641·2021-11-22 13:54
閱讀 1972·2021-09-04 16:40
閱讀 1827·2021-08-13 11:54
閱讀 2673·2019-08-30 15:55
閱讀 3468·2019-08-29 13:51
閱讀 531·2019-08-29 11:09
閱讀 3010·2019-08-26 14:06
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要