Несмотря ни на что, не многие знают, как сохранить изменения стилей из консоли chrome. Об этом кратко сегодня и расскажем.

Вообще говоря, это стандартная возможность Chrome, доступная ещё с 11-го года, но малоизвестная и по сей день.

Chrome позволяет связать удаленный файл открытый в браузере с файлом в локальной файловой системе. И в него тут будут сохраняться все правки, внесенные в стили и html на странице через инспектор Chrome. Это здорово, особенно, если нужно сохранить правки, внесенные на скорую руку.

Итак, как сохранить изменения стилей из консоли chrome?

Это делается за 2 простых шага:

  • Откройте вкладу Sources инспектора chrome, кликните правой кнопкой мыши в левом поле, где выводится список файлов, и выбирите Add folder to workspace

  • После добавления папки нужно разрешить хрому работать с этой папкой

  • После этого нужно связать удаленный ресурс с локальным. Для этого выберем нужный файл (будь то html, css или js файл во вкладке Sources). Правый клик -> Map To file system resource…

 

Готово. После перезагрузки страницы, Chrome будет сам сохранять и синхронизировать все внесенные правки в локальный файл.

Подводные камни

Есть некоторая проблема с тем, в каком виде хром сохраняет измененные файлы. Они мягко говоря очень не приглядного вида. Никакого форматирования, всё сжато и уменьшено, читать и работать с этим вообще не удобно. Более того, сохраняются все браузерные стили, в том числе и дефолтные для браузера, которых нет в исходном коде редактируемого сайта, что также привносит немного путаницы в результат. Но, как ни крути, это способ сохранить и не потерять наработки сделанные на скорую руку. После такой синхронизации можно привести код в чувства при помощи клинеров кода, и бьютифаеров. После чего вычленить дефолтные стили и оставить только актуальную версию кода, которая нам так нужна. Не очень удобно, зато работает без дополнительных примочек, которые кстати, тоже работают не очень хорошо.

Понравилась или помогла статья?
Купите мне кофеКупите мне кофе