How to make permanent changes to a website's CSS from within the browser?


Tags: html,css,firefox,firefox-developer-tools

Problem :

If I am trying to edit some CSS in a huge project using the built-in developer tools in Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?

Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?


EDIT:- enter image description here



Solution :

To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.

After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)

Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.

Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!

The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)


    CSS Howto..

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to enable real time CSS editing in chrome?

    how to make text transparent without changing to an image using css

    How can I test websites for Mobile Devices

    How to find out if the user scrolled to the end of a HTML container with jQuery?

    How to display a header inline with paragraph text using divs or an alternative method

    How do I make my django app load content as I scroll?

    How to enable auto indentation in lists and list items?

    How to prevent outer
    CSS from affecting inner
    CSS

    Nginx server (not showing changes) - Delete cache?

    How to set fixed base to calculate vh unit in css on mobile?

    How do I add a link to my CSS background?

    How to rotate image in relation to mouse position?

    Jquery show/hide more data

    How can I fix this Bootstrap layout issue?

    How to change the css class name dynamically in angular 2

    Jquery how to set active link css color

    How to prevent embedded video from linking to another web page

    How to make Media Query work when IE loads?

    How to have a two headings in same line with css?

    CSS/HTML problem in IE - how to fix?

    How to show text on image when hovering?

    How do I create triangle shaped vertical breadcrumbs

    How can I make inputs display inline?

    How can align these elements?CSS

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    CSS: How to style text in a box with a limited height

    Jquery, CSS - How to set element as first in list

    SCSS, Compass and GULP: How to minify without breaking CSS?