Внедрить CSS с помощью инструмента для создания хрома?

Ответ 1

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

Ответ 2

Я не уверен, что это работает, но вам придется попробовать.

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

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

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

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

Ответ 3

Почему бы не создать такую простую фреймворк-агностик, как эта?

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

Кажется, работает как шарм...

Ответ 4

Начнем с того, что это одна из причин, почему я использую Firefox для обучения и собственной разработки. Ответ встроен.

В качестве варианта вышеупомянутых ответов, используя современный JavaScript, вы можете добавить жестко запрограммированный стиль следующим образом:

document.head.insertAdjacentHTML('beforeend','<style> … </style>');

или вы можете добавить внешнюю таблицу стилей следующим образом:

document.head.insertAdjacentHTML('beforeend','<link rel="styleshet" href="…">');

Аргумент beforeend должен помочь внедренному CSS переопределить ранее загруженные стили.

Если вы собираетесь делать это несколько раз, вы можете добавить его в виде букмарклета, используя что-то вроде Bookmarklet Crunchinator.

Техника аналогична той, которую я преподаю в классе JavaScript, где я использую afterbegin, чтобы внедрить некоторые CSS по умолчанию, но позволяю таблицам стилей пользователя переопределять значения по умолчанию.

Ответ 5

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

(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');

Вставьте <link>

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

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

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

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

Ответ 6

  Есть несколько способов сделать это, и они также очень просты.

Первый способ, таблица стилей инспектора:

Открытый элемент проверки (F12 или Ctrl + Shift + I)

Перейдите на вкладку Elements (Ctrl + Shift + P и введите show elements), если вы еще не там, см. Стили вкладка, теперь она видна в правом углу, будет значок +, щелкните его (или нажмите и удерживайте этот значок, если он не добавляет автоматически таблицу стилей инспектора), он добавит селектор рядом с выделенным в данный момент элементом, рядом с селектором, будет ссылка/кнопка инспектор-таблица стилей, щелкните по ней, и откроется окно, в котором вы можете добавить стили.

Второй способ: редактировать как HTML

Открытый элемент проверки (F12 или Ctrl + Shift + I)

Перейдите на панель элементов (Ctrl + Shift + p и введите показать панель элементов).

Прокрутите до элемента head правой кнопкой мыши на элементе и выберите Изменить как HTML, перейдите в конец этого элемента (Ctrl + End), добавьте свой <style></style> добавьте свой стиль в этот элемент и нажмите Ctrl + Enter.

Третий способ, фрагмент:

Открытый элемент проверки (F12 или Ctrl + Shift + I)

Перейдите на вкладку Source, перейдите на вкладку Snippets, нажмите + новый фрагмент, назовите его как хотите, и добавьте следующее:

Создать новый фрагмент Ctrl + тип Shift + P Создать новый фрагмент, нажмите Enter, переименуйте фрагмент, если хотите, и добавьте его (отредактируйте стиль):

(function(){
    let style = '<style>
/*change your style here*/
body{
        display:none;
    }
</style>';

document.head.insertAdjacentHTML("beforeend", style);
})();

Сохраните, запустите (Ctrl + Enter).

Вы также можете запустить сниппеты, выполнив следующее: Ctrl + p напечатайте !, там будут показаны ваши сохраненные фрагменты, выберите тот, который вы хотите запустить.

Чтобы отредактировать или просмотреть свои фрагменты, введите Ctrl + Shift + P показать фрагменты.

В FireFox это даже проще:

Открытый элемент проверки (F12)

Перейдите в Редактор стилей, нажмите значок +, и вы сможете редактировать стиль; Вы также можете импортировать стили, просто щелкнув значок рядом с +.

Ответ 7

Перейдите на вкладку источников в инструментах разработчика и щелкните правой кнопкой мыши в левом столбце, затем добавьте папку в рабочую область и используйте проводник, чтобы выбрать папку, в которой находится файл CSS. Вам нужно будет разрешить вносить изменения, после того, как вы это сделаете, вы увидите свою папку в дереве исходников (УБЕДИТЕСЬ, ЧТО ВЫ ВЫБИРАЕТЕ Вкладку FILESYSTEM ПОД Вкладкой ИСТОЧНИКИ), откройте вашу папку, найдите файл, щелкните правой кнопкой мыши на файле CSS и выберите сопоставить с сетевым ресурсом. После сопоставления файла вы можете открыть его и увидеть в рабочей области, и из этого файла любое внесенное изменение повлияет на стили страницы. Так что, в основном, ваши стили будут перебирать обслуживаемые стили.