CODEWITHSUNDEEP
cssgoogle-chrome
Wei Zhang
Wei Zhang

Reputation: 41

Chrome Dev Tools (CSS) editing and saving

I need to change the color of some words in one category of the widget, I have seen the youtube video about Development Tools.

When I locate the part where I want to change, and I do the change in "Elements" (of Development tools) on the top right corner in the element.style {color:red; } but as following the video when I go to resources the changes I made is not there.

  1. I can only edit in Elements, I cant save it
  2. I can only save in Resources, I cant edit/add anything

can someone please help me how this dev tool suppose to work?

I can however edit/add AND save in the Sources, maybe I need to save the style sheet from Resources to Sources? is that what I am suppose to do?

Upvotes: 4

Views: 5123

Answers (3)

David Gilbertson
David Gilbertson

Reputation: 4853

An updated answer as of March 2013, you can now save changes (JS and CSS, not DOM) from within Dev Tools.

http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/

Upvotes: 0

Fabio
Fabio

Reputation: 2094

As you said Chrome Dev Tools don't have the builtin function to save the code you edit, anyway there are a couple of Chrome extensions. The best in my opinion is Tincr.

You can find it here Tincr

Then you can also find a tutorial here: http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/.

Basically you

  1. install the extension,

  2. then you select the application type between: Ruby on Rails, Chrome Extension, Atlassian Plugin and Configuration file,

  3. then you can add the root directory of your project.

    When you are done, if you edit something using Google Chrome Dev Tools, the changes will be saved automatically to the source files and there is also a live reload function, so you don't have to press the refresh button or F5 to reload the page after changes.

Upvotes: 2

aNewStart847
aNewStart847

Reputation: 1076

You cannot edit files on the server through the developer tools and changes will not stay after a refresh.

Upvotes: 0

Related Questions