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

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

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

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

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

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

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

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

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

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

пс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Веб-сайт Tin.cr

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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