フロントエンド開発者向けFirefoxの15のグラフィカルコマンドライン(GCLI)コマンド
手の込んだボタンやメニューがいくつあっても、高く評価するプログラマは常にいます コマンドラインアクセス 特に職場環境で 正しいボタンやメニューを探す手間が省けます それは私達の視線で必要な設定を表示します.
Firefoxには グラフィカルコマンドラインインタプリタ, または一言で言えば GCLI しばらくの間、そしてそのコマンドセットを時間の経過とともに拡張してきました。 GCLIコマンドは開発者に 開発および構成ツールへの素早いアクセス. それはまた持っています オートコンプリート機能;コマンドを入力しているときにTabキーを押すと、GCLIによって提案されたコマンドが入力されます。.
ツールバー
Firefoxの GCLI としても知られています 開発者ツールバー. がある 三つの方法 開くには
- Shift + F2キーボードショートカットを押す.
- クリック “メニューを開く” アドレスバーの右端([ホーム]ボタンの右)にある(ハンバーガー)アイコンをクリックし、 開発者>開発者ツールバー サブメニュー.
- トップメニューバーで、 ツール> Web開発者>開発者ツールバー オプション.
開発者ツールバーが開いたら、それを見ることができます ブラウザウィンドウの下部に. 一緒に仕事をすることにした場合 GCLI, 作業中は常に開いておくことをお勧めします。.

それでは、Firefoxで実行できる便利なタスクをいくつか見てみましょう。 そのGCLIを使う.
1.ページ要素を削除する
コマンド: pagemod要素を削除する
Webページのレイアウトをもう一度見直す必要があるとき いくつかの要素を削除した, コマンドを入力するだけです pagemod要素を削除する
ページからそれらの要素を削除するためにFirefoxのコマンドラインに入る.
の価値
する必要があります ページ上の有効なCSSセレクター. たとえば、あるクラスでそのクラスのすべてのリンク(具体的に)を削除したいとします。 .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を注入する
.
コマンドを実行すると、リソースは次のようになります。 ページにインポートされた を挿入することによって >