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

Question

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

我现在在做的是，

• 在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）
• 右键单击该文件，然后选择Map to network resource ...
• 将弹出一个列表，显示网页加载的完整或已过滤的文件列表
• 选择与所选本地文件对应的URL（例如http://localhost/project/css/styles.css）
• 当出现有关重新启动开发工具的警告时，单击“确定”

现在你可以：

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

Answer 2

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

在这里：http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

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