Chrome DevTools无法保存我在CSS Sources面板中所做的更改。

Question

我的文件是存储在本地的；我将 .paragraph 类的颜色从 #FFF 改为 #97a4b4 ；我按下 CTRL + S，然后 CSS 文件旁边的 星号(*) 消失；

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

这是一个 bug 吗？

相反，如果我在 Chrome 开发者工具的元素面板中编辑元素的宽度，我想把它保存在原始的 *.php 文件中；

我该如何继续实现这个效果？

- Johnny

---

我对网页一无所知，所以希望这个链接可以帮到你：https://dev59.com/Q2w15IYBdhLWcg3wFHtZ。或者你也可以参考这两个链接：https://productforums.google.com/forum/#!topic/chrome/UbmrXYETvU0 和 https://groups.google.com/forum/#!topic/google-chrome-developer-tools/rzPRvlgjE0w。 - boop_the_snoot

这个网页提供了一些与此相关的见解：https://developers.google.com/web/tools/setup/setup-workflow - Johnny

也可以参考这个链接：https://dev59.com/f37aa4cB1Zd3GeqPpmed?rq=1 - boop_the_snoot

Answer 1

对于第一点

要在Chrome DevTools中编辑（本地）源文件，需要执行以下操作：

1.将项目文件夹作为工作区添加（DevTools - 设置 - 工作区 - 添加文件夹）

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

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

有关此主题的更多信息： https://developers.google.com/web/tools/setup/setup-workflow

仍然缺少第二点的答案

在通过选择DOM中的项目找到该项后，在Devtools中轻松编辑HTML，并（以某种方式）保留更改，我需要一种简单的方法。 现在已将*.php文件映射到Sources树中，但我仍然需要缺少快速指向它的方法，以便不必滚动很长时间（并使用CTRL+F）才能找到它；

可以通过我的文本编辑器在Chrome之外以缓慢的方式完成此操作，因此映射的本地文件夹对于此工作流程是多余的。

- Johnny

---

关于＃2，在“元素”面板中进行的更改不会保存到您的工作区。请尝试从“资源”面板中的“代码编辑器”编辑文件。 - Kayce Basques

是的，我尝试过了，它可以工作； 需要找到一种快速从在Elements面板中找到的确切PHP行转到在Sources面板中存在的原始文件中的方法。 - Johnny

FYI，目前没有真正的“跳转到 Sources 面板中的这一行”快捷键，因为许多网站是通过JS填充DOM的。但如果有任何间接的快捷方式，我会再考虑一下... - Kayce Basques

你是否知道“跨所有来源搜索文本”的键盘快捷方式？在Mac上是Command+Option+F，在Windows / Linux上是Control+Shift+F。这将在抽屉中打开搜索选项卡。从这里，您可以将元素复制粘贴到搜索框中。这应该能够快速跳转到确切的行... - Kayce Basques