web-dev-qa-db-ja.com

Firefox開発ツールで列サイズを変更する

Firefox開発ツールで列幅を変更することはできますか？どうすればいいですか？

列のエッジ（スクリーンショットのステータスなど）をポイントすると、サイズ変更ツールがないため、コンテンツ全体を表示できます。

Firefox Developer Tools columns

firefoxfirefox-developer-tools
34
Daniel Gadawski

Update：この機能はFirefox 67でデフォルトで利用可能になり有効になりました。無効にできます（are you crazy？） devtools.netmonitor.features.resizeColumnsフラグを使用します。

元の回答：おそらく列サイズを変更するオプションがないことをご存じでしょう（FF57以降）、唯一のオプションは非表示です/ showカラム。簡単です。どの列でもright-clickだけです。列のリストが表示され、それらを選択/選択解除できます。

しかし、それだけですか？！いいえ、CSS（開発ツールをハック）を使用して列のサイズを変更できます。手順は次のとおりです。

  1. 開発ツールを開きます（F12または...を使用）
  2. gearボタン、右上隅をクリックします

  3. 次の2つのオプションを確認してください。

    • Enable browser chrome and add-on debugging toolboxes
    • Enable remote debugging

  4. Ctrl+Shift+Alt+Iを押して、[セキュリティプロンプトで] OKをクリックして開きます Browser Toolbox

  5. 開いたブラウザツールボックスを使用してDev toolsを検査できるはずです
  6. CSSで遊ぶ（通常のWebページと同じ）
  7. カスタムCSSをuserChrome.cssファイルに保存します

userChrome.cssに関する詳細情報が必要な場合は、 serchrome.org に進んでください

userChrome.cssを作成/変更する手順は次のとおりです。

  • about:supportを開きます
  • Open Folderをクリックします（Profile Folder行）
  • chromeディレクトリを開く/作成する
  • userChrome.cssファイルを開く/作成する
  • 最初のセクションで言ったことをする

どのように機能するかを示すために、Network tabの列の1つの背景色を赤に変更します。

Example

そして、これは私のuserChrome.cssファイルの内容です（上記の例の場合）

.requests-list-file.requests-list-column {  
    background-color: red !important;
    color: #fff !important;
}

時間のためだけに!importantを使用しました。可能な場合は使用しないでください

43
Mehdi Dehghani

some最近の 機能リクエスト と その依存関係 の進展があるようですが、後者は2016年に作成されたため、 Firefoxがデフォルトで列のサイズ変更をサポートするまでにはまだ時間がかかると想定するのはかなり安全です。

それまでの間、ここにuserChrome.cssに追加したCSSを示します。

.requests-list-header-button {
    padding-inline-start: 0px !important;
    padding-inline-end: 0px !important;
}
.requests-list-method {
    min-width: 30px !important;
}
.requests-list-status {
    min-width: 40px !important;
}
.requests-list-file {
    min-width: 100px !important;
}

Fileカラムを拡大したかったのですが、StatusおよびMethod列は、単独で大きな改善を行いました。また、スタイルは、列ヘッダーからサイドパディングを削除して、テキストが…で切り捨てられるのを防ぎます。

デフォルト列のクラスは次のとおりです。

  • requests-list-status
  • requests-list-method
  • requests-list-file
  • requests-list-domain
  • requests-list-cause
  • requests-list-type
  • requests-list-transferred
  • requests-list-size
  • requests-list-waterfall

列幅を小さくしすぎると、配置が崩れる可能性があることに注意してください。 userChrome.cssの保存場所がわからない場合、または他の列のクラスを見つける必要がある場合は、 Mehdiの回答 を参照してください。

3
Dave S