Когда я работаю с CSS, я часто тестирую в браузере - скажем, Chrome - щелкаю элемент правой кнопкой мыши, выбираю «Проверить элемент» и редактирую CSS прямо здесь. Использование клавиш со стрелками для изменения таких вещей, как поля и отступы, упрощает выравнивание.
Затем нетрудно принять эти изменения и применить их к файлу CSS, но было бы здорово, если бы я мог просто щелкнуть правой кнопкой мыши селектор в инспекторе и выбрать «экспорт» или «копировать», и содержимое будет доступно в моем буфер обмена.
Есть ли что-то подобное?
css
webkit
google-chrome-extension
web-inspector
на крючке
источник
источник
Ответы:
Я нашел ответ на этот вопрос, по крайней мере, в 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 в инструменты разработчика.
источник