web-dev-qa-db-ja.com

Firefox DevToolsには、Chrome DevToolsにはない、またはその逆の、どのような独自の機能がありますか？

Firebugが消えつつある 、Firefoxユーザーは Firefox Developer Toolsに切り替えるように求められる 。

したがって、Firefox DevToolsには、Chrome DevToolsでは提供されていない機能はありますか？

この質問に対する客観的な答えを教えてください。

google-chromefirefoxgoogle-chrome-devtoolsfirefox-developer-tools
11
Sebastian Zartner

docs から：

DOMプロパティビューアページのDOMプロパティ、関数などを検査します（オブジェクトのプロパティは通常Chromeのコンソールに表示されないことに気付くでしょう。コンソールの「document.body」を見て、body.innerHTMLが存在することを知ることは決してありません。）

開発者ツールバー開発者ツールのコマンドラインインターフェイス。

シェーダーエディタWebGLで使用される頂点シェーダーとフラグメントシェーダーを表示および編集します。

Web Audio Editorオーディオコンテキストでオーディオノードのグラフを調べ、それらのパラメータを変更します。

スクリーンショットを撮るページ全体または単一の要素のスクリーンショットを撮ります。

設定パネルのいくつかの追加ツール：

  • ページの一部を測定する

  • スクラッチパッド

ネットワークパネルには、各ネットワークリクエストの原因のスタックトレースが表示されます。Chromeネットワークリクエストのコンソールログを調べて、それを見つけて展開する必要があります。また、 xhr応答がhtmlで返された場合の、実際のプレビュー（[プレビュー]タブ内）。

そしておそらく最も便利なのは、インスペクターが（ev）イベントリスナーを含むすべての要素の横に、イベントリスナーを追加するすべてのものの直接リストを表示することです。 （右側のChromeのイベントタブリストよりも優れています。）

6
NoBugs

Firefox DevTools

私が見る限り、Firefox開発ツール（Firefox 54.0.1以降）には、Chrome開発ツール（Chrome 59.0以降）よりも多くのニッチな機能があります。おそらくかなり少数の人々によって使用される非常に特殊なツール。これらの特別なツールに加えて、Firefox開発ツールにはChrome開発ツールに欠けているいくつかのコア機能もあります。

さまざまな機能は次のとおりです。

  • キャンバスエディター
  • Webオーディオエディタ
  • シェーダーエディター
  • 開発者ツールバー（GCLI）（ 削除されます ）
  • スクラッチパッド
  • DOMインスペクター
  • ページルーラー
  • スクリーンショットツール
  • フォントインスペクター
  • グリッドインスペクター
  • ページの一部を測定する
  • Firebugテーマ（取得 Firefox 61で削除 ）
  • Iframeを切り替える
  • ブラウザUIをデバッグするためのツール
  • 個々のネットワーク要求のセキュリティ情報
  • ネットワークキャッシングの比較

Chrome DevTools

Chrome DevTools（Chrome 59.0以降）には、標準ツールに関するより多くの機能があり、他のニッチツールを提供します。

これらの機能は次のとおりです。

  • DOMおよびXHRブレークポイント
  • イベントリスナーパネル
  • プロパティパネル
  • セキュリティインスペクター
  • 監査
  • デバイスエミュレーションでのタッチシミュレーションとピクセル密度
  • ソースパネルでのライブ編集
  • ワークスペース
  • ネットワーク要求のブロック
  • 高度なメモリツール
  • マニフェスト、サービスワーカー、アプリケーションキャッシュインスペクター
  • スクロールパフォーマンスの問題の蛍光ペン
  • 1秒あたりのフレーム数
  • CSSメディアエミュレーション
  • グローバルファイル検索
  • コードカバレッジアナライザー
  • ジオロケーション、方向、およびタッチエミュレーション
  • CSSスタイルのローカルオーバーライド

また、それらは多くの小さな機能とその設定が異なります。

3
Sebastian Zartner