Angularアプリの開発支援ツールAugury(Chrome拡張機能)

  • 今回はAngularでWEBアプリを開発する際に簡単に利用できるツールを紹介します

Auguryと は?

  • Angularの開発支援ツール
  • Google Chromeの拡張機能
  • Chromeをメインブラウザとして利用しているデベロッパーには必須とも言えるツール

できること

  • 標準のデベロッパーツールに以下の機能を追加できます
    • Componentの階層構造やプロパティ値の図示
    • ルーティング情報のグラフ化
    • import済みモジュール構成のリスト表示

導入方法

  • Chrome Webstoreにアクセス

  • “Chromeに追加”をClick

  • ブラウザの右上にAuguryの丸いアイコンが追加されます

利用方法

  • Angular APの起動

    • まずは以下のコマンドでAPの画面をChromeに表示しましょう
      1
      ng serve --open
  • F12キーで開発者ツールを起動

  • ブラウザの右側に表示される開発者ツールに追加されているAuguryタブを選択

  • “Component Tree”タブのInjection Graph

    • コンポーネントとサービスの依存関係をグラフ表示
      • 個人的に一番利用する機能です
  • “Router Tree”タブ

    • ルート構造をツリー表示
  • “NgModule”タブ
    • import済みのモジュール構成を確認可能

備考

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×