前端 Console API 每個 method的使用時機
前端的 Console API 是開發者常用來進行除錯、日誌記錄、測試和分析的工具。以下是 Console API 各種方法的使用時機：
1. console.log()
- 功能：用來顯示一般資訊或訊息。
- 使用時機：當你想要輸出變數的值、程式運行狀態或一般訊息以追蹤程式執行流程時。
- 範例：
javascript console.log("Page loaded"); console.log(userData);
2. console.info()
- 功能：與
console.log()類似，用於顯示資訊性訊息，但語意上更專注於「資訊」。 - 使用時機：適合用來記錄系統或應用程式狀態的資訊性提示，特別是涉及通知或消息相關的情況。
- 範例：
javascript console.info("User successfully logged in.");
3. console.warn()
- 功能：用來顯示警告訊息，通常是可能導致錯誤或不期望的行為。
- 使用時機：當你想提醒開發者注意可能會出現問題的程式碼，但不會導致程式崩潰時。
- 範例：
javascript console.warn("This method is deprecated.");
4. console.error()
- 功能：顯示錯誤訊息，通常代表嚴重問題。
- 使用時機：當你想要提示明確的錯誤，特別是那些會導致程式停止運行或功能異常的情況。
- 範例：
javascript console.error("Failed to fetch data from server.");
5. console.table()
- 功能：以表格形式顯示陣列或物件的資料。
- 使用時機：當你需要清楚地顯示一個陣列或物件中的資料時，尤其是包含多個條目和屬性時。
- 範例：
javascript const users = [{name: "Alice", age: 30}, {name: "Bob", age: 25}]; console.table(users);
6. console.dir()
- 功能：用來顯示 JavaScript 物件的結構和屬性。
- 使用時機：當你需要檢查物件的內部結構或屬性時，可以比
console.log()更深入地檢視物件。 - 範例：
javascript const obj = {name: "Alice", age: 30}; console.dir(obj);
7. console.assert()
- 功能：當指定的表達式為
false時，顯示錯誤訊息。若表達式為true則不顯示任何訊息。 - 使用時機：用於除錯階段檢查假設的條件是否成立。如果某個條件必須成立，但卻不成立時會顯示錯誤。
- 範例：
javascript console.assert(user.age > 18, "User is not an adult.");
8. console.count()
- 功能：用來計算某個標籤被調用的次數。
- 使用時機：當你需要跟蹤某段程式碼被執行的次數時，可以方便地用來計數。
- 範例：
javascript console.count("Button clicked");
9. console.time() / console.timeEnd()
- 功能：用來計算某段程式碼的執行時間。
console.time()開始計時，console.timeEnd()結束計時並顯示耗時。 - 使用時機：當你想測量程式碼的執行效能或某個操作花費的時間時。
- 範例：
javascript console.time("dataProcessing"); processData(); console.timeEnd("dataProcessing");
10. console.group() / console.groupEnd()
- 功能：用來將多個
console輸出訊息分組顯示，形成一個可折疊的群組。console.groupEnd()用來結束群組。 - 使用時機：當你有相關聯的訊息需要組織在一起時，可以用來提高可讀性。
- 範例：
javascript console.group("User Details"); console.log("Name: Alice"); console.log("Age: 30"); console.groupEnd();
11. console.trace()
- 功能：顯示當前程式碼的堆疊追蹤（stack trace），可以顯示出這段程式碼是從哪裡被調用的。
- 使用時機：當你想要檢查某段程式碼的執行順序或想知道某個函數從哪裡被呼叫時。
- 範例：
javascript function test() { console.trace("Trace the function call"); } test();
12. console.clear()
- 功能：清除控制台中的所有訊息。
- 使用時機：當你需要清空過多的日誌或測試資料，保持控制台整潔時。
- 範例：
javascript console.clear();
總結：
- 使用
console.log()進行一般除錯或資訊輸出。 - 用
console.warn()和console.error()來顯示警告和錯誤訊息。 - 用
console.table()來清晰地顯示數據結構，console.dir()檢查物件。 - 利用
console.assert()進行條件驗證，用console.count()計數。 - 用
console.time()和console.timeEnd()來進行效能測試。
本文由 ChatGPT 生成
