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
There is a feature in chrome which adresses this issue.
Here: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
you can read something about, how the network correspondes with your local machine and autosave the changes you make in chrome.
来源：https://stackoverflow.com/questions/24156474/update-source-file-when-css-is-changed-through-chrome-developer-tools