Есть ли способ открыть локальный файл непосредственно на вкладке «Элементы> Стили» в Chrome devtools?

Question

Я использую функцию персистентности Chrome devtools с browser-sync и sass.

Я установил Workspace, указывающий на мою папку scss, и я могу редактировать файлы scss из Chrome, и все файлы css были созданы правильно, применены к браузеру в реальном времени и сохранены на жестком диске. Однако, когда я выбираю элемент на вкладке Elements > Styles и делаю некоторые изменения, измененный файл становится файлом http://localhost:3000..., поэтому изменения не сохраняются. Затем мне все еще нужно найти локальный файл на вкладке Sources, чтобы скопировать эти изменения.

Я не уверен, что это лучшее, что мы можем получить, но если бы мы могли либо открыть локальный файл непосредственно из вкладки Elements > Style вместо файла http://localhost:3000..., либо каким-либо образом автоматически скопировать любые изменения в http://localhost:3000... файл в локальный файл, рабочий процесс будет еще проще и быстрее.

Кто-нибудь знает, как этого добиться, даже используя какое-то приложение / расширение?

UPDATE:

Из ответа Rohit я обнаружил, что если я отключу css source maps в настройках devtools, то он будет правильно синхронизирован, показывая зеленый кружок на Elements > Style и сохранит мои изменения, хотя он все еще будет указывать на файл http://localhost:3000...style.css.
Однако тогда он только изменяет этот файл, но не конкретный файл partials/*.scss, и если я запускаю компилятор sass, он переопределяет css со старым кодом.
При css source maps на Chrome мой частичный scss находит правильно, но не показывает зеленый кружок, поэтому он не синхронизируется и не сохраняет изменений.

Кажется, проблема в синхронизации scss файлов вместо css.

Я пытался с помощью Workspace, указывающего на мою корневую папку scss, также пытался указать ее на непосредственном родителе файла, который был отредактирован и все еще не синхронизируется корректно.

Answer 1

Это выстрел в темноте, но, я полагаю, если вы добавите родительскую папку файлов, над которыми работаете, из Devtools> Вкладка «Источники»> вкладка «Файловая система»> «Добавить папку в рабочую область». Вот так :

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

Это означает, что он синхронизируется и будет обновляться без перехода на вкладку источников.

Answer 2

Добавление корня моего проекта в Workspace синхронизированные scss файлы правильно. Теперь, когда я щелкаю элемент на вкладке Element > Styles, Quick source открывает нужный файл с правым правилом scss, но не следит за моими изменениями на вкладке Element > Styles (как это происходит с использованием чистого css). и мне все еще нужно скопировать изменения в Quick source или отредактировать там напрямую, сохранить и дождаться компиляции sass, чтобы применить изменения на экране.

Рабочий процесс теперь стал намного проще, но я не выбираю его как правильный ответ, потому что он еще не "такой же живой, как css", и, возможно, кто-то знает, как сделать этот последний шаг.

PS: browser-sync не требуется в этой настройке, просто что-то для компиляции sass и Chrome автоматически применяет изменения.