web-dev-qa-db-ja.com

Google Chrome開発ツールのテーマをカスタマイズ/カラースキーム

Googleの開発者ツール、JavaScriptコンソールで配色を変更する方法Chrome？

このような：

enter image description here

javascriptcssgoogle-chrome-extensiongoogle-chrome-devtoolsgoogle-chrome-theme
34
Anton Dozortsev
  1. Zero Dark Matrix のようなDevToolsテーマをインストールします
  2. Goto chrome://flags/#enable-devtools-experiments、有効化Developer Tools experiments。
  3. 選択する Relaunch Nowページの下部。
  4. F12 開発者ツールを開くには、Settingsに移動し、Experimentsタブを選択して、Allow custom UI themes。
  5. F12、DevToolsをリロードします。
37
Jaskey

ダークテーマがDevToolsでネイティブにサポートされるようになりました： https://developers.google.com/web/updates/2016/02/devtools-digest-devtools-go-dark#a_dark_theme_for_devtools

enter image description here

27
Will

このスタックオーバーフローの回答に記載されているように、 https://stackoverflow.com/a/21210882/933951 、Googleのスキニングの公式推奨方法Chrome開発者ツール_chrome.devtools.panels.applyStyleSheet_を使用して、適用されるデフォルトのスタイルをオーバーライドする拡張機能を作成します。

この目的のためにChrome拡張機能を作成するプロセスは、各コンポーネントをゼロから手作業でスキンするのが少し面倒になる可能性があるため、組み込みテーマのコレクションを提供する小さなプラグインを作成しましたまた、Chrome開発者ツールの追加のエディター設定。拡張機能は、単純なSassテンプレートシステム独自の拡張機能を作成せずにを使用して追加のカスタムテーマを作成する機能も開発者に提供します。

  1. インストール DevTools Author Chrome= extension from Chrome Web Store
  2. Chrome：// flags /＃enable-devtools-experimentsで開発者ツールの実験を有効にします。再起動Chrome=フラグを有効にします。
  3. DevToolsを開きます（cmd + opt + I）; [設定]> [実験]> [カスタムUIテーマを許可する]をオンにします。

これにより、すぐに使用できる次の機能が提供されます。

  • +25のカスタムエディターテーマから選択する機能
  • 有効なシステムフォントによるカスタムフォントのサポート
  • 10pxから22pxまでのフォントサイズの増分制御

追加のテーマを提供したい場合は、以下の手順に従ってください：

GitHubリポジトリをフォーク し、以下の手順に従います。 Devtools AuthorChrome=拡張機能は NodeJS および GruntJS を使用して構築されます。

インストール：

_$ git clone [email protected]:micjamking/devtools-author.git
$ cd devtools-author
$ npm install
_

開発：

_$ grunt serve
_
  1. Gruntが実行されたら、Chromeに開発拡張機能をインストールするには、Settings> More Tools> Extensionsを開き、Load unpacked extension ...ボタンをクリックします。 （必要に応じて、以下で_Allow incognito_も有効にします）。
    • （Chrome Web Storeから拡張機能をインストールしている場合は、DevTools Authorを無効にします。）
    • 開発者ツールの実験が有効になっており、カスタムUIテーマが許可されていることを確認してください。
  2. DevToolsを再起動します。変更を有効にするには、別のウィンドウでDevToolsをドッキング解除し、変更が保存されてアセットを無理やりリロードした後、後続のDevToolsウィンドウ（現在のDevToolsウィンドウがフォーカスされているときに_cmd + opt + I_）を開くことが最速の方法だと思います。次に、変更を行った後、後続のDevToolsウィンドウをリロード（閉じてから再度開く）する必要があります。
  1. _app/styles/themes/templates/_からテンプレートのいずれかのコピーを作成し、ファイル名をテーマ名アンダースコアなしに変更します。テーマがalohaと呼ばれる場合、_app/styles/themes/_内で、_templates/_theme-template.scss_をコピーし、名前を_aloha.scss_に変更します。
  2. Scssファイルのコード構文ハイライター変数に基づいて、パレットの色の値を追加します。
    • すぐにサポートされているものよりもテーマの特定のターゲット設定が必要な場合は、@include styles()の後にテーマファイルの最後にそれらのスタイルを追加できます。
  3. カラーパレットオブジェクト（名前と色の配列）を_themes.json_の_app/scripts/_に追加します
  4. DevToolsのAuthor Settingsパネルでテーマパレットを選択します。
  5. 必要に応じて色をプレビューして調整します。 開発-ステップ2を参照してください。
  6. 変更をリポジトリにコミットしてプッシュし、新しいテーマの準備ができたら プルリクエスト を作成します！
8
micjamking

それはあなたのテーマに関連しています、ここを見てください： http://www.hongkiat.com/blog/chrome-devtools-theme/

または

http://devthemez.com/

5
pna

enter image description here

  1. open chrome browser
  2. f12キーを押します。開発者ツールウィンドウが画面に表示されるようになりました
  3. 設定を選択するか、F1を押します
  4. [選択]-> [設定]-> [外観]-> [テーマ]。
  5. ダークまたはライトを選択
3
Shijo Rs