All geek questions in one place

Editing and Saving Chrome Dev Tools (CSS)

I need to change the color of some words in one category of the widget, I saw a youtube video about development tools.

When I find the part in which I want to change, and I make a change in the "Elements" (development tools) in the upper right corner of the element.style {color: red; } but, following the video, when I go to resources, the changes I made do not exist.

  • I can only edit in Elements, I cannot save it
  • I can only save resources, I can not edit / add anything

Can someone please help me how this dev tool should work?

However, I can edit / add AND save to Sources, maybe I need to save a stylesheet from resources to sources? Is that what I have to do?

+4
source share
3 answers

As you said, Chrome Dev Tools does not have a built-in function to save the code you are editing, in any case there are several Chrome extensions. The best, in my opinion, is Tincr .

You can find it here tincr

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

Basically you

  • install extension
  • then you choose the type of application between: Ruby on Rails, the Chrome extension, the Atlassian plugin and the configuration file,

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

    When you finish, if you edit something using Google Chrome Dev Tools, the changes will be automatically saved in the source files, and there is also a real-time reload function, so you do not need to press the refresh button or F5 to reload the page after the changes.

+2
source

You cannot edit files on the server using the developer tools, and the changes will not remain after the update.

0
source

Updated answer from March 2013, you can now save changes (JS and CSS, not DOM) from Dev Tools.

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

0
source

Source: https://habr.com/ru/post/1446117/

More articles:


All Articles