通过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

我刚刚了解到它是可能的.以下是说明(或查看此页面以获取最新说明):

• 打开Chrome开发者工具
• 单击" 设置"图标(?开发工具右上角的图标)
• 单击" 工作区"选项卡
• 单击添加文件夹按钮,然后选择包含所需文件的本地文件夹(例如C:\www\project\)
• 如果出现警告,请单击" 允许"

下一步:

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

现在你可以:

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