本文介绍了通过Chrome开发人员工具更改CSS时更新源文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将xampp用作php项目的本地服务器。我正在寻找一种工具来自动更新css更改,这是我通过chrome inspect元素完成的。
现在我正在做的是,
$ b
- 在chrome(localhost / project)中打开我的项目
- 右键单击并检查元素
li>
- 更改css(可以说改变h1标签的颜色)
- 复制这些并将其过滤到我的style.css中
我想要做的是
下一步:
- 打开所需的网页(例如
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屋!