Adam Kim

Front-end (mostly Angular) Developer

Categories
Tags
lesson-rust install routing error module language translate material animation guard ngtest jasmine karma protractor e2e input ngonchange subject observable rxjs subscribe subscription unsubscribe resolve component pwa maintenance offline interface enum update lazyloading document compodoc form formgroup initializer factory formcontrol custom validation library package ssr seo universal platform location svg webworker viewchild console time sparkline chart directive nvd3 ng2-nvd3 import types definition typescript query heroku deploy replace yield electron storage window match ngfor trackby bubbling changedetection ngzone xsrf csrf protection ssg scully ngx-translate rehydrate ngif decorator debounce throttle dynamic ngcomponentoutlet createcomponent tooltip modal keyvalue pipe class getter setter chrome tool nullish coalescing operator websocket json highcharts domaanitizer unload beforeunload routeroutlet provider useexisting useclass instanceof typeof keyof in casting ngdoc contextmenu standalone webcomponent template nativefederation manifest maints inject ondestroy afterrender afternextrender keycloak module-federation signal controlflow nodejs githubmodels gpt async github controlvalueaccessor forms reactiveforms
and more...

Angular Devtool in Chrome DevTools

1 분 소요

This article explores how to add and utilize the Angular tab within Chrome’s Developer Tools (DevTools).

Adding the Angular Tab to Chrome DevTools

Follow these steps to integrate the Angular tab into your Chrome DevTools:

  • Navigate to the Chrome Web Store and search for “Angular DevTools.” Alternatively, click on the Angular DevTools link directly.
  • Click “Install” to complete the installation process. Upon successful installation, the button label will change to “Remove from Chrome.”
  • After opening a new Chrome window or restarting Chrome, you will find the Angular tab integrated within your Chrome DevTools panel.

Using Angular DevTools

Let’s examine the prerequisites and usage of Angular DevTools.

Prerequisites

Angular DevTools is specifically designed to analyze applications developed using the Angular framework. Note the following requirements for proper functionality:

  • It exclusively supports Angular-based applications.
  • It necessitates Angular version 9 or later with Ivy enabled.
  • Analysis is limited to development (or dev) environments. Projects built for production are not supported.

Usage Instructions

The left panel displays a component hierarchy. Clicking on a component reveals its corresponding template. The right panel showcases the component’s properties:

  • Input and Output variables
  • Component variables
  • Variables from services utilized by the component

A key advantage of this tool is its ability to inspect properties linked to services, as well as state management variables. This allows developers to directly observe the current values of these variables.

Another significant benefit is real-time value reflection. For example, if a variable stores values that change every second, Angular DevTools reflects these changes instantaneously.

By readily visualizing the variables associated with each component, developers can significantly reduce their reliance on console-based debugging.

For comprehensive information, refer to the official Angular documentation.

Resources

댓글남기기

참고

[javascript] How to prototyping with the Github AI models

2 분 소요

Github Models 는 GitHub의 AI 및 머신 러닝 모델을 쉽게 관리하고 배포할 수 있도록 돕는 기능입니다. GitHub에서 제공하는 모델 저장소나 API를 통해 개발자는 자신만의 머신 러닝 모델을 관리하거나 다른 사람이 만든 모델을 활용할 수 있습니다. 이러한 모델...