JavaScript Console 運用技巧- 8 招讓你除錯更高效

寫JavaScript 需要檢視運作是否正確時候，都會使用console.log 來檢視輸出或運算的值，而console 的運用技巧不僅僅只有將值呈現在開發的Console 介面 ... CSS JS 生活 文章列表 關於 設計師轉職前端工程師，擅長將複雜觀念用圖形化方式呈現 追蹤卡斯伯 為console.log的程式碼上色console.table()：使用表格的方式陳列陣列的資訊console.group()：群組化大量的log資訊console.time()：開發者最愛斤斤計較那1ms的效能了console.dir()：以物件的形式呈現資料console.error()console.warn()console.clear() 按讚，就是最大的支持 卡斯伯提供的教學資源： 近期活動通知： Modaltitle ... 關閉 javascriptjs 2021-09-14 寫JavaScript需要檢視運作是否正確時候，都會使用console.log來檢視輸出或運算的值，而console的運用技巧不僅僅只有將值呈現在開發的Console介面中。

本篇就來介紹許多console語法的實戰運用方法吧！ 首先，在此先準備一份等等會用到的物件及陣列作為以下範例使用：constMing={ name:'小明', age:15, favorite:'鍋燒意麵' } constJay={ name:'杰倫', age:16, favorite:'炒麵' } constAuntie={ name:'漂亮阿姨', age:21, favorite:'蘿蔔糕' } constpeople=[Ming,Jay,Auntie]; 為console.log的程式碼上色有在Facebook頁面中開啟過開發者工具嗎？如果有，相信你對於以下這張圖並不陌生。

Console中的文字並非只有固定的色彩，它與網頁中的文字一樣，都可以透過CSS的語法來調整其色彩，只要在log的文字前方先加入%c後，在,後方的參數就能夠傳入CSS語法做為參數，並且調整Console中呈現的文字樣式。

console.log(`%c${Ming.name}有瑟瑟的顏色`,'color:orange;font-size:24px'); console.table()：使用表格的方式陳列陣列的資訊當要呈現資料於Console介面中，做常見的方式就是使用log的方法：'😴基本用法' console.log(Ming); console.log(Jay); console.log(Auntie); console.log(people); 當然，這樣的用法絕對沒有問題，透過此方法可以將值一一陳列出來，不過當這些數值是“具有關聯性”時，一般的log就無法比較兩者之間的關係。

console.table()針對物件之間有相同的屬性名稱時，就能夠輕易的比較相同屬性之間的關係。

console.table([Ming,Jay,Auntie]); console.table(people); 除此之外，表格上方的標頭還可以點選作為排序使用，如果拿到一個JSON想比對其中的值，還要轉貼到Excel或是sort()語法安排，不如直接改用table()進行比較吧。

Yourbrowserdoesnotsupportthevideotag. console.group()：群組化大量的log資訊使用log()觀看迴圈值是合情合理的，不過當陣列的長度有上百筆時，Console介面中的資料還真會滾到令人厭世。

for(letindex=0;index推薦的Console語法

constp=document.querySelector('p'); console.log(p); 當使用console.log()查看DOM元素，並想了解其中可用的方法或屬性時…，它可能會出現如下帶點失望的標籤，並且心裡默罵： 要這個幹嘛啦 要知道的是物件屬性、屬性！ 這時候需要的是console.dir()，你會發現另一個新世界，原本的DOM元素被改為物件的形式呈現，你可以輕鬆展開此物件，並檢視裡面有哪些可用屬性。

constp=document.querySelector('p'); console.dir(p); 展開的P元素，包含其中所有的屬性（這在操作DOM時極為好用） console.error()寫程式有錯誤是難免的，但是如果是錯誤，卻沒有明確的提示導致沒有被發現問題，就失去提示的意義了，如果想讓Console的內容更加醒目，可以使用console.error()使訊息在Console介面中以錯誤的形式呈現。

console.error(`${Ming.name}你完蛋了`); 當運用在一般文字訊息上時，也可以展開訊息並說明錯誤來源自哪一段程式碼。

在AJAX的未確認狀態中，也會使用console.error來呈現錯誤的回饋訊息，以下範例刻意將API路徑調整成錯誤的，並透過console.error()來將錯誤的資訊呈現在Console介面中 '🤩Error'; axios.get('https://randomuser.me/apis') .then((res)=>console.log(res)) .catch((error)=>{ console.error('待誌大條啦:',error.response) }) console.warn()錯誤太突兀了嗎？如果是自行開發的函式庫，已經透過各種形式避免程式碼出錯，但還是想把有錯誤的訊息給予開發者知道，那麼則可以使用console.warn()。

'🤩Warning'; /*** *超精美函式庫💖 *@param{number}num純數值 *@param{string}text請傳入字串 */ functionsuperMagicLibrary(num,text){ if(typeofnum!=='number'){ console.warn('尊重一下好嗎，請傳入純數值') } } superMagicLibrary('字串'); 函式庫中大多會避免已知的錯誤，如果要友善的給予回饋，可以使用warn()代替error()提醒開發者更好的做法:D。

console.clear()如果覺得Console介面已經充滿了許多不必要的資訊，想要專注於當前開發的程式碼，那麼可以加入console.clear()。

畫面中會出現Consolewascleared的字眼 此語法亦可在Console介面中直接輸入，會直接清除當下的所有資訊內容。

Yourbrowserdoesnotsupportthevideotag. 不過請慎用此方法，如果隨意插入console.clear()在不同的檔案中，不知情的夥伴一定會在開發中卡很久，可能發生的情境有…： 奇怪，我寫的Code怎麼都沒顯示在Console 編譯器壞了嗎？怎麼好像沒有運作 我的Chrome怪怪的 還有哪些方法你也常用，但沒有介紹到的呢？歡迎在底下留言區留言喔:D 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮)) 上一篇：CSS選取器(基本篇)-CSSSelector 下一篇：履歷避雷技巧-技能描述篇 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮)) 相似文章 十分鐘快速掌握Markdown Markdown是目前非常普遍用來撰寫文檔的語言，一開始的目標就是使用「易讀易寫的純文字格式編寫文件」，此初衷讓使用者可以專注在文字的本身，而不需要透過其它工具來切換格式。

以Word撰寫文檔來說，就必須透過上方的工具列來切換標題、列表、粗體、斜體等等；而Markdown並沒有這樣的工具列，... 一分鐘切換成中文版VSCode（完整圖文版） 雖然開發者都具有一定的英文閱讀能力，但如果在不熟悉的情況下，就比較難以快速上手一個新工具。

如果要快速掌握一個完整的工具或技術，最好的方式還是先切換成熟悉的語言。

而VSCode雖然預設並無法直接切換語系，但官方有提供各國的語言套件，讓開發者可以自行選用。

切換成中文版如果你對於VSCode有... 前端開發者，圖片常犯的五個粗心錯誤 前端開發者是透過程式碼將資訊呈現成畫面，因此畫面的好壞也多少影響品質，在觀看許多履歷或作業的過程中，會發現許多相似的錯誤，而這些錯誤都是有跡可循，並且可以避免的；本篇先以常見的圖片問題與大家分享，看是否你也犯了這些錯誤呢？ 一、圖片變形新手錯誤率：⭐⭐⭐⭐令人感受的粗心度：👎👎👎👎 圖片變形... 十分鐘上手前端單元測試-使用Jest 隨著應用程式越來越大，人工流程的測試也會耗去許多的時間，許多功能再開發後都必須重新進行點擊特定目標、撰寫複雜表單、送出來檢驗功能的正確性，當功能越來越複雜時，人工測試所花的時間也會越來越常，因此改用測試工具相對會節省去許多時間。

尤其到了上線時才發現錯誤，那時候心中真的會吶喊No、No、No～。

前... 粉絲專頁 卡斯伯 標籤雲 BootstrapSassasyncawaitbeginnerbootstrapborderbusinesscompasscoursescssd3d3jsdesigndevelopdnsemmetes6fire.appgitgithubgridgulphtmliconfontsiconsintroironmanjavascriptjekylljestjqueryjslifemacmarkdownmobilemodulesnode.jsnodejsnpmoocssosxprojectpromisepuppeteerrailsreactjsrubysassscsssketchsslstudysublimetextsvgtesttooltoolsvscodevuewebworkshopzeplin履歷 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮))