Експортувати зміни CSS від інспектора (webkit, firebug тощо)

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

Потім не дуже важко взяти ці зміни та застосувати їх до файлу CSS, але було б здорово, якби я міг просто клацнути правою кнопкою миші на селекторі в інспекторі та вибрати "експортувати" чи "скопіювати" та мати вміст у моєму буфер обміну.

Чи існує щось подібне?

Я знайшов відповідь на це, принаймні, як на Chrome v14.

Перебуваючи в розділі "Елементи", просто натисніть на посилання "ім'я файлу: кількість ліній" поруч із правилами CSS. Файл CSS, який з'явиться, міститиме всі модифікації.

Саме це місце:

У Chrome ви можете клацнути правою кнопкою миші файл CSS на вкладці "Джерела" та натиснути "Місцеві зміни"

Це показує всі ваші місцеві зміни. Кожна редакція відмічається часом, і ви можете відкатати до будь-якої попередньої версії.

Дивіться розділ "Редагування та редагування в реальному часі " цього підручника.

Firediff - це доповнення Firebug, яке відстежує зміни, зроблені в Firebug. Він записує все, що ви будете робити на панелі HTML (чудово), а також коротке використання розширення Панелі інструментів веб-розробників (не настільки велике), скажімо, Shift-Ctrl-F для отримання інформації про розмір шрифту в px.

Я бачив розширення Firebug в Chrome, але не перевіряв його, я використовую Firediff з Firefox.

Я створив розширення для Chrome, яке робить саме це.

Він називається StyleURL - він приймає будь-які зміни CSS, які ви внесли в Chrome Inspector, і видає дійсний CSS як розріз: 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/

Відмінний продукт. Звучить саме те, що ви шукаєте, та багато іншого.

EDIT: Кілька інших відповідей тут згадували можливість Google Chrome посилатися на ваші локальні файли (що дуже здорово). Перевірте інші відповіді!

Якщо ви редагуєте зовнішній CSS, ви можете перетягнути останню версію з панелі ресурсів у будь-який текстовий редактор, що підтримує DnD (див. Http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , розділ "Зберігаються зміни" для більш детальної інформації.) Ви також можете відновити зміни CSS до будь-якої попередньої версії ресурсу таблиці стилів (у спливаючому меню правої кнопки миші будь-якої редакції таблиці стилів.)

Як згадували хмарні роботи, відповідь на це змінилася. Тепер це може бути досягнуто досить вдало за допомогою розширення Chrome DevTools Autosave . Цей інструмент відстежує зміни CSS та JavaScript, внесені в консоль Інструментів для розробників Chrome, і зберігає їх у локальних файлах. Інструкції щодо встановлення та налаштування розширення див. У посібнику, написаному @addyosmani у своєму блозі, тут .

Також є зручна трансляція, яка досить детально розширює розширення.

За допомогою робочих просторів ви можете зберегти свій 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-селекторах, але все, що ви пишете, буде в інспекторі-stylesheet.css

Мій швидкий бета-продукт LIVEditor робить це саме так.

Щоб ви зрозуміли це легко, ви можете подумати, що інспектор Firebug вбудований у ваш текстовий редактор.

Таким чином, вам не доведеться вносити зміни знову вручну в редактор коду після налаштування за допомогою інструментів для розробників Firebug або Webkit.