通过Chrome开发人员工具更改CSS时更新源文件 [英] Update source file when CSS is changed through Chrome developer tools

问题描述

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

现在我正在做的是，
$ b

• 在chrome（localhost / project）中打开我的项目


• 右键单击并检查元素
li>

• 更改css（可以说改变h1标签的颜色）
  
• 复制这些并将其过滤到我的style.css中

我想要做的是

• 打开我的项目在铬（本地主机/项目）


• 右键单击并检查元素


• 更改css（可以说改变h1标记的颜色）
>

• 自动更新style.css中的变化（更改h1标签的颜色）
  
  
  

  是否有任何工具或脚本可以实现这一目标吗？

  解决方案

  我刚才了解到这是可能的。以下是说明（或查看 此页 获取最新指令）：
  
  $ ul
  

• 打开Chrome开发者工具


• 点击设置图标（开发工具右上角的⠇图标）


• 点击工作区选项卡


• 单击添加文件夹按钮并选择包含所需文件的本地文件夹（例如 C： \www\project\ ）


• 如果出现警告，请点击允许

下一步：

• 打开所需的网页（例如 http：// localhost / project / ）


• 打开开发工具中的 Sources
• 如果需要，打开导航器面板（它是来源标签中的左侧列，点击左侧三角形图标低于开发工具的左上角以打开它）


• 向下滚动到列表的底部，您将在其中找到之前添加的工作区文件夹


• 展开文件夹并找到所需的文件（例如 css / styles.css ）


• 右键单击文件并选择映射到网络资源...


• 选择与所选本地文件相对应的URL。
  
• 选择与所选本地文件相对应的URL （例如 http：//localhost/project/css/styles.css ）


• 当重新启动开发工具出现警告时，请点击确定

现在您可以：

检查一个元素并编辑它的CSS，所做的更改将立即保存到本地文件中

在源代码面板中编辑映射文件，更改将保存到本地当您保存文件

在您最喜爱的外部编辑器中编辑映射文件;当您切换回Chrome时，它会自动重新加载文件/更新样式

I'm using xampp as my local server for php projects. I'm searching for a tool to update css changes automatically which i done through chrome inspect element.

What i'm doing now is,

• Open my project in chrome (localhost/project)
• Right click and Inspect element
• change css (lets say change color of h1 tag)
• copy those and past it into my style.css

What i want to do is

• Open my project in chrome (localhost/project)
• Right click and Inspect element
• change css (lets say change color of h1 tag)
• auto update changes (change color of h1 tag) in style.css

Is there any tool or script available to achieve this ?

解决方案

I just learnt that it is possible. Here are the instructions (or view this page for up-to-date instructions):

• Open Chrome Developer Tools
• Click on Settings icon (the ⠇ icon at the top right corner of dev tools)
• Click on Workspace tab
• Click on Add folder button and choose the local folder that contains the desired files (e.g. C:\www\project\)
• If a warning appears, click Allow

Next step:

• Open the desired webpage (e.g. http://localhost/project/)
• Open the Sources tab in dev tools
• Open the Navigator panel if necessary (it is the left column in sources tab, click left triangle icon just below the top left corner of dev tools to open it)
• Scroll down to the bottom of the list where you will find the workspace folder added earlier
• Expand the folder and locate the desired file (e.g. css/styles.css)
• Right click on the file and choose Map to network resource...
• A list will popup that shows a complete or filtered list of files loaded by the webpage
• Choose the URL that corresponds to the selected local file (e.g. http://localhost/project/css/styles.css)
• When a warning appears about restarting dev tools, click OK

Now you can:

• Inspect an element and edit its CSS, the changes will be saved to local file immediately
• Edit a mapped file in source panel, the changes will be saved to local file when you Save the file
• Edit a mapped file in you favorite editor outside chrome; when you switch back to Chrome it will reload the file/update the styles automatically

这篇关于通过Chrome开发人员工具更改CSS时更新源文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！