webdevqa.jp.net

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

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

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

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

11

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