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

Vin*_*ind 4 css google-chrome google-chrome-devtools inspect-element

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

我现在在做的是,

  • 在chrome(localhost/project)中打开我的项目
  • 右键单击并检查元素
  • 改变css(让我们说改变h1标签的颜色)
  • 将它们复制并传递给我的style.css

我想做的是

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

有没有可用于实现此目的的工具或脚本?

Sal*_*n A 14

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

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

下一步:

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

现在你可以:

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