Як зберегти зміни CSS на панелі Стилі Інструментів для розробників Chrome?


195

Як зберегти зміни CSS з панелі Стилі в Google Chrome Інструменти розробника ?

На веб-сайті інструменту зазначається, що ми можемо побачити всі зміни на панелі ресурсів

введіть тут опис зображення

Але я працюю локально над файлом CSS, але зміни не відображаються на панелі "Ресурси"

введіть тут опис зображення

введіть тут опис зображення

До речі, чи знаєте ви будь-які додатки та інструменти для збереження змін CSS в інструментах для розробників Chrome? Я знаю, що для Firebug є багато https://stackoverflow.com/search?q=firebug+CSS+changes+save


Зараз існує API для розширень DevTools для отримання сповіщень про змінені ресурси, тож ви можете створити розширення, яке інтегруватиметься з обраним вами IDE, або просто розмістити вміст ресурсу на сервері WebDAV: developer.chrome.com/extensions/ …
caseq

9
Я вважаю, що це питання та його відповіді застаріли, оскільки Chrome з тих пір перемістив свою функціональну функцію, що зберігає модифікований CSS, на панель "Джерела" . Функціональність досить заплутаним, і в деякій мірі вводить в оману: я досліджував цей модифікований-CSS економії функціональність Chrome в деяких деталях пов'язаної з переповненням стека пост: stackoverflow.com/questions/16005435 / ...
ChaseMoskal


Локальні заміщення - це новий спосіб зробити це, починаючи з Chrome 65. Переопределення - це інша особливість, ніж робочі простори.
Kayce Basques

Відповіді:


137

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

  • Перейдіть на панель "Джерела" Інструментів для розробників, клацніть правою кнопкою миші на лівій панелі (де перераховані файли) та виберіть " Додати папку в робочу область" . Ви можете швидко дістатись до таблиці стилів на панелі "Джерела", натиснувши таблицю стилів у верхньому правому куті кожного правила CSS для вибраного елемента на панелі "Елементи".

введіть тут опис зображення

  • Після додавання папки вам доведеться надати Chrome доступ до папки. Дозволити доступ до хрому

  • Далі потрібно зіставити мережевий ресурс на локальний ресурс.

введіть тут опис зображення

  • Після перезавантаження сторінки Chrome тепер завантажує локальні ресурси для відображених файлів. Щоб зробити це простішим, Chrome показує лише локальні ресурси (тому ви не заплутаєтесь у тому, чи редагуєте ви локальний чи мережевий ресурс). Щоб зберегти зміни, натисніть CTRL + Sпід час редагування файлу.

пс

Можливо, вам доведеться відкрити відображені файли і почати редагування, щоб Chrome застосував локальну версію (дата 201604.12).


4
Я хочу лише додати внизу таблиці стилів моєї теми, незалежно від CSS, який я придумав під час редагування в реальному часі свого CSS. Це воно. Чи є спосіб створити "diff", це CSS, який я можу скопіювати та вставити? Дивіться це інше питання: stackoverflow.com/questions/21871535/… Основна історія полягає в тому, що я редагую CSS, що належить до теми, я можу додавати CSS лише внизу таблиці таблиць стилів, а не редагувати нічого вище. Це ж стосується, якщо хтось може додати на веб-сайт custom.css лише його скасування CSS.
Caroline Schnapp

paul-irish, Цікавить, як зробити diff / patch лише локальними змінами CSS (без віддалених змін). SaveAs не дуже вирішує проблему гнучкості та прискорення ...
Денис Денисов

Тепер Chrome зберігає локальні файли автоматично (без натискання CTRL + S), як цього не допустити?
Uzair Ali

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

2
У інспектора Chrome 46, здається, є помилка, що при перезавантаженні сторінки відображений локальний файл повторно застосовується лише при зміні його на панелі "Джерела". Ви навіть можете змінити його у зовнішньому редакторі, але вам потрібно відкрити та зосередити його на панелі "Джерела".
хрусткий

30

Тут відстоюють розробник технологій DevTools і розробник.

Починаючи з Chrome 65, Local Overrides - це новий, легкий спосіб зробити це. Це відрізняється від Workpaces.

Налаштування скасування

  1. Перейдіть на панель " Джерела ".
  2. Перейдіть на вкладку Перекриття .
  3. Клацніть Вибрати папку для відміни .
  4. Виберіть каталог, в який ви хочете зберегти свої зміни.
  5. Угорі вікна перегляду натисніть Дозволити, щоб надати DevTools доступ для читання та запису в каталог.
  6. Внесіть зміни. У GIF, наведеному нижче, ви бачите, що background:rosybrownзміни зберігаються через завантаження сторінки.

перекриває демо

Як працюють перекриття

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

Різниця між переопределеннями та робочими просторами

Робочі простори призначені для використання DevTools як IDE. Він відображає ваш код сховища до мережевого коду, використовуючи вихідні карти. Справжня користь полягає в тому, що якщо ви мінімізуєте свій код або використовуєте код, який потрібно отримати, наприклад SCSS, то зміни, які ви вносите в DevTools (зазвичай), повертаються у ваш вихідний вихідний код. З іншого боку, скасування дозволяє вам змінювати та зберігати будь-який файл в Інтернеті. Це гарне рішення, якщо ви просто хочете швидко експериментувати зі змінами та зберегти ці зміни під час завантаження сторінки.


5
це працює, але це все ще занадто складно. Я вважаю за краще, якщо ви можете ввімкнути це лише для поточної сесії. IMHO, прапорець типу "Зберігати зміни ресурсу для поточного сеансу" краще впишеться в робочий процес веб-розробників. Постійні зміни - це не те, що веб-розробник потребує у своєму щоденному бізнесі і навіть може викликати додатковий головний біль, якщо ви забудете видалити ці відміни та повернутися через кілька тижнів. Відміни штрафу для кінцевих користувачів - не для налагодження. Все ще підтримується.

Я погоджуюся з іншим коментарем. Це зовсім не інтуїтивно, і це не врятує всіх змін, тому не дуже корисно. Нам краще було б просто написати невелике хромоване розширення, слухаючи будь-які зміни та зберегти їх. Ось якщо є API чи процес, на який ми можемо підключитися ... ще не шукали цього.
Carles Alcolea

Вибачте, сер більше не припиняється і не розвивається? посилайтесь на stackoverflow.com/a/57622797/10189759
Luk Aron

@Kayce Basques, що робити з розширенням хрому? Коли ви вводите таблиці стилів (і js), всі ці функції не працюють, правда? Будь-яке рішення для такого типу розробок (для прискорення оновлень css / js від інструментів хромованого розробника до локальних файлів розширення). Спасибі
Андрій

19

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

Дивіться: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/


Я думаю, що ОП хоче побачити зміни, які він вніс на вкладці «Стилі» на панелі «Елементи». Ці зміни не обов'язково прив'язуються до конкретного вихідного файлу.
Рон Інбар

13

Я знаю, що це стара публікація, але я зберігаю її таким чином:

  1. Перейдіть до області "Джерела".
  2. Клацніть Показати навігатор (щоб показати панель навігатора зліва).введіть тут опис зображення
  3. Клацніть потрібний файл CSS. (Він відкриється в редакторі, з усіма внесеними вами змінами)
  4. Клацніть правою кнопкою миші на редакторі та збережіть зміни.

Ви також можете переглянути локальні зміни, щоб побачити свої зміни, дуже цікава функція. Також працюйте зі сценаріями.


Не вдалося знайти "Показати Навігатор"
NickyLarson

@NickyLarson, я змінив свою відповідь, щоб вказати, де ця кнопка.
Гільгерме де Ісус Сантос

Прочитайте ще раз оригінальне запитання. Він не редагує файл CSS. Він вносить зміни на вкладку Стилі на панелі «Елементи».
Рон Інбар

11

Ви шукаєте в неправильному розділі "Ресурси".

Це не під "Місцевим сховищем", а під "Рамами":

На наведеному вище знімку екрана показано різницю оригінальних стилів проти нових модифікацій, внесених у розробники. Ви можете клацнути правою кнопкою миші елемент на лівій панелі та зберегти його на диску.


Нічого в кадрі теж для мене. Я додав ще один скріншот, про який йдеться,
Джітндра Вяс

Я не впевнений, як ваші "Кадри" можуть бути порожніми. Це звучить ламано. Спробуйте це в збірці Canary (ви можете встановити його поряд із поточною версією): tools.google.com/dlpage/chromesxs
тридцять дот

Канар не вдається відкрити. Я також знайшов це рішення justin.my/2011/04/why-my-google-chrome-canary-cannot-run, але воно все ще не працює. Я отримав це повідомлення, коли встановлення закінчено k.min.us/iefbE2.jpg
Vyas

2
Станом на ці вихідні (21.05.2012) це рішення більше не працює, я вважаю. Я робив те саме, що ви показуєте, щоб писати великі фрагменти нового css (не старого чи редагування). Але тепер, принаймні, для мене при натисканні на цей HTML-файл відображається лише необроблений HTML, не показуючи нові правила CSS. Це все ще працює для вас, і якщо ви не маєте нового рішення для цього?
Нуклеон

це не працює для мене ні в Chrome 48. У будь-якому разі все-таки це робити?
DMTintner

10

Розширення Tincr Chrome простіше встановити (не потрібно запускати сервер вузлів), а також поставляється з функцією LiveReload, як функціональність! Поговоріть про двонаправлене редагування! :)

Веб-сайт Tin.cr

Посилання веб-магазину Chrome

Стаття в блозі Енді


Інструменти з відкритим кодом, такі як браузерync.io, значно кращі, підтримують усі сучасні браузери та надають набагато більше
Gianfranco P.

8

Тепер, коли минулого тижня було випущено Chrome 18 із необхідними API, я опублікував своє розширення з хрому у веб-магазині Chrome. Розширення автоматично зберігає зміни в CSS або JS в інструментах Developer на локальному диску. Іди перевірити.


4

FYI, Якщо ви використовуєте вбудовані стилі або змінюєте DOM безпосередньо (наприклад, додаючи елемент), робочі простори не вирішують цю проблему. Це тому, що DOM живе в пам'яті, і немає фактичного файлу, пов'язаного з активним станом DOM.

Для цього я люблю робити знімок "до" і "після" з консолі: copy(document.getElementsByTagName('html')[0].outerHTML)

Потім я розміщую його у різному інструменті, щоб побачити зміни.

Різне зображення інструменту

Повна стаття: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a


1

Щоб відповісти на останню частину запитання про будь-які розширення, які можуть зберігати зміни, є виправлення

Це дозволяє зберегти зміни з Інструментів Chrome Dev безпосередньо на GitHub. Звідти на GitHub ви можете налаштувати гачок після отримання, щоб автоматично оновити ваш веб-сайт.


1

Поки ви не вставляєте CSS у element.style:

  1. Перейдіть до доданого вами стилю. Повинно бути посилання із таблицею стилів інспектора:

введіть тут опис зображення

  1. Натисніть на це, і він відкриє всі CSS, які ви додали на панелі джерел

  2. Скопіюйте та вставте - так!

Якщо ви вже використовували element.style:

Ви можете просто клацнути правою кнопкою миші елемент HTML, натиснути Редагувати як HTML, а потім скопіювати та вставити HTML зі стилями вбудованого тексту.


1
І якщо ви не зможете знайти таку таблицю стилів інспектора, тому що ви загубили пошук через dom, просто Ctrl + P (або CMD + P), поки DevTools зосереджений і почне писати "inspec" ... він з’явиться прямо, а потім просто введіть. i.imgur.com/WSWcbh8.png
Carles Alcolea

1

ОНОВЛЕННЯ 2019: Оскільки інші відповіді трохи застаріли, я додам тут оновлену. В останній версії немає необхідності поєднувати хромовану папку з файловою системою.

введіть тут опис зображення

Отже, припустимо, у мене на робочому столі є веб-папка, що містить файли HTML, CSS, JS, які я хочу оновити, коли вношу зміни в chrome: =

1) Вам знадобиться запущений локальний сервер, як вузол тощо, або ж розширення vscode створює сервер для вас: розширення VSCode живого сервера , встановіть його, запустіть сервер.

2) завантажте сторінку html у chrome із запущеного локального сервера.

3) Відкрийте devTools-> Sources-> Filesystem-> Add folder to the робочу область

введіть тут опис зображення

4) Додайте папку, яка використовується для запуску локального сервера. Не потрібно додаткового картографування в останньому хромі! Та-да!

Детальніше про нього Редагування файлів із робочими просторами

Зауважте, що зміни, внесені на вкладку стилів, НЕ відображають файли файлової системи. Замість цього вам потрібно перейти до devtools-> source-> your_folder, а потім внести зміни та перезавантажити сторінку, щоб побачити ефект.
введіть тут опис зображення


1
Але ОП спеціально запитала про зміни, внесені на вкладці Стилі ...
Рон Інбар
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.