4

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 ?

Improve this question
2
  • You want chrome to edit your server side files? Commented Jun 11, 2014 at 7:27
  • 1
    @SalmanA No only local server files. Commented Jun 11, 2014 at 7:31

2 Answers 2

Reset to default
16

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
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Awesome Dude !! This is what i expected. 5 Star for you.
"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" How can we enabled that? This is not happening and it is annoying and I also can't find anything about this
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.