Экспорт изменений CSS из инспектора (webkit, firebug и т. Д.)

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

Затем нетрудно принять эти изменения и применить их к файлу CSS, но было бы здорово, если бы я мог просто щелкнуть правой кнопкой мыши селектор в инспекторе и выбрать «экспорт» или «копировать», и содержимое будет доступно в моем буфер обмена.

Есть ли что-то подобное?

Я нашел ответ на этот вопрос, по крайней мере, в Chrome v14.

Находясь в разделе «Элементы», просто нажмите ссылку «filename: lnumber» рядом с правилами CSS. Появившийся файл CSS будет содержать все изменения.

Это место именно:

В Chrome вы можете щелкнуть правой кнопкой мыши файл CSS на вкладке «Источники» и выбрать «Локальные изменения».

Это показывает вам все ваши локальные изменения. Каждая ревизия имеет метку времени, и вы можете вернуться к любой предыдущей ревизии.

См. Разделы «Текущее редактирование» и «История изменений» этого руководства.

Firediff - это надстройка Firebug, которая отслеживает изменения, сделанные в Firebug. Он регистрирует все, что вы делаете на панели HTML (отлично), а также ваше краткое использование расширения панели инструментов веб-разработчика (не очень хорошо), скажем Shift-Ctrl-F, чтобы получить информацию о размере шрифта в пикселях.

Я видел расширение Firebug в Chrome, но не тестировал его, я использую Firediff с Firefox.

Я создал расширение Chrome, которое делает именно это.

Он называется StyleURL - он принимает все изменения CSS, которые вы сделали в Chrome Inspector, и выводит действительный CSS в качестве diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Вот пример, в котором я добавил на эту страницу «padding-bottom: 50px»:

Он с открытым исходным кодом и на GitHub тоже: https://github.com/Jarred-Sumner/styleurl-extension

В Chrome также есть вкладка « Изменения » в ящике консоли, на которой отображаются все модификации CSS. Это не экспорт, но, по крайней мере, очень удобно быстро понять, что изменилось.

Я предлагал этот продукт на SO раньше (я никак не связан с ними).

http://www.skybound.ca/

Отличный товар. Похоже, именно то, что вы ищете, и многое другое.

РЕДАКТИРОВАТЬ: В нескольких других ответах здесь упоминалась способность Google Chrome ссылаться на ваши локальные файлы (что очень-очень круто). Ознакомьтесь с другими ответами!

Если вы редактируете внешний CSS, вы можете перетащить его последнюю версию из панели «Ресурсы» в любой текстовый редактор, поддерживающий DnD (см. Http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , раздел «Сохранение изменений» для получения более подробной информации.) Вы также можете вернуть изменения CSS к любой более ранней версии ресурса таблицы стилей (во всплывающем меню правой кнопки мыши любой версии таблицы стилей).

Как упоминалось в Cloudworks, ответ на этот вопрос изменился. Теперь это может быть выполнено с помощью расширения Chrome DevTools Autosave . Этот инструмент отслеживает изменения CSS и JavaScript, сделанные в консоли Chrome Developer Tools, и сохраняет их обратно в локальные файлы. Инструкции по установке и настройке расширения см. В руководстве, написанном @addyosmani в его блоге здесь .

Также есть удобный скринкаст, в котором довольно подробно рассказывается о расширении.

С помощью Workspaces вы можете сохранять CSS по мере их ввода в инспекторе (в Chrome). Проблема в том, что каждое изменение автоматически сохраняется, и нет способа отключить эту функцию, как указано в http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ и Отключить автоматическое сохранение изменений CSS в Инструментах разработчика Chrome. .

И Firefox, и Chrome теперь поддерживают эту функцию, но стоит отметить, что на некоторых платформах, если не все Chrome не отображает ее по умолчанию, вам необходимо включить представление «Изменения», чтобы увидеть это (в моем Kubuntu Linux 20.04 этого не было по умолчанию), вот как вы можете включить его: перейдите к кнопке «Настройка и управление DevTools» на панели инструментов разработчика> «Дополнительные инструменты»> «Изменения» , после чего у кнопки появится вкладка:

В Firefox нет необходимости включать его, но если вы пришли из мира Chrom *, его может быть сложно найти. Просто проверьте последний раздел справа на вкладке «Инспектор»:

Если вы используете стандартные инструменты разработчика Firefox, вы можете редактировать CSS прямо в диалоговом окне инструментов - нажмите кнопку области просмотра CSS (это кнопка вверху с {}символом) и отредактируйте CSS напрямую. Он будет обновляться в браузере в реальном времени, и когда вы закончите, просто скопируйте и вставьте его прямо в свой файл css. Ницца!

Чтобы добавить ответ специально для Safari - это вроде возможно.

Когда вы редактируете CSS в разделе «Стили» в Инспекторе для существующего файла CSS, вы можете нажать, Cmd-Sчтобы повторно сохранить весь файл с изменениями. Однако, если вы используете метаязык, такой как Sass / препроцессор / генерируете свой CSS с объединением и т.д., я не думаю, что это действительно решает эту проблему, хотя это может быть возможно с исходными картами CSS.

Когда вы редактируете CSS в верхней части раздела «Стили», Style Attributeчтобы добавить встроенные стили (не привязанные к существующему файлу CSS), не представляется возможным легко экспортировать все эти изменения. На данный момент я просто вручную копирую и вставляю переопределения для каждого элемента.

Официальные документы Apple немного устарели, но их можно найти здесь: Учебное пособие по веб-инспектору - редактирование кода для изменения вашей веб-страницы .

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

Мой продукт LIVEditor, который скоро будет в бета- версии, делает именно это.

Чтобы вам было проще понять это, вы можете подумать, что инспектор Firebug встроен в ваш текстовый редактор.

Таким образом , вы не должны делать изменения вручную снова в редакторе кода после настройки его с помощью Firebug или WebKit в инструменты разработчика.