Angular/React/Vue開発を強力にサポートするデベロッパーツールの紹介

JavaScriptフレームワークのAngular/React/Vueは、コードを変換（トランスパイル）してピュアなHTML/JavaScript/CSS形式にします。そのため、書いているコードと実際にWebブラウザ上で動作するコードとが異なるものになります。ブラウザに搭載されたデフォルトの開発者ツールでは元のコードを見ることができず、デバッグで苦労している方も多いのではないでしょうか。

そこでインストールしたいのが、これらのフレームワークに対応した開発用Webブラウザ拡張機能です。多くはGoogle Chrome、そしてFirefoxに対応しています。

Angular

Angularの場合、Anguryという拡張機能が使えます。Google Chrome、Firefoxに対応しています。
この手の拡張機能は総じて、そのフレームワークを用いたWebサイトを表示すると使えるようになります。それ以外のサイトの場合には無効です。有効になると、開発者ツールにAnguryという項目が追加されます。

例えばAngularのチュートリアルであるヒーローアプリを開くと、コンポーネントの構造が可視化されています。

コンポーネントを選択するとプロパティが確認できます。ルーティング先のURLも分かります。

さらにコンポーネント同士の構造も分かります。特に複雑なWebアプリケーションでは役立つでしょう。

Stateも分かります。コンポーネントにどういったデータが送られてきているのかが分かります。このStateはAngury上で編集することもできます。

ルーターツリーです。どのコンポーネントにリンクが貼られているかが分かります。

モジュールの情報を確認することもできます。

AnguryはAngular開発時に必携と言えるくらい多機能で便利なソフトウェアです。コンポーネント構造やプロパティを閲覧するのが主な目的になりますが、値の編集もサポートされているので、一時的な表示の確認を行う目的でも利用できるでしょう。

React

Reactの場合は、Facebookが公式に出しているReact Developer Toolsが使えます。Google ChromeとFirefox、そしてElectronを使った単体アプリもあります。React Developer Toolsもまた、React以外のサイトでは有効になりません。

以下はTodoアプリで検証しているところです。HTMLではなくJSXが表示されているのが分かります。

エレメントを選択すれば、そのPropsやStateなども確認できます。

React Developer Toolsはデフォルトの開発者ツールにおけるHTMLエレメント表示に近いため、違和感なく使えます。そしてPropsやStateといったReact独自のデータも表示できます。データの編集機能などはないので、あくまでも各コンポーネントのレイヤーと、そこにデータが送られているかどうかを確認するためのツールと言えるでしょう。

Vue

Vueには、Vueコミュニティから公式にリリースされているVue.js devtoolsがあります。こちらもGoogle Chrome、FirefoxそしてElectronによる単体アプリがあります。

こちらはその画面です。

データの編集や、配列の削除もできます。

Vue.js devtoolsはあくまでもコンポーネントの表示に特化しているようで、HTMLのDOMツリーのように表示することはできませんでした。

クリックなどのイベントを記録しておいて、その際に渡されたデータ（ペイロード）を見ることができます。

Vue.js devtoolsは画面を細かくコンポーネント化している場合には階層構造が可視化されます。しかし通常のHTMLタグをそのまま使っている場合には難しいようです。Onsen UIなどのように細かくコンポーネントが定義されている場合は使いやすいツールと言えるでしょう。

Monaca IDEでの使い方

ではここからMonaca IDEでこの手の拡張機能を使う方法を解説します。注意点としては、今回紹介した拡張機能は、表示されているページがAngular/React/Vueで作られていると判断されなければ使えないということです。Monaca IDEでのプレビュー表示はiframeを使っているので、そのままでは拡張機能が動きません。

そこで、まずMonaca IDEでプレビューパネルを右クリックして「検証」を選択します。