通过Chrome开发人员工具更改CSS更改时更新style.css文件 [英] Update style.css file when CSS changes are made through Chrome developer tools
本文介绍了通过Chrome开发人员工具更改CSS更改时更新style.css文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用xampp作为我的本地服务器的PHP项目。我正在搜索一个工具来更新自动更新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.
我现在在做什么,
- 使用chrome(localhost / project)打开我的项目
- 右键单击并检查元素
-
- 更改css(让我们说改变h1标签的颜色)
- 复制这些并将其过渡到我的style.css
我想要做的是
- 我的项目在chrome(localhost / project)
- 右键单击并检查元素
- 更改css(让我们说改变h1标签的颜色)
- 在style.css中自动更新更改(更改h1标签的颜色)
- 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):
- 打开Chrome开发者工具
- 点击设置图标
- 点击工具栏右上角的齿轮图标 添加文件夹按钮,然后选择包含所需文件的本地文件夹(例如
- 如果出现警告,请点击允许
C:\www\project\
) - Open Chrome Developer Tools
- Click on Settings icon (the gear 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
下一步:
- 打开所需的网页(例如
http:// localhost / project /
) - 在开发工具中打开来源标签
- 如有必要,打开 Navigator 源标签,点击开发工具左上角左下角的左三角图标即可打开它)
- 向下滚动到列表底部,您会在其中找到早前添加的工作区文件夹
-
- 展开文件夹并找到所需的文件(例如
css / styles.css
) - 右键点击文件并选择映射到网络资源...
- 会弹出一个列表,显示网页加载的完整或过滤的文件列表
- 选择与所选本地文件对应的网址(例如
http://localhost/project/css/styles.css
) - 当出现关于重新启动开发工具的警告时,单击确定
- 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
现在您可以:
- 检查元素并编辑其CSS,更改将立即保存到本地文件
- 在源面板中编辑映射文件,更改将保存到本地
- 在Chrome最喜爱的编辑器中编辑映射文件;当您切换回Chrome时,系统会自动重新载入档案/自动更新样式。
这篇关于通过Chrome开发人员工具更改CSS更改时更新style.css文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文