Ответ 1

Поддержка Custom.css была удалена из Chrome в версии 32.
Этот ответ дает два способа легко активировать таблицы стилей в инструментах разработчика. Второй метод рекомендуется, но работает только для Chrome 33+, первый метод также работает для Chrome 32.

Оба метода - это расширения Chrome, чтобы использовать приведенные ниже примеры, выполните следующие действия:

• Создайте каталог и поместите в него следующие файлы.
• Перейдите к chrome://extensions
• Выберите "Режим разработчика"
• Нажмите "Загрузить распакованное расширение"
• Выберите каталог, который вы только что создали.

Истинная эмуляция Custom.css

В этом разделе используется один из двух методов, описанных в Как вставить javascript в сам Chrome DevTools. Это расширение можно легко обобщить, чтобы полностью эмулировать Custom.css, т.е. Активировать таблицу стилей на каждой странице, например 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, нажмите на значок шестеренки, перейдите к Experiments и установите флажок "Разрешить темы пользовательского интерфейса" ).

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

Ответ 2

В Chrome Store есть темы для разработчиков для 33 +

Откройте хром://флаги и включите эксперименты с инструментами разработчика. Откройте параметры инструментов разработчика, выберите вкладку "Эксперименты" и установите флажок "Разрешить настраиваемые темы пользовательского интерфейса". Установите любую тему, вы можете выполнить поиск темы devtools" в Интернет-магазине Chrome. Itll также будет поддерживать вас в актуальном состоянии.

ref

Ответ 3

В моем случае, мне все равно, о том, как использовать devtools как переопределение CSS на некоторых сайтах (a la greasemonkey). В соответствии с самим человеком (Paul Irish) рекомендуемая замена (по крайней мере для этого варианта использования) - расширение Chrome, называемое Control Freak. Я попробовал это, и он отлично подходит для одноразовых переопределений JS/CSS на сайт. Не уверен в себе, но он должен помочь людям просто искать базовую функциональность Custom.css, как и я.

Ответ 4

Я не мог понять все от Роба, но для меня

manifest.json

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

и css файл в той же папке сделали то, что я хотел. Как загрузить эту папку уже здесь.

Ответ 5

Как указано в ответе @Rob W: fooobar.com/questions/124984/..., официальный рекомендуемый метод скинирования инструментов Google Chrome Developer - это создание расширения для переопределения стилей по умолчанию которые применяются, используя chrome.devtools.panels.applyStyleSheet.

Процесс создания расширения Chrome для этой цели может быть немного утомительным для каждого компонента вручную с нуля, поэтому я создал небольшой плагин, который предоставляет коллекцию встроенных тем и дополнительные настройки редактора для Chrome Инструменты разработчика. Расширения также предоставляют разработчикам возможность создавать дополнительные пользовательские темы с помощью простой системы шаблонов Sass без написания собственного расширения.

• Установите DevTools Автор Расширение Chrome из Интернет-магазина Chrome.
• Включить эксперименты с инструментами разработчика в chrome://flags/# enable-devtools-experiment. Перезапустить Chrome для флаги вступят в силу.
• Открыть DevTools (cmd + opt + I); Настройки > Эксперименты > установите флажок Разрешить настраиваемые темы пользовательского интерфейса.

Это предоставит из коробки следующие функции:

• Возможность выбора из +25 пользовательских тем оформления
• Поддержка пользовательских шрифтов с помощью разрешенных системных шрифтов
• Инкрементный контроль размера шрифта, от 10px до 22px

Если вы хотите внести дополнительные темы, вы можете выполнить следующие шаги:

Прокрутите репозиторий GitHub, а затем выполните следующие действия. Расширение DevTools Author Chrome построено с использованием NodeJS и GruntJS.

Установка:

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

Разработка:

$ grunt serve

• После запуска grunt, чтобы установить расширение разработки в Chrome, откройте "Настройки" > "Дополнительные инструменты" > "Расширения" и нажмите кнопку Загрузить распакованные расширения.... (также включите Allow incognito ниже, если хотите).
  • (Отключить DevTools Author, если у вас есть расширение, установленное в интернет-магазине Chrome.)
  • Удостоверьтесь, что эксперименты с инструментами разработчика включены, и разрешены настраиваемые темы пользовательского интерфейса.
• Перезапустите DevTools. Я считаю, что самый быстрый способ увидеть изменения, которые влияют на это, - это разблокировать DevTools в отдельном окне, а затем открыть последующее окно DevTools (cmd + opt + I, в то время как текущее окно DevTools сфокусировано) после того, как изменения сохранены и хрюкает, перезагружает активы. Затем вам нужно будет перезагрузить (закрыть и снова открыть) последующее окно DevTools после внесения изменений.

• Сделайте копию одного из шаблонов из app/styles/themes/templates/ и переименуйте файл в название темы без подчеркивания, т.е. если ваша тема называется aloha, внутри app/styles/themes/, скопируйте templates/_theme-template.scss и переименуйте ее в aloha.scss
• Добавить значения цвета для палитры на основе переменных синтаксиса синтаксиса кода в вашем файле scss.
  • Если вам требуется более конкретный таргетинг для вашей темы, чем тот, который поддерживается из коробки, вы можете добавить эти стили в конец файла темы после @include styles().
• Добавьте объект цветовой палитры (массив имен и цветов) в themes.json в app/scripts/
• В DevTools выберите свою палитру тем в панели настроек автора.
• Предварительный просмотр и настройка цветов по мере необходимости. См. Разработка - Шаг 2.
• Зафиксируйте и нажмите свои изменения на свое репо, затем создайте запрос на перенос для своей новой темы, как только она будет готова!

Ответ 6

Я использовал инструкции для 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);
})();

Ответ 7

Разработчик mauricecruz сделал хороший инструмент для создания пользовательских тем Chrome DevTools.

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

Это намного проще, чем писать CSS файл (на мой взгляд).