Angular 的 console.log 函式

Muhammad Adil 2022年4月20日
Angular 的 console.log 函式

本文將討論 Angular console.log 的完整概念。

Angular 中的 console.log 函式

console.log 是一個 JavaScript 函式,用於將訊息記錄到開發者控制檯或瀏覽器控制檯到網頁。

此方法通過告知 Angular 開發人員有關錯誤、警告以及程式碼執行期間發生的情況來幫助他們。

它用於除錯 Angular 應用程式、識別效能問題以及解決第三方庫或其他依賴項的問題。

我們可以通過在任何瀏覽器上開啟開發人員工具並導航到控制檯選項卡來訪問此功能。我們也可以在 Android Studio 的 View > Tool Windows > Other > Console 中找到它。

console.log 訊息總是用時間戳、級別和括號內的訊息寫入。該訊息將取決於日誌的型別。

級別可以是以下之一。

  • Debug:這是出於除錯目的,應儘可能避免。
  • Error:發生執行時錯誤,將停止執行你的程式碼,直到你修復它。
  • Info:這是為了提供資訊,不會停止你的程式碼的執行。

在使用 console.log 編寫程式碼之前,我們必須首先通過在終端中鍵入以下命令來建立一個新的 Angular 專案。

ng new my-project
cd my-project
ng serve

接下來,我們開啟瀏覽器並轉到 http://localhost:4200/,在那裡我們將看到一個空白螢幕。

現在,讓我們在 Angular 中使用 console.log 編寫一些程式碼。

TypeScript 程式碼:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent{
    console = console;
}

HTML 程式碼:

<h2>Example of Angular Console log</h2>
<p>
    press F12 and then run the code
</p>

{{ console.error('It will show up an error') }}
{{ console.log('It will show up logging') }}

點選這裡檢視上面程式碼的演示。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook