Чтобы настроить в Chrome сначала, вы должны добавить свой файл проекта в «Рабочую область», перейдите в инструменты разработчика Ctrl + Shift + I, затем щелкните на настройке, а слева вы увидите Рабочую область.
После того, как вы добавили свою папку Project в рабочую область, закрыв ее из опций, и перейдите на вкладку «Источники» (все еще в инструментах dev)
Теперь загрузите свой index.html из своего LocalHost, как вы обычно будет. На панели источников вы увидите текущую загруженную страницу и ее ресурсы. Щелкните правой кнопкой мыши на своем .css-файле и выберите «Map to File System Resource». Появится окно поиска, в котором вы можете найти соответствующий .css-файл из вашей фактической папки проекта (теперь это часть рабочей области в Chrome). Как только вы сделаете ссылку, Chrome достаточно умен, чтобы связать любые другие файлы CSS и HTML, которые находятся в вашей папке проекта.
Теперь вы можете внести изменения на вкладке «Элементы» в инструментах Chrome Dev, и они будут сохраняться , Также на вкладке ELements он покажет вам, какой css-файл и какая строка имеет любой стиль, начиная с!
. Лучше всего в том, что если вы используете Sass или Less, тогда он отобразит ваши файлы Scss на стили CSS обрабатываются в Chrome. (обратите внимание, если вы используете Sass и Less, вам нужно включить исходные карты CSS)