通过Chrome开发人员工具更改CSS时更新源文件

Question

我正在使用xampp作为php项目的本地服务器。我正在寻找一种自动更新css更改的工具，我通过chrome inspect element完成了这项工作。

我现在正在做的是，

• 以chrome（localhost / project）
打开我的项目
• 右键单击并检查元素
• 更改css（让我们说改变h1标签的颜色）
• 复制并将其复制到我的style.css

我想做的是

• 以chrome（localhost / project）
打开我的项目
• 右键单击并检查元素
• 更改css（让我们说改变h1标签的颜色）
• 在style.css
中自动更新更改（更改h1标记的颜色）

是否有可用于实现此目的的工具或脚本？

Answer 1

我刚才知道这是可能的。以下是说明（或查看this page以获取最新说明）：

• 打开Chrome开发者工具
• 点击设置图标（开发工具右上角的⠇图标）
• 点击工作区标签
• 点击添加文件夹按钮，然后选择包含所需文件的本地文件夹（例如C:\www\project\）
• 如果出现警告，请点击允许

下一步：

• 打开所需的网页（例如http://localhost/project/）
• 打开开发工具
中的来源标签
• 如有必要，打开导航器面板（它是“源”选项卡中的左列，单击开发工具左上角正下方的左三角形图标将其打开）
• 向下滚动到列表底部，您可以在其中找到先前添加的工作区文件夹
• 展开文件夹并找到所需的文件（例如css/styles.css）
• 右键单击该文件，然后选择映射到网络资源...
• 将弹出一个列表，显示网页加载的完整或已过滤的文件列表
• 选择与所选本地文件相对应的网址（例如http://localhost/project/css/styles.css）
• 当出现有关重新启动开发工具的警告时，请单击确定

现在你可以：

• 检查元素并编辑其CSS，更改将立即保存到本地文件
• 在源面板中编辑映射文件，当保存文件时，更改将保存到本地文件
• 在Chrome之外的您喜欢的编辑器中编辑映射文件;当您切换回Chrome时，它会重新加载文件/自动更新样式

Answer 2

Chrome中有一个功能可以解决这个问题。

下面： http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

您可以阅读有关网络如何与本地计算机对应的信息，并自动保存您在Chrome中所做的更改。