新しいMicrosoftEdgeの開発者ツール

Microsoftの新しいChromiumベースのブラウザは最近2回目の公開安定版リリースを行い、ARM64を完全にサポートするEdge 80と、Webコンテンツの構築と操作に役立つ改善されたツールを発表しました。現在のレガシーEdgeの以前のバージョンと同様に、Microsoftの新しいブラウザーは、ブラウザーに接続されているか、別のペインにある開発者ツールを起動するための使い慣れたF12ショートカットを保持しています。

従来のEdgeとの類似点はありますが、現在はChromiumの世界で作業しており、Chromeやその他のChromiumベースのブラウザーとの共通点がたくさんあるため、新しいものに慣れておく価値があります。それは悪いことではありません。ブラウザ間でスキルを伝達する方が簡単です。また、開発ブラウザとしてChromeを使用している場合は、新しいEdgeでの作業を簡単に開始できます。ただし、Microsoftは独自の変更をいくつか行っており、Edge開発者エクスペリエンスをVisual Studioコードに拡張して、単一の環境でJavaScriptアプリケーションを開発およびテストできるように取り組んでいます。

クロスプラットフォームの開発者エクスペリエンス

Windows 7とmacOSで利用可能な新しいEdgeと、開発中のLinuxバージョンでは、さまざまなプラットフォームで同じ開発ツールにアクセスできます。同じインスペクター、デバッガー、コンソールを使用できるため、どこで作業していても、使用しているOSに関係なく、同じテストを簡単に実行できます。Edge on Windowsに精通している開発者は、Mac開発者の助けを待たずに、コードをテストするためにMacに切り替えることができるはずです。

従来のEdgeと同様に、新しいChromiumベースのEdge開発ツールは、JavaScriptデバッガーと、JavaScriptの実行からのコンソールログ出力を表示するためのコンソールを使用して、サイト内のHTML、CSS、およびJavaScriptを調べるのに役立ちます。ツールを使用して、デバイスビューモードを追加するブラウザツールバーをすばやくオンにすると、開発用PCを離れることなくレスポンシブデザインをテストするオプションが提供されます。

Edge開発者ツールの使用

Edgeの開発者ツールは9つの異なるペインにあり、それぞれがWebアプリケーションに関するさまざまな洞察を提供します。最初の要素である要素ビューを使用する可能性が最も高くなります。

これにより、HTMLとCSSにドリルダウンし、ページ内のどの要素がコードのどのセクションによって生成されたかを示します。ブラウザウィンドウの要素をポイントすると、関連するコードが強調表示され、デバッグするHTMLまたはCSSを分離するのに役立ちます。1つのペインにHTMLが表示されます。もう1つは、現在適用されているスタイルと使用されているイベントリスナーとともに、現在のCSSを示しています。現在使用されているCSSルールと、無視されているCSSルールを確認できます。

[要素]ペインは、Visual Studio Code拡張機能としても使用でき、HTML編集と一緒にレイアウト検査を行うことができます。これは、コードの変更がページレイアウトにどのように影響するかをすばやく確認するのに便利な方法です。ブラウザインスタンスにコードを添付して、開いているHTMLドキュメントに直接アクセスすることもできます。

PWAの準備

より便利なツールの1つは、パフォーマンスパネルです。ここから、ブラウザのアクティビティを記録できます。テストシーケンスが完了すると、ツールのタイムラインを使用して、アプリが使用するリソースのプロファイルを作成できます。特にJavaScriptを多く使用している場合は、ネットワークツールおよびメモリツールと組み合わせて使用​​するのが最適です。 WebアプリをPWA(プログレッシブWebアプリケーション)として使用する場合は、Webアプリのパフォーマンスを理解することが特に重要です。ここで、アプリケーションパネルには、ローカルストレージやサービスワーカーなど、PWAの主要コンポーネントを調べるためのツールが追加されています。

Edgeを使用するとPWAの識別とインストールが簡単になるため、これらのツール、特に[アプリケーション]ペインを詳しく調べる価値があります。ダッシュボードのようなルックアンドフィールを使用すると、アプリケーションの内部で何が起こっているのか、ブラウザーの外部でどのように実行されるのかをすばやく詳しく調べることができます。アプリケーションツールを使用して、支払いハンドラーなどのEdgeの組み込みサービスがどのように機能しているかを調べることができます。

EdgeDevToolsでプラグインを使用する

Chromiumベースの開発者エクスペリエンスへの切り替えのもう1つの機能は、サードパーティのプラグインのサポートです。一部は、Edgeの独自のアドオンストアですでに利用可能です(ただし、現在はストアへのプライベートディープリンクを介してのみ利用できます)。より幅広い選択肢として、Edgeでサードパーティストアのサポートを有効にしている場合は、Chromeウェブストアのすべての拡張機能にアクセスできます。ここには、特定のJavaScriptフレームワークの集中的なサポートを追加したり、デバッグを支援したりするツールなど、たくさんあります。これらには、FacebookのReact、オープンソースのgRPC、GraphQL APIの操作を支援するツール、およびwebhintなどのリンターのサポートが含まれます。

Chromiumの開発者プラグイン仕様は公開されており、社内または全世界で使用できるように、誰でも独自の開発者ツールを作成して公開できます。Edgeのプラグインは他のChromiumブラウザーと共通の形式を共有しているため、同じプラグインを他のブラウザーストアから配信でき、ツール開発が簡素化されます。

開発者ツールに拡張機能を追加することは、ブラウザーに拡張機能を追加することに似ています。ストアに移動し、追加するツールをクリックして、ダウンロードしてインストールします。ブラウザにインストールされます。開発者ツールを開いて新しいタブを表示する前に、ブラウザメニューの拡張機能アイコンを非表示にすることをお勧めします。サイト上でwebhintを実行すると、一連の主要な指標が表示され、アクセシビリティなどの重要な機能やPWA機能のサポートに関するヒントが得られます。

カスタマイズがついにEdgeのツールの一部になるのを見るのは良いことです。私たちは皆異なるツールチェーンを使用しており、使用しているテクノロジーをサポートするために必要なものを提供することは、開発者にとって非常に使いやすいアプローチです。MicrosoftがブラウザをChromiumに切り替えることを発表したとき、その理由の1つは、開発者が必要なアプリケーションを構築するために必要な機能を提供することであったことを示していました。これは、HTML5、CSS、およびJavaScriptのブラウザーサポートを改善することだけを意味する可能性があるため、サポートされているすべてのOSにわたって、Chromium開発者ツールの全範囲をEdgeに導入することは歓迎すべき動きです。

Chromiumの開発者エクスペリエンスに対するMicrosoftの変更

Microsoftは、Chromium開発においてGoogleの比較的ジュニアパートナーであることを覚えておくことが重要です。それでも、プロジェクトに参加して以来、アクセシビリティ機能のサポートを追加して開発者ツールを可能な限り幅広いコミュニティで利用できるようにするなど、かなりの数の貢献を果たしてきました。スクリーンリーダーなどのツールのサポートを追加する約170の変更により、アクセシブルな開発者ツールがアクセシブルなWebアプリケーションおよびサービスの開発につながるため、ここで気に入っている点はたくさんあります。

追加の言語のサポートなど、その他の新機能は現在、Edgeの設定の実験的なフラグの背後に隠されています。この機能を有効にし、サポートされている10の言語のいずれかを使用している場合、開発者ツールのローカリゼーションはブラウザーのローカリゼーションと一致します。