DevTools Showdown EdgeのF12対Firefox対Chrome
Windows 10の新しいデフォルトブラウザであるMicrosoft Edgeの開発者ツールは、その前身であるInternet Explorer 11のF12 Dev Toolsと比較して、モダンなデザインといくつかの新機能を備えています。.
Microsoft Edgeの開発ツールが人気の競合他社（Mozilla FirefoxやGoogle Chromeなどの他の最新ブラウザの開発ツール）に匹敵するかどうかという問題は、当然多くの開発者の心の中で生じています。.
この記事では、この質問に答えてみて、EdgeのF12 Dev Toolsが本当に使う価値があるかどうかを考えます。その機能をFirefoxの開発者ツールやGoogle ChromeのDevToolsの機能と比較します。.
開発ツールを開く
F12を押すと、Firefoxの開発者ツール、Chromeの開発者ツール、Microsoft Edgeの開発者ツールF12の3つすべてのケースで開発者ツールが開きます。これはキーボードショートカットです。 EdgeのF12 Dev Toolsの正式名称 から来た.
EdgeのDev Toolsを開くと、最もよく知られている欠点の1つをすぐに経験できます。 ツールを既存のウィンドウに固定することは不可能. 開発者向けツールウィンドウを画面の一番下に固定することで、Firefox Developer ToolsとChrome DevToolsの画面上で何が起こっているのかを追跡できますが、（現在）Edgeで同じことはできません。.
Microsoftの開発者たちは、今後のアップデートでこの問題を解決すると主張している.
DOMを調べる
の DOMエクスプローラ tool（ショートカット：CTRL + 1）は、Microsoft EdgeのF12 Dev Toolsの最初のタブです。そのレイアウトと全体的なデザインは非常によく似ています 素子 Chromeのタブと 検査官 Firefoxのタブでは、機能が多少異なります.
Edgeでは、レンダリングされたHTMLドキュメント、関連するCSSスタイル、および各要素に登録されているイベントハンドラを見ることができます。あなたはすでに計算された値でCSSボックスモデルについての小さいグラフィックを見つけることができます、すでに2つの競合するブラウザから知られています.
あなたはできる CSSルールを試す 現在のものを削除して新しいものを追加することによって まとめられた変更 という別のサブタブで “変更点” （左側にあります）後者はFirefox DeveloperにもChrome DevToolsにも組み込まれていない機能です。それはユーザーに手短に要約することができるので、それは本当に便利なオプションです。.
Firefoxデベロッパーツールには、EdgeもGoogle Chromeも現在提供していない機能がいくつかありますが、デザイナーの生活を大きく向上させることができます。 フォントとアニメーションアナライザツール.
Edgeには クールカラーピッカー それはそれをユーザーにある程度補償するかもしれませんが.
JavaScriptと対話する
の コンソール Microsoft Edgeのタブ（ショートカット：CTRL + 2）を使用すると、FirefoxやChrome Dev Toolsの場合と同様に、サイトのJavaScriptと対話できます。 3つすべてを使用すると、JavaScriptエラーをリアルタイムで追跡できます。また、独自の入力を入力してそれらを分析することもできます。.
EdgeのF12 Dev Toolsのコンソールツールは素晴らしい オートコンプリート機能 それはあなたがコマンドを使うのを助けます、しかしそれはそうです あまり知識がない FirefoxおよびChrome Dev Toolsのものと比較して.
端 エラー、警告、メッセージを区切る 他の2つのツールキットにはないものではありませんが、これは大きな助けになります。.
Firefoxのコンソールは、3つの開発ツールの中でも最もプロフェッショナルなもののようです。 ネットワーク、CSS、セキュリティエラー、ロギングメッセージなど、他の種類の問題を別々に表示します。, そして、あなたがを通してこれらと対話することを可能にします コンソールインターフェース, JavaScriptエラーだけではありません.
あなたのコードが何をしているのか理解する
の デバッガ ツール（ショートカット：CTRL + 3）を使用すると、潜在的なバグを見つけながら、コードに何が起こっているのかを理解できます。ウォッチとブレークポイントを設定し、コールスタックを表示できます.
[ウォッチ]ウィンドウには変数値が表示され、[コールスタック]モードには現在の状態に至った一連の関数呼び出しが表示され、[ブレークポイント]モードには設定したブレークポイントの一覧が表示されます。.
EdgeのF12 Dev Toolsがあなたをさせてくれます コードを一時停止する 実行の途中で、それを1行ずつ進めます。また、 コンパイルまたは縮小されたJavaScriptファイルの読みやすさを向上させる, そして、次のことができます 異なるリソースをデバッグする （JavaScript、拡張機能など）一つずつ.
FirefoxとChrome DevToolsはこれらすべての機能を提供するため、Edgeは優れたデバッグ体験を提供しませんが、競合他社と同等の堅牢で信頼性の高いツールをユーザーに提供します。.
ブラウザとサーバー間の通信を見てください。
の ネットワーク ツール（ショートカット：CTRL + 4）は、Internet Explorer 11以降、Microsoft Edge用に完全に再設計されました。この便利なツールを使えば、次のことができます。 サーバーとブラウザ間の通信に従う, そして個々の要求を点検しなさい.
あなたはできる コンテンツタイプで結果を絞り込む スタイルシート、画像、メディア、フォント、XHR、その他多数。あなたもすることができます デバッグAJAX ネットワークツールの助けを借りて.
EdgeとFirefoxの[ネットワーク]タブには、非常によく似た機能とユーザーインターフェイスがあります。どちらも、選択したリソースのHTTPヘッダー、HTTPボディ、パラメータ、関連するCookie、およびタイミングを項目ごとに確認できる、使いやすいサイドバーペインを備えています。.
Chrome DevToolsの[ネットワーク]タブにはこのようなペインはありませんが、リクエストを1つずつクリックすると同じ情報が表示されます。それは直感的ではない解決策です.
遅いページを追跡する
の パフォーマンス タブ（ショートカット：CTRL + 5）は、遅いWebページの背後にある理由を理解するのに役立ちます。パフォーマンスツールを使用して、マイクロソフトは以前のものを組み合わせることで大きな飛躍を遂げました。 UIの応答性とプロファイラ すべてのスクリプトをエンドツーエンドで表示し、パフォーマンスを視覚化するためのツール.
この便利なツールはあなたにレポートを提供します さまざまな種類のCPU使用率, あなたのサイトのフレームペイントへの洞察をあなたに与えます、そしてそれはまた可能です タイムラインにラベルを設定して、さまざまなユーザーシナリオを分離する.
テストプロセス中に、Edgeのパフォーマンスツールから次のものが提供されていることがわかりました。 速度の問題に関する詳細情報 Firefox DeveloperまたはChrome DevToolsのどちらよりも。 Edgeの[パフォーマンス]タブのユーザーインターフェイスは非常によく設計されており、多くの視覚的な手がかりに役立ちます。また、比較的使いやすいです。使い方の詳細について知りたい場合は、詳細なDocsを読んでください。.
メモリの問題を診断する
の 記憶 ツール（ショートカット：CTRL + 6）で メモリリークを見つける それはまたあなたのWebページを遅くすることができます、さらにすることができます 安定性に影響を与える あなたのサイトの.
素敵なグラフを使うと、メモリ使用量が増加している場所を簡単に把握でき、メモリ使用量の分析を可能にする特定の時点でスナップショットを作成できます。あなたもすることができます 異なる時点で作成された2つのスナップショットを比較する それらの違いを理解するためのページライフサイクルの.
Chrome DevToolsにはProfilesタブの下に素晴らしいメモリプロファイラもありますが、Firefox Developerはデフォルトでこの機能を提供していませんが、望むならアドオンをダウンロードしてインストールすることができます。 Chrome DevToolsのメモリプロファイラは非常に高度で、Edgeよりも多くの機能を提供しています。 JavaScriptオブジェクトの割り当てを経時的に記録する それはあなたがメモリリークを隔離するのを助けることができます.
異なる画面サイズでサイトをテストする
の エミュレーション ツール（ショートカット：CTRL + 7）を使用すると、さまざまな状況下でサイトをテストできます。デスクトップとWindows 10 Mobileの2つのブラウザプロファイル、およびすべてのデスクトップおよびモバイルバージョンのInternet Explorer（IE 6まで）を含むさまざまなユーザーエージェント、Chrome、Firefox、Safariなどから選択できます。.
あなたが服用する選択肢があるのは面白いですね Bing Botとしてあなたのページを見てください. あなたもすることができます GPSをエミュレートする, と設定 異なる解像度と向き.
Firefox Developer Toolsにはデバイスエミュレーションツールはありませんが、Chrome DevToolsには非常に洗練されたエミュレータがあるため、Edgeと競合することはほとんどありません。.
たとえば、Chromeのエミュレーション画面には エミュレートビューが挿入される正確なグリッド, ブラウザのプロファイルやユーザーエージェントから選択できるだけでなく、 異なるバージョン iPhoneやサムスンギャラクシーと他の多くの。 Chrome DevToolsのエミュレータも便利です。 ズームオプション 3G、4G、DSL、WiFiなどのさまざまなネットワークでサイトをテストできます。.
概要
全体として、Microsoft EdgeのF12 Dev Toolsは驚くほど優れているようです。それは他の最近のブラウザのポピュラーなWeb開発ツールキットと非常によく似た機能を提供します。 EdgeのF12 Dev Toolsが非常に強い分野は2つあります。 ユーザーインターフェース それは本当に 直感的、ユーザーフレンドリー、そしてうまく設計された, そしてその 性能診断ツール.
これら2つの機能については、Edgeに切り替えるか、少なくともEdgeをテストすることを検討する価値があります。最大の欠点は、開発ツールを画面の下部に固定する可能性がないことですが、Microsoftがこの問題をすぐに解決することを願います。.
