Search code examples
cssgoogle-chromegoogle-chrome-devtoolsinspect-element

Update source file when CSS is changed through Chrome developer tools

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 ?

Solution

  • 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