ニュース

「Angular」公式の開発支援拡張「Angular DevTools」が公開～有志による日本語ガイドも

「Google Chrome」の開発者ツールを拡張し、「Angular」開発に必要な機能を追加

樽井秀人

2021年5月20日 14:45

「Angular」のコンポーネントツリーを可視化する「Angular DevTools」

　Web開発プラットフォーム「Angular」の公式ブラウザー拡張機能「Angular DevTools」が、5月18日に公開された。「Google Chrome」に対応しており、「Chrome Web Store」から無償でダウンロードできる。

　「Angular DevTools」は「Chrome」の開発者ツールを拡張し、「Angular」開発に必要な機能を追加したもの。初期リリースではコンポーネントツリーの可視化と変更を検出する仕組みを理解するためのプロファイラーにフォーカスして開発されている。利用の際は「Angular」v9以降と「Ivy」（「Angular」の新しいコンパイルとレンダリングのパイプライン）が必要となる。

「Angular DevTools」のプロファイラー

　「Angular」の開発を支援する拡張機能としてはすでに「Augury」が有名だが、この拡張機能は「Augury」のデベロッパーであるRangle.ioと共同で開発
されているという。今後のリリースではリクエストの多い機能から実装を進め、「Augury」との機能ギャップを埋めることに注力するとのこと。

　すでに有志による日本語ガイドブックも公開されているので、これから「Angular DevTools」の使い方を学びたい人は参考にするとよいだろう。

Angular DevToolsをさっそく使ってみたい人向けの日本語ガイドブックを書きました！DevToolsで何ができるかわかるのでぜひ読んでみてください！！https://t.co/dvE5W8OATR
— lacolaco / Suguru Inatomi (@laco2net)May 18, 2021