Внедрить CSS с помощью инструмента разработчика chrome?

Где я могу добавить CSS на просматриваемую страницу? Я не хочу добавлять стиль к одному элементу напрямую, я хочу добавить "документ" на страницу для отладки изменений перед редактированием стиля сайта.CSS.

Обратите внимание, что здесь есть много вопросов о "впрыскивании CSS из расширения chrome", но конкретно я хочу сделать это с помощью "инструментов разработчика Chrome".

5 15
css google-chrome developer-tools

5 ответов:

Это то, что вам нужно?: "Как редактировать исходные файлы непосредственно в Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/

3

Я не уверен, что это сработает, но вы должны попробовать.

Нажатие F12/ (Cmd + опт + I на Mac), чтобы открыть консоль разработчика и перейти на вкладку консоль.

Скопируйте и вставьте следующий код (отредактируйте путь): 

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');

В качестве альтернативы можно отредактировать одно свойство так, чтобы инспектор-таблица стилей.css создается Chrome, и скопируйте туда ваш источник CSS.

25

Это должно работать (вставить в консоль, редактировать аргументы в последней строке по мере необходимости): 

(function(i,n,j,e,c,t,css){
  css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
  t.insertAdjacentElement('beforeend',css);})
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');

Это вставит a <link>

С href //fonts.googleapis.com/css?family=Roboto

Перед закрытием </head>

Если в документе, в который вы пытаетесь добавить css-файл, нет тега head, попробуйте body в качестве последнего аргумента: 

(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');
1

Почему не простая схема агностик один-лайнер такой?

document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('ref', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())

Похоже, работает как заклинание...

1

Перейдите на вкладку источники в инструментах разработки и щелкните правой кнопкой мыши в левом столбце, затем добавьте папку в рабочую область и с помощью проводника выберите папку, содержащую ваш css-файл. Вам нужно будет разрешить вносить изменения, как только вы это сделаете, вы увидите свою папку в дереве источников(убедитесь, что вы выбрали вкладку FILESYSTEM в разделе SOURCES TAB), откройте папку, найдите файл и щелкните правой кнопкой мыши на вашем css-файле и выберите map to network resource. После того, как вы сопоставите файл, вы можете открыть и увидеть его в рабочее пространство и из этого файла любое внесенное изменение повлияет на стили страниц. Так что в основном ваши стили будут более ездить обслуживаемых стилей.

0