Edgeの開発者ツールは、Chromeの開発者ツールと比較し?

このチュートリアルでは、Microsoft Edge 開発者ツールを学び、これらは多くの点でGoogle Chrome 開発者ツールに似ています。これらのツールを開いて効果的に利用する方法、および両ブラウザの開発ツールの違いを発見します。

要点

Edge 開発者ツールは、基本的な機能に関しては Chrome 開発者ツールとほぼ同じユーザーインターフェースを提供します。主な違いはユーザーインターフェースと一部の追加機能にあり、一方、コアツールとショートカットはほぼ同じままです。

ステップバイステップガイド

Edge 開発者ツールを開く方法にはさまざまなオプションがあります。 F12 キーを押す方法があります。 Mac を使用している場合は、Command + Option + I キーを使用できます。 Windows ユーザーは代わりに Control + Shift + I キーの組み合わせを使用できます。コンテキストメニュー経由で DevTools を開始するには、Web ページのヘッダーを右クリックして "検証" を選択します。

Edge 開発者ツールのインターフェースは、すでに Chrome 開発者ツールを使用している場合にはすぐに馴染みがあります。タブがあり、アイコンが若干異なり、上部のバーにある「プラス」記号を使用して追加ツールにアクセスできます。Chrome では、これらの追加ツールはメインメニューからアクセス可能でした。

新しいタブを Edge 開発者ツールに追加したい場合は、プラス記号をクリックするだけです。たとえば、アニメーションツールを追加することができます。これにより、タブバーのトップに表示され、Chrome 開発ツールと同様になります。

Edge-DevTools には、Chrome の「What's New」ページに似た、「Welcome」タブもあります。このタブで、DevTools の機能の概要を表示できます。これまでにカバーされていない便利なヒントやトリックを見つけるために、このタブを参照することをお勧めします。

Edge-DevTools の別の便利な機能は、タブバーを左側に移動できることです。これにより、タブを垂直に配置することができます。アイコンはツールチップとして表示され、スペースを節約し、ツール自体により多くのスペースを提供します。

デザインツール自体は、Chrome の設定と似たようなさまざまな設定で変更できます。展開メニュー、ドキュメント、アクティビティバーをカスタマイズできます。これにより、慣れ親しんだ作業環境を維持します。

Edge-Tools には、Chrome にはない Azure DevOps の追加シンボルがあります。これは Azure 環境で作業する開発者にとって特に便利です。

各タブにアクセスすると、両方のツールで構造や機能がほぼ同じであることに気付くでしょう。Chrome で使用しているスタイル、計算されたレイアウトなど、すべてを Edge でも使用できます。

ただし、機能更新はわずかに異なる場合があります。Chrome が新しい機能を追加すると、Edge ではその機能が若干遅れて利用可能になる可能性があるか、その逆もあります。したがって、定期的に、さまざまなツールに追加される新機能を確認することをお勧めします。

これにて、Edge 開発者ツールについて知っておくべきすべてです。Chrome 開発者ツールに慣れている場合は、Edge 開発ツールもすぐに使いこなせるでしょう。

まとめ

このチュートリアルで、Google Chrome と Microsoft Edge 開発者ツールの類似点と相違点を学びました。これにより、Web プロジェクトに効果的に取り組むためのツールを開く方法や利用可能な機能がわかりました。