web-dev-qa-db-ja.com

Firefox開発者ツールでコードのフォントサイズを大きくする

Firefox開発者ツールでコードフォントを増やす方法は？ズーム機能があることは知っていますが、コードに対してのみフォントサイズを設定したいです。

firefoxfont-sizefirefox-developer-tools
59
LDMdev

変更する必要があるuserChrome.css 下 ~/.mozilla/firefox/[profile-name]/chrome これとともに：

/*  Styles for Web developer tools */
@namespace url(http://www.w3.org/1999/xhtml);
.CodeMirror {
    font-family:    "Ubuntu Mono", monospace !important;
    font-size:      15pt !important;
}

結果は次のようになります。

firefox

これは、デバッガとスタイルエディタのみを変更します。 htmlインスペクターには別のセレクターがあります。それが何であるかまだわかりません。

15
Nan Zou
  1. Firefox開発者ツールを開く
  2. 押す Ctrl++ Unix/Winまたは Cmd++ Macで。

明確にするために、私は意味する + キー。あなたが保持する必要はありません Shift それをしながら。

154
John Karahalis

Firefoxを開き、about:support。 アプリケーションの基本セクションで、プロファイルディレクトリを選択しました-オープンディレクトリ。ファイルマネージャーが起動します。 chromeフォルダーがない場合は、作成します。その後、このchromeフォルダーに移動して、userChrome.cssファイルをテキストエディタで開き、次を追加します：.devtools-monospace {font-size: 12px!important;} セーブ。必ずFirefoxを再起動してください。

[〜＃〜] update [〜＃〜]：1つのことが気になった-while（Enterを押した後）実際に出力よりも少し小さいテキストをdevtoolsコンソールに入力します。同じにするには、対応するcssクラスのfont-sizeも変更する必要があります。クラス名がまだわからないので、設定するだけです

* { font-size: 12px !important; }グローバルに動作します。

12
daGo

確かに、前述のように、短い答えは cmd++。

しかし + キーボードでサインに直接アクセスできない場合があります（テンキー、ラップトップ、奇妙なレイアウトはありません）。
次にmajを押してアクセスする必要があります + たとえば、アメリカのキーボードレイアウト上の記号： maj+=。
残念ながら、開発ツールペインに的を絞っていても、 cmd+maj+= Webビューペインのフォントを増やしながら、 cmd+- 開発ツールペインのフォントを減らします。
そして、フォントサイズが読めないほど小さく、サイズを大きくすることのできないWebツールペインになります。

その後、@ Thalの答えは、一度開発ツールペインに焦点を当てると便利になります。 cmd+ 開発ツールのフォントサイズを元にリセットします。

@Timothy_Truckleが求めているような質問に答えたい場合、それらのいくつかを以下に示します（もちろん、開発ツールペインに焦点を当てています）。

  • uSキーボードレイアウトに切り替えて、 cmd+=
  • でキーボードレイアウトを見つける + 直接アクセスし、それに切り替えて、 cmd++

単純に押すのが難しいと思う人がいるかもしれない cmd++ または開発ツールペインに焦点を合わせるのが難しいと感じる人もいます（実際、開発ツールペインに焦点を当てていますが、結果はWebビューペインに焦点を当てているようです）。

8
loic.jaouen

devtools-monospaceクラスセレクターのスタイルを指定できます。これを行うには、MozillaプロファイルのchromeディレクトリでuserChrome.cssを編集し、必要なCSSプロパティを指定します。例えば：

.devtools-monospace {
    font-family: "Source Code Pro",monospace !important;
    font-size: 16px !important;
}

userChrome.cssは、Firefoxプロファイルのchromeフォルダーにある必要があります。フォルダーが存在しない場合は作成します。ブラウザを再起動すると、userChrome.cssがFirefox開発ツールのCSSをオーバーライドします。

Windows OSでプロファイルを見つけるには、「Strg + R」と入力して、次のように入力します。

%APPDATA%\Mozilla\Firefox\Profiles\
5
Joschi

Firefoxの一部の要素は、FirefoxプロファイルのchromeフォルダにあるserChrome.cssファイルでスタイル設定できます。
2018年の時点で、変更/作成〜/ .mozilla/firefox/[profile-name] /chrome/userChrome.css

@-moz-document url-prefix("chrome://devtools/content/") {
    * { font-size: 13px !important; }
}

次に、Firefoxを再起動します。

Mozillaフォーラムのソリューションはほぼ正しいです。 https://support.mozilla.org/en-US/questions/1198481

を使用して Ctrl+= または Cmd+= タブ名を含むウィンドウのすべての要素のフォントが増加したため、私にとっては理想的ではありませんでした。

.devtools-monospace { font-size: 13px !important;}を使用してもほとんど問題ありませんが、デバッガータブとネットワークタブには影響しません。

@bohag_bihuのソリューションを使用すると、アドレスバーやその他のテキスト入力に副作用がありました。

5
ovichiro

私は誤ってFirefox開発者ウィンドウのサイズを最小に変更しました（もう読むことさえできませんでした）、「CMD +」（mac）は私にとってはうまくいきませんでした、コンソールがフォーカスされていてもメインのWebページでのみ「CMD 0」を押すだけで、通常の状態に戻りました。他の誰かに代わる優れた方法になります;）

1
Thal

Johnが言ったように、devtoolsでフォントサイズを大きくする方法は、Webページで行うのと同じように、ctrl/cmd +を使用することです。実際、devtoolsはWebページです。 devtoolsフレームが最初にフォーカスされていることを確認する必要があります。

今のところ、コードのフォントサイズを大きくする方法しかありません。

1
pbrosset