知っておくべき10の便利なFirefox開発者ツール

Firefoxが「開発者のブラウザ」であることには、私たちの作業を容易にするのに役立つ多くの優れたツールがあります。あなたはFirefox開発者用ツールのWebページでそのツールコレクションに関する詳細を見つけることができますそしてまたテストされているより多くの機能とツールを持っている彼らのDeveloper Editionブラウザを試すことができます.

この記事のために、私はリストにしました 10個の便利な道具 あなたはその開発者ツールコレクションから好きかもしれません。また、これらのツールがGIFでできることと、クイックリファレンスのためにそれらにアクセスする方法についても説明しました。.

1.水平定規と垂直定規を表示する

Firefoxはそれを支配するツールを持っています 水平定規と垂直定規の両方をピクセル単位で表示 ページ上。このツールは、ページ全体に要素を配置するのに便利です。.

メニューから定規にアクセスするには、次のURLにアクセスしてください。 開発者 > 開発者ツールバー （ショートカット：Shift + F2）。ツールバーがページ下部に表示されたら、次のように入力します。 定規 を押して入る.

これを開発者ツールウィンドウに表示するには、「ツールボックスオプション」に進みます。 [利用可能なツールボックスボタン]セクションで、[]をクリックします。ページの定規を切り替える"チェックボックス.

2. CSSセレクタを使ってスクリーンショットを撮る

Firefoxのツールバーでは全ページまたは目に見える部分のスクリーンショットを撮ることができますが、私の考えではCSSセレクター方式がキャプチャーにはもっと便利です。 個々の要素のスクリーンショット と同様に マウスオーバー時に表示される要素 のみ（メニューのように）.

メニューからスクリーンショットを撮るには、☰>に進みます。 開発者 > 開発者ツールバー （ショートカットShift + F2）。ツールバーがページ下部に表示されたら、次のように入力します。 スクリーンショット--selector any_unique_css_selector を押して入る.

これを開発者用ツールウィンドウに表示するには、[ツールボックスオプション]をクリックし、[利用可能なツールボックスボタン]セクションの下の[]をクリックします。フルスクリーンショットを撮る」 チェックボックス.

Webページから色を選ぶ

Firefoxには、「スポイト」という名前のカラーピッカーツールが組み込まれています。メニューから「スポイトツール」にアクセスするには、☰>に進みます。 開発者 > スポイト.

これを開発者用ツールウィンドウに表示するには、[ツールボックスオプション]をクリックし、[利用可能なツールボックスボタン]セクションをクリックします。ページから色をつかむ"チェックボックス.

4. 3Dでページレイアウトを見る

Webページを3Dで表示すると、レイアウトの問題に役立ちます。 3Dビューでは、さまざまなレイヤー要素をより明確に見ることができます。 Webページを3Dで表示するには、[3D表示]ツールボタンをクリックします。.

これを開発ツールウィンドウに表示するには、[ツールボックスオプション]をクリックし、[利用可能なツールボックスボタン]セクションの下にある[ツールボックス]チェックボックスをオンにします。3Dビュー"チェックボックス.

5.ブラウザのスタイルを見る

ブラウザスタイルは、ブラウザがすべての要素に割り当てるデフォルトスタイルと、ブラウザ固有のスタイル（ブラウザプレフィックス付きのスタイル）の2つのタイプで構成されています。ブラウザのスタイルを見てみることであなたはできるようになるでしょう スタイルシートの上書き問題を診断する そしてまた、既存のブラウザ特有のスタイルを知るようになります。 .

メニューから「ブラウザスタイル」にアクセスするには、☰>に進みます。 開発者 > 検査官. 次に、右側の[計算済み]タブをクリックし、[ブラウザスタイル]チェックボックスをオンにします。.

また開くことができます」検査官"ショートカットCtrl + Shift + Cを押してから"ブラウザスタイル "にアクセス.

6.現在のセッションでJavaScriptを無効にする

ベストプラクティスとスクリーンリーダーの互換性のために、その機能がJavaScriptが無効な環境で妨げられないような方法で任意のWebサイトをコーディングすることを常にお勧めします。そのような環境をテストするには、 作業中のセッションのJavaScriptを無効にする.

現在のセッションでJavaScriptを無効にするには、[ツールボックスオプション]をクリックし、[詳細設定]セクションの下にある[JavaScriptを無効にする* "チェックボックス.

7.ページからCSSスタイルを隠す

JavaScriptと同じように、アクセシビリティの問題から、次のようにWebサイトを設計するのが最善です。 ページはスタイルがなくても読みやすいはずです. ページがスタイルなしでどのように見えるかを見るには、開発者ツールでそれらを無効にすることができます。.

Webページに適用されているCSSスタイル（インライン、内部、外部）を削除するには、 リストされたスタイルシートの目のシンボルをクリックしてください [スタイルエディタ]タブをクリックします。もう一度クリックすると元の表示に戻ります.

メニューから「スタイルエディタ」にアクセスするには、☰>に進みます。 開発者 > スタイルエディタ （ショートカット：Shift + F7.

8.リクエストに対するHTMLコンテンツの応答をプレビューする

Firefox開発者ツールには、次のオプションがあります。 HTMLコンテンツタイプのレスポンスをプレビューする. これは開発者が302リダイレクトをプレビューし、レスポンスに機密情報がレンダリングされているかどうかを確認するのに役立ちます。.

メニューから「プレビュー」にアクセスするには、☰>に進みます。 開発者 > ネットワーク （ショートカット：Ctrl + Shift +Q。それから選択したウェブページを開くか現在のページをリロードしてください。 希望のリクエスト（HTMLレスポンス付き） リクエストのリストから「プレビュー"右側のタブ.

9.さまざまな画面サイズでWebページをプレビューする

Webページの応答性をテストするには、「レスポンシブデザインビュー」を使用します。 開発者 > レスポンシブデザインビュー またはショートカットキー：Ctrl + Shift + M.

[レスポンシブデザインモード]ツールボタンを表示するには、[ツールボックスオプション]をクリックし、[利用可能なツールボックスボタン]セクションの下の[レスポンシブデザインモード]チェックボックスをオンにします。.

10.ページ上でJavaScriptを実行する

どのWebページでも簡単にJavaScriptを実行するには、Firefoxの「スクラッチパッド」ツールを使用してください。メニューから「スクラッチパッド」にアクセスするには、にアクセスしてください。 ☰> 開発者 > スクラッチパッド またはキーボードショートカットのShift + F4を使用.

「スクラッチパッド」ツールボタンを開発者ツールウィンドウにすばやく表示するには、「クリック」ツールボックスのオプション「そしてその下」利用可能なツールボックスボタン「スクラッチパッド」セクションをチェック チェックボックス.