google-chrome - Chrome Devtools 不保存我在 CSS 源面板中所做的更改

Question

我的文件存储在本地；我改变了 .paragraph 的颜色来自 #FFF 的类(class)至 #97a4b4 ;我按 CTRL+S和 asterisk(*)我的 CSS 文件旁边消失了；

如果我按 F5在页面上并重新加载它，更改不会保存并且颜色返回到 #fff ;

这是一个错误吗？



相反，如果我在 Chrome devtools 的元素面板中编辑元素的宽度，我想将其保存在原始 *.php 中文件;

我怎样才能达到这个效果？

Answer 1

对于第 1 点

为了能够在 Chrome DevTools 中编辑(本地)源文件，需要:

1.将项目文件夹添加为工作区(DevTools - Settings - Workspace - Add folder)

2.通过在元素左侧面板中右键单击，将网络服务器提供的源文件映射到本地文件。

(这对我来说似乎有些多余，因为我打开的站点已经来自本地文件夹。)

更多关于这里的主题:
https://developers.google.com/web/tools/setup/setup-workflow

仍然缺少第 2 点的答案

通过在站点上选择所述项目，在 DOM 中编辑 html 并(以某种方式)保留更改，在 DOM 中找到该项目后，我需要一种在 Devtools 中编辑 html 的简单方法。
在我现在映射到 Sources 树中的 *.php 文件中缺少指向它的快速方法，所以我不必滚动年龄(并使用 CTRL+F)直到找到它；

这可以在我的文本编辑器中完成(缓慢的方式)，在 Chrome 之外，因此，映射本地文件夹对于这个工作流程来说是多余的。