I've been toying around with different CSS styles for a site that I'm running by selecting various things with Chrome's built-in "Developer Tools" and editing them one by one. Now I've landed on an overall style that I'm more or less happy with, but I'm not sure how to save my results! Is there an easy way to save or export all the changes that I've made in Chrome as a big CSS file so that I can apply them to my actual site?
As long as you haven't been sticking them in element.style, yes:
Go to a style you have added. There should be a link saying inspector-stylesheet:
Click on that, and it will open up all the CSS that you have added in the sources panel
Copy and paste it - yay!
If you have been using element.style, you can just right-click on your HTML element, click Edit as HTML and then copy and paste the HTML with the inline styles.
Related
I've been following two articles about how to start editing scss files on chrome canary (not livereload.com)
https://medium.com/#toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0
and this one
https://developer.chrome.com/devtools/docs/css-preprocessors
I added my workspace and the browser is actually reading my file like in the following:
And then when I click into sources i can modify the content like in this picture:
I can change the css here and it's fine and it's updating my scss file from Chrome to file.
The issue
When I go to the elements inspector (first tab on devTools) and I try to change anything on that. The styles.scss becomes automatically styles.css and then I am not able to modify anything on the elements inspector that will change my scss file.
Also when I change anything on my scss file (using sublime text 2). The browser is not reloading my css, so it's not working from file to Chrome.
Are this two thing a bug? Is it mean to work like that?
It is a bit hard to make the model-based editing (in the Elements panel) play well with source-mapped code, since different users may expect different behaviors (moreover, editing a variable-based property value in SASS may assume editing it directly or editing the variable value instead.) Thus, we have not decided on how this should work, and the CSS-SASS link is just broken at the moment of edit (since the CSS no longer corresponds to the SASS source it was generated from.)
Please star https://code.google.com/p/chromium/issues/detail?id=257778 and leave a comment saying what kind of behavior you expect.
When I make changes on the css inspector it also apply the changes to the css on the sources panel. So I right-click and save the source panel css to a file.
The problem is that once I make this for the first time, google chrome is now autosaving any modification I make on the css inspector.
Is there some way to disable this autosave feature?
I could be wrong but I don't think so (it's very handy afterall). Once you save it the first time, it will auto-refresh until you close that locally saved version. However you can use "Local Modifications..." (right-click CSS in sources) and revert History.
When using developer tools in firefox or chrome, after a change has been made to the developer tools stylesheet is there a way to save those changes for later reference when fixing the actual stylesheet?
Simply copy/pasting them would be the easiest thing.
There is no way to actually save changes to a stylesheet directly from the developer console/inspector if that's what you're asking.
In Firefox (they call their version of the tools Web Developer),
to save HTML:
right-click on the outermost element that you changed (or that you want to save), and select
Copy -> Outer HTML. Then paste into a file.
to save CSS changes made on the Inspector tab that you added to the element inline entry, at the top of the cascading styles list:
the best I can suggest is to copy the HTML (see above), paste into a new file, then do a search for style'".
This will highlight/find all inline styles. Some may have already been in the document. The others will be the ones you added. You'll just have to recognize which are which. You will then need to either add them as inline styles to your HTML, php, and js code, or look at the surrounding classes and tags to piece together how to add them to your stylesheet, without breaking anything else.
If you know you'll want to save your styles to put in a stylesheet, this is probably not the recommended place to experiment or edit your css.
Instead, you should edit any of the cascading rules that appear below element inline, or edit local copies of stylesheets directly from the Style Editor tab.
If you edited, or disabled a style from the css cascade list (for a selected element), or edited css from the Styles Editor tab, saving styles is fairly easy.
Switch to the Style Editor tab. The top section is a list of all the stylesheets used to "build" the current webpage.
Any filenames shown in italics contain styles that you modified, added, disabled. To the right of the filename, click Save and you can save the entire modified stylesheet.
Any styles that you disabled (whether they existed in the orig file or not) will be commented out, and it may be preceded by an !.
Unfortunately, if you just want a list of your edits, you have a bit more work to do, since you cannot simply save a list of only the styles you modified. There is no indication in the file you saved that shows which styles were added or modified by you. As a work around, you can download a "file diff" program, to compare two files highlighting the differences between them.
Know that can also edit these local copies of the stylesheets directly, instead of using the Inspector tab, and those changes will appear on the HTML page, just the same as if you had edited a style via the "Inspector" tab. This is handy to know if you want to add a CSS selector combination for an element that did not appear in the cascaded styles shown for that element.
Note, on the Inspector tab, to the right of every cascaded style shown for a selected element, the text to the right of the selector is the name of the file it appears in. If you click on that name, it will switch you over to the Styles Editor tab, and show you the contents of that file. Again you can edit the (local copy) of that file directly. Also, this makes it easy to save a copy of this file, without needing to scroll through the file list to find it.
Note: as a bit of a hack, if you don't want to use a file diffing program, don't have many styles, and you need a list of only the styles you changed, you can use the following process.
For every style you modified in the cascaded list, uncheckmark it (disable it). Now in the css file, it will be commented out, and proceeded by an !, for example:
/*! color:#FFDCFD; */.
Now you can search your saved file for /*! to quickly find your edited styles (and delete everything else). The tedious part is remembering every element to click on, in order to access every style you changed, find it, and disable it. However, it is an option, and a good work around, in a pinch.
Yes, you can, in Chrome at least. Just make the changes by clicking the plus symbol at the top right of the Styles panel of Dev Tools. Then from the drop-down choose 'inspector-stylesheet' and enter your changes.
Now, if you click the link to the right of the styles you make it will take you to the inspector stylesheet in the sources panel. There you will see all your styles. Now just right-click somewhere in that pane and choose 'Save as'. Job done.
I'm not a desktop applications developer so I was wondering if someone heard about an extension that actually writes on the file system. it would be great if you open firebug like extension and do some modifications e.g. adding CSS rules and they will be added automatically in the CSS file. how hard would it be to build such an extension?
The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.
I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.
You can could use the Web Developer Toolbar for this.
The changes you make in its CSS editor (CSS > Edit CSS) are applied to the page immediately (without saving to file), but it also has a Save... option, so you can overwrite the existing CSS file with it.
It's a pretty basic text field, though, that just displays the plain CSS file. It doesn't have any syntax highlighting nor organize the CSS rules according to the cascade etc. like Firebug does.
Also see this related question:
Why can’t I save CSS changes in FireBug?
Use Backfire. It's an open source solution I wrote that sends CSS changes back to the server and saves them. It has a working .NET server implementation example that is easily portable to any other platform.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
I would like to control which parts in Stackoverflow are visible to me by a css file.
There are about ten css -files in Firefox installation folder. I am not sure whether I should edit them or not.
How can I customize Stackoverflow by CSS in Firefox?
You can create a file called "userContent.css" in your profile folder and it will be loaded on each page. Here's more information: http://www.mozilla.org/unix/customizing.html
If you need to make changes which only affect one particular site instead of every site, then you can use this syntax:
#-moz-document domain(stackoverflow.com) {
body {
background-color:#f0f;
}
}
The CSS equivalent of GreaseMonkey is the Stylish extension which allows you to overwrite site CSS without modifying your userChrome.css file.
With Stylish installed, you can simply create a custom user style for stackoverflow containing your css overwrites without risking messing up userChrome.css. You can also disable or enable that particular stylesheet at any time. Also, make sure to use !important in your style declaration as CSS specificity comes into play.
Try using firebug from http://getfirebug.com
You can also use greasemonkey to do further customization.
You can get a very handy addon in Firefox, called GreaseMonkey. It executes a custom javascript after a page loads, and is able to modify the html on the client side. For example people use it to strip out various elements, change color, fonts, rearrange elements etc
There is also a book about it available online for free
You can get the Greasemonkey add-in here.