Где я могу добавить CSS на страницу, которую я просматриваю? Я не хочу добавлять стиль к одному элементу напрямую, я хочу добавить "документ" на страницу, чтобы отлаживать изменения перед редактированием сайта style.css.
Обратите внимание, здесь есть много вопросов о том, как "вводить CSS из расширения chrome", но я хочу сделать это с помощью "инструментов разработчика Chrome".
Это то, что вам нужно: "Как напрямую редактировать исходные файлы в Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/
Я не уверен, что это работает, но вам придется попробовать.
Нажав F12/(Cmd + opt + I на Mac), откройте консоль разработчика и перейдите на вкладку Консоль.
Скопируйте вставить следующий код (отредактируйте путь):
$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');
В качестве альтернативы вы можете отредактировать одно свойство, чтобы инспектор-stylesheet.css был создан Chrome и скопировал его через источник CSS.
Почему бы не создать такую простую фреймворк-агностик, как эта?
document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())
Кажется, работает как шарм...
Начнем с того, что это одна из причин, почему я использую Firefox для обучения и собственной разработки. Ответ встроен.
В качестве варианта вышеупомянутых ответов, используя современный JavaScript, вы можете добавить жестко запрограммированный стиль следующим образом:
document.head.insertAdjacentHTML('beforeend','<style> … </style>');
или вы можете добавить внешнюю таблицу стилей следующим образом:
document.head.insertAdjacentHTML('beforeend','<link rel="styleshet" href="…">');
Аргумент beforeend должен помочь внедренному CSS переопределить ранее загруженные стили.
Если вы собираетесь делать это несколько раз, вы можете добавить его в виде букмарклета, используя что-то вроде Bookmarklet Crunchinator.
Техника аналогична той, которую я преподаю в классе JavaScript, где я использую afterbegin, чтобы внедрить некоторые CSS по умолчанию, но позволяю таблицам стилей пользователя переопределять значения по умолчанию.
Это должно работать (вставлять в консоль, редактировать аргументы в последней строке по мере необходимости):
(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');
Есть несколько способов сделать это, и они также очень просты.
Первый способ, таблица стилей инспектора:
Открытый элемент проверки (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)
Перейдите в Редактор стилей, нажмите значок +, и вы сможете редактировать стиль; Вы также можете импортировать стили, просто щелкнув значок рядом с +.
Перейдите на вкладку источников в инструментах разработчика и щелкните правой кнопкой мыши в левом столбце, затем добавьте папку в рабочую область и используйте проводник, чтобы выбрать папку, в которой находится файл CSS. Вам нужно будет разрешить вносить изменения, после того, как вы это сделаете, вы увидите свою папку в дереве исходников (УБЕДИТЕСЬ, ЧТО ВЫ ВЫБИРАЕТЕ Вкладку FILESYSTEM ПОД Вкладкой ИСТОЧНИКИ), откройте вашу папку, найдите файл, щелкните правой кнопкой мыши на файле CSS и выберите сопоставить с сетевым ресурсом. После сопоставления файла вы можете открыть его и увидеть в рабочей области, и из этого файла любое внесенное изменение повлияет на стили страницы. Так что, в основном, ваши стили будут перебирать обслуживаемые стили.