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

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

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

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

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

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

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

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

 

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

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

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