web-dev-qa-db-ja.com

Custom.cssは32.0.1700.76 mで動作を停止しましたm Google Chrome update

このウェブサイトからGoogle Developer Toolsのいくつかのテーマを使用しています： http://devthemez.com/themes/chrome-developer-tools

ただし、32.0.1700.76 mの更新後、すべてのテーマが機能しなくなりました。

それらを再び機能させるにはどうすればよいですか？

css3google-chromegoogle-chrome-devtoolsdeveloper-tools
50
user3130064

Custom.cssのサポートは、バージョン32のChromeから削除されました。
この回答は、開発者ツールでスタイルシートを簡単に有効化するための2つの方法を提供します。 2番目の方法が推奨されますが、Chrome 33+でのみ機能し、最初の方法はChrome 32。

どちらの方法もChrome拡張機能です。以下の例を使用するには、次の手順に従います。

  1. ディレクトリを作成し、次のファイルをその中に配置します。
  2. chrome://extensionsに移動します
  3. 「開発者モード」を選択します
  4. 「展開された拡張機能をロードする」をクリックします
  5. 作成したディレクトリを選択します。

Custom.cssの真のエミュレーション

このセクションでは、 javascriptをChrome DevTools自体に挿入する方法 で説明されている2つの手法のいずれかを使用します。 Custom.cssのようなすべてのページのスタイルシート。
注：Chrome 33+）を使用している場合、この方法よりも次のセクションの方法を強くお勧めします。

manifest.json

{
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();

Custom.css

/* whatever you had in your Custom.css */

公式メソッド（Chrome 33+のみ）

Devtoolsスタイルをカスタマイズする場合は、chrome.devtools.panels.applyStyleSheetを使用する必要があります。現在、この機能はフラグ（--enable-devtools-experiments、Chromeの再起動が必要）とチェックボックス（フラグを有効にした後、devtoolsを開き、歯車アイコンをクリックし、[実験]に移動して[UIテーマを許可]をオン） 。

manifest.json

{
  "name": "<name> DevTools Theme",
  "version": "1",
  "devtools_page": "devtools.html",
  "manifest_version": 2
}

devtools.html

 <script src="devtools.js"></script>

devtools.js

var x = new XMLHttpRequest();
x.open('GET', 'Custom.css');
x.onload = function() {
    chrome.devtools.panels.applyStyleSheet(x.responseText);
};
x.send();

Custom.css

/* whatever you had in your Custom.css */

詳細については、 https://code.google.com/p/chromium/issues/detail?id=318566 をご覧ください。

62
Rob W

Chrome Store for 33+に開発者のテーマがあります

Chrome：// flagsを開き、開発者ツールの実験を有効にします。開発者ツールの設定を開き、[実験]タブを選択して、[カスタムUIテーマを許可]をオンにします。任意のテーマをインストールすると、Chrome=ウェブストアで「 devtools theme 」を検索できます。最新の状態も維持されます。

ref

19
Brian Ogden

私の場合、特定のサイト（グリースモンキーなど）でCSSをオーバーライドするほど、開発ツールのテーマ設定は気にしません。 According to The Man Himself（Paul Irish）推奨される代替品（少なくともそのユースケースの場合）は、Chrome extension called Control Freak 。試してみましたが、サイトごとに1回限りのJS/CSSオーバーライドに適しています。テーマ自体は定かではありませんが、基本的なCustom.css私の機能。

4
Brian Moeskau

ロブWのすべてを本当に理解することはできませんでしたが、私にとっては

manifest.json

{
  "name": "__something__",
  "version": "1",
  "content_scripts": [
    {
      "matches": ["__link_filter__"],
      "css": ["__filename__.css"]
    }
  ],
  "manifest_version": 2
}

そして、同じフォルダのcssファイルは私が望んだことをしました。このフォルダをロードする方法は、すでにここで回答されています。

4
Ravana

@Rob Wの回答で述べたように、 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 Author Chrome=拡張機能は NodeJS および GruntJS を使用して構築されます。

インストール：

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

開発：

_$ grunt serve
_
  1. Gruntが実行されたら、Chromeに開発拡張機能をインストールするために、設定> [その他のツール]> [拡張機能]を開き、Load unpacked extension ...ボタンをクリックします。 （必要に応じて、以下で_Allow incognito_も有効にします）。
    • （Chrome Webストアから拡張機能をインストールしている場合は、DevTools Authorを無効にします。）
    • 開発者ツールの実験が有効になっており、カスタムUIテーマが許可されていることを確認してください。
  2. DevToolsを再起動します。変更を有効にするには、別のウィンドウでDevToolsをドッキング解除し、変更が保存されてアセットを無理やりリロードした後、後続のDevToolsウィンドウ（現在のDevToolsウィンドウがフォーカスされている間に_cmd + opt + I_）を開くことが最速の方法だと思います。次に、変更を行った後、後続のDevToolsウィンドウをリロード（閉じてから再度開く）する必要があります。
  1. _app/styles/themes/templates/_からテンプレートの1つのコピーを作成し、ファイル名をテーマ名アンダースコアなしに変更します。テーマが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. 変更をリポジトリにコミットしてプッシュし、新しいテーマの準備ができたら プルリクエスト を作成します！
1
micjamking

開発者 mauricecruz は、カスタムChrome DevToolsテーマを作成するための素晴らしいツールを作成しました。

https://github.com/mauricecruz/zero-base-themes

CSSファイルを書くよりもずっと簡単です（私の意見では）。

0
GreenRaccoon23

Chrome 32の手順を使用しましたが、機能しませんでした。開発者ツールの色を反転させることが目標でした。ディレクトリを作成し、Custom.css、 Manifest.json、run_as_devtools.js。

Custon.css

#-webkit-web-inspector {
-webkit-filter: invert(1);
font-weight: bold !important;
}

manifest.json

{
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();
0
Jeffrey McFarland
  1. devtools ⌘ + option/alt + i
  2. 検索ツールを開きます⌘ + shift + p（このキーボードショートカットを実行する前に、必ずdevtoolsをクリックしてください）
  3. darkを検索すると、ダークテーマに切り替えるオプションが表示されます enter image description here

指示に従うこともできます here

0
Alex Cory