フロントエンド開発者向けFirefoxの15のグラフィカルコマンドライン（GCLI）コマンド
手の込んだボタンやメニューがいくつあっても、高く評価するプログラマは常にいます コマンドラインアクセス 特に職場環境で 正しいボタンやメニューを探す手間が省けます それは私達の視線で必要な設定を表示します.
Firefoxには グラフィカルコマンドラインインタプリタ, または一言で言えば GCLI しばらくの間、そしてそのコマンドセットを時間の経過とともに拡張してきました。 GCLIコマンドは開発者に 開発および構成ツールへの素早いアクセス. それはまた持っています オートコンプリート機能;コマンドを入力しているときにTabキーを押すと、GCLIによって提案されたコマンドが入力されます。.
ツールバー
Firefoxの GCLI としても知られています 開発者ツールバー. がある 三つの方法 開くには
- Shift + F2キーボードショートカットを押す.
- クリック “メニューを開く” アドレスバーの右端（[ホーム]ボタンの右）にある（ハンバーガー）アイコンをクリックし、 開発者>開発者ツールバー サブメニュー.
- トップメニューバーで、 ツール> Web開発者>開発者ツールバー オプション.
開発者ツールバーが開いたら、それを見ることができます ブラウザウィンドウの下部に. 一緒に仕事をすることにした場合 GCLI, 作業中は常に開いておくことをお勧めします。.
それでは、Firefoxで実行できる便利なタスクをいくつか見てみましょう。 そのGCLIを使う.
1.ページ要素を削除する
コマンド： pagemod要素を削除する
Webページのレイアウトをもう一度見直す必要があるとき いくつかの要素を削除した, コマンドを入力するだけです pagemod要素を削除する ページからそれらの要素を削除するためにFirefoxのコマンドラインに入る.
の価値 .BTN, コマンドは次のように書かれています。 pagemod要素の削除a.btn.
通常、コマンド pagemod のために使用されます ページを修正する, 選択した要素または属性を削除または置換することによって.
測定要素
コマンド： 測定する
あなたがしたい場合は 測定値を知る Webページ上のどのビジュアルモジュールにも、そのためのツールがあります。の “測定する” このツールは、一般的なWeb開発者用ツールセットとGCLIの両方からアクセスできます。.
を入力して 測定する コマンドラインにコマンドを入力すると、カーソルが 十字線に変わる. 測定値は ピクセルで表示 十字カーソルの横にある 幅、高さ、対角長 選択されたエリアのツールを無効にする, を再実行 測定する コマンド.
3.ファイルを素早く編集する
コマンド： 編集する
開始 ページのリソースを編集する とともに 編集する コマンド。コマンドを入力している間、あなたは見るでしょう 利用可能なすべてのリソースのURI そのページから、上下の矢印キーを使って参照できます。編集したいリソースを選択したら、Tabキーを押して候補を自動補完し、Enterキーを押します。 ブラウザのエディタツール 選択したファイルで開きます.
4.なじみのないCSSプロパティを探す
コマンド： MDN CSS
これはとてもかっこいいコマンドです。 CSSプロパティのポップアップ辞書. なじみのないCSSプロパティに遭遇し、それが何を表しているのかをチェックしたい場合は、次のコマンドを実行してください。 MDN CSS GCLIで
ポップアップが表示されます とともに “定義” そのCSSプロパティの ツールバーの真上定義は 公式のMozilla Developer Network（MDN）ページからの抜粋 与えられた特性の。 CSSプロパティ、HTML要素、およびWeb APIに関するMDNの用語集が高く引用されています.
ポップアップに表示されるテキストが十分ではない場合、あなたは もっと知りたい, あなたはリンクをクリックすることができます MDNページにアクセス ポップアップ内で、そのプロパティのそれぞれのMDNページが開きます。今のところ、このコマンドはCSSプロパティに対してのみ利用可能です.
5.ページのサイズを変更する
コマンド： にサイズ変更
サイズ変更ツールを使用すると、ページの外観を確認できます 特定の寸法にリサイズ, 作業中のサイズとは異なるサイズのデバイスでページの外観をプレビューするときに便利です。.
Firefoxにもあります このツールを開くためのキーボードショートカット：Ctrl + Shift + M（Macの場合はCmd + Alt + M）。しかしあなたがすでに 正確な寸法を知る サイズ変更に使用するには、最も簡単な方法は リサイズ 必要な寸法でコマンド.
寸法は ピクセルで解釈. コマンドが実行されると、サイズ変更されたページが表示されます。.
6.ブラウザを再起動します
コマンド： 再起動
このコマンドは自明です。 Firefoxを再起動するには、単に入力してください 再起動 再起動が必要なアドオンやプラグインをインストールするときに便利です。.
7. Firefoxのプロファイルフォルダを開きます。
コマンド： フォルダopenprofile
すべてのFirefoxユーザーは自分の 自分のローカルプロファイルフォルダ それ ユーザ固有のファイルを保存します, ブックマークや /クロム フォルダ。 Firefoxをパーソナライズするときは、このフォルダの内容を表示および変更する必要があるかもしれません。.
このフォルダを開く別の方法は、フォルダの[フォルダを表示]ボタンをクリックすることです。 about：support ページ。コマンドを実行する フォルダopenprofile Firefoxのコマンドラインで、あなたはあなたのプロファイルフォルダを見るでしょう 一度に開く.
8.カラー値をコピーする
コマンド： スポイト
それがhexフォーマットだけをサポートするという事実以外に、スポイトツールは素晴らしいツールです。 カラー値をコピーする Webページに表示される色相コマンドを入力してください スポイト ツールの操作性を切り替えるGCLI.
9.外部ライブラリをテストする
コマンド： 注入する
あなたがしたい場合は いくつかの外部ライブラリをテストする 一時的な追加をするためにソースコードに飛び込むのではなく、あなたのWebページで 注入する に命令する ライブラリを挿入する. 例えば、jQueryをインクルードするには、ただタイプするだけです。 jQueryを注入する.
コマンドを実行すると、リソースは次のようになります。 ページにインポートされた を挿入することによって >
10.スクリーンショットを撮る
コマンド： スクリーンショット
の 内蔵のスクリーンショット撮影ツール Firefoxでは非常に強力です。例えば、CSSセレクターを使って個々の要素をターゲットにしたり、タイマーを使ったり、 DPR. あなたものスクリーンショットを撮ることができます ブラウザのクロム部分だけ （ユーザーコンテンツを囲む領域）を使用して スクリーンショット - chrome コマンド.
スクリーンショットは ダウンロードフォルダ ブラウザの PNG形式で.
11.支配者を開く
コマンド： 定規
GCLIを介して簡単にアクセスできるFirefoxのもう1つの優れたツールです。の 定規 コマンド 水平定規と垂直定規を表示する ページ周辺定規の寸法は ピクセル単位. 同じコマンドを実行して定規を無効にします.
12.コンソールとデバッガを開く
コマンド： コンソールオープン そして dbg open
キーボードが Webコンソールまたはデバッガツールを開く 気にしなくても大丈夫、単純なコマンドを入力するだけです。 コンソールオープン または dbg open Firefoxのコマンドラインにアクセスしてそれぞれのツールを開く.
13.ページ要素を数える
コマンド： qsa
GCLIからのこの気の利いたコマンドは、Webページ内の要素の簡単な調査を行います。 与えられたCSSセレクタにマッチ. たとえば、すべての数を取得する ページ上の要素は、 qsa a コマンド.
14.アドオンを有効または無効にする
コマンド： アドオンリスト
Firefoxアドオンの調査と管理が必要になった場合は、 アドオンメニューではなくGCLIコマンドを使用する GCLIバージョンにはすべてのアドオンとプラグインがリストされているため, プリインストールを含む, アドオンメニューに表示されないことがあります。.
次のコマンドでGCLIのアドオンステータスを切り替えることができます。 アドオン 関連するサブコマンドが続く 有効にする または 無効にする.
以下のデモであなたは見ることができます Pocketを素早く無効にする方法 Firefoxで.
15.設定を管理する
コマンド： ショー
のトンがあります カスタマイズ設定 ユーザーはFirefoxのを介してアクセスすることができます about：config ページ。 GCLIを使用しても同じ設定を表示および変更できます。.
カスタマイズ設定にアクセスするためのGCLIの使用は より速い選択 表示または変更したい設定がすでにわかっている場合に 設定値を設定する, 使用 設定セット コマンド、そしてto 設定をリセットする, タイプ 設定リセット .
以下のデモでは、どのようにすることができます URIを確認してください の jQueryを注入する コマンドがページに挿入されました（この記事のセクション9を参照）。
