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

Question

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

我现在做的是，

• 在 chrome (localhost/project) 中打开我的项目
• 右键单击并检查元素
• 改变css（比如说改变h1标签的颜色）
• 复制这些并将其粘贴到我的 style.css 中

我想做的是

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

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

Answer 1

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

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

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

Answer 2

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

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

下一步：

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

现在你可以：

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