I have this displayed in my Firebug console
"NetworkError: 404 Not Found - http://********.com/images/slider-img/ajax-loader.gif"
So it's telling me it can't find a background image. But can it pinpoint which CSS file this image has been declared as a background-image property?
I have about 4-5 CSS files being referenced in the document and the manual way of finding it out would to open each of the files and find for this image. So I was wondering if this could be avoided and have Firebug tell me which CSS file is the culprit...
Firebug currently (as of version 2.0.x) doesn't directly show you the initiator of a network request. This requires platform support, which is requested in bug 563623.
So, as a workaround you can do this:
Switch to the CSS panel.
Click into the search field at the right side of Firebug.
Ensure that the option Multiple Files is checked.
Enter ajax-loader.gif
=> The CSS panel will switch to the CSS source containing the rule containing the image value.
Notes:
There may be several properties referring to different images named ajax-loader.gif. So you should also check whether the path to the image corresponds to the one shown in the error message. (Within the search field you can hit Enter to get to the next match.)
It's not sure that the request comes from CSS. It may also come from JavaScript, e.g. through an AJAX request or by appending an <img> tag dynamically.
I have seem a lot of videos in which developers are changing CSS on the fly in chrome. I tried the same thing but chrome did not allow me to change the code. I can't write on the style sheet.
Is there any specific setting to do this? Kindly help.
EDIT: To edit the CSS, I right click on an element, select inspect element. It will open the console. I select the id of the element and go to style.css in Resources and try to change the CSS. It does not allow me to write there.
You are doing it wrong... the resources panel is not there for live edit, if you want to change the css associated with an HTML element, right click on that element and then in the right panel you will see the css styles associated with the selected element. You can edit that rules and you will see the changes in real time.
Maybe you can check some videos to learn some basics about the Chrome Developer Tools, and after that if you want to learn more, you can check this question:
Chrome Developer Tools: Best resource for learning advanced features?
Here is a great tool for Google Chrome called Stylebot.
In this you can change the style sheet and save your own styles to any website for your own custom website theme!
Here is the link for Stylebot
Check it out and to put the icing on the cake, it's free!
This should not be used to work on your own website projects since the CSS file saves local on your browser!
In Chrome, clicking on something like "all.css:1" in the Styles pane of the Elements tab of DevTools takes one to the Sources tab of DevTools. If you're looking at code on remote server, the CSS rules in this source view are not live-editable (unlike the live-editing Style Editor tab of Firefox*) unless you're:
viewing the "inspector-stylesheet" -- a temporary stylesheet containing new style rules you created with the "+" button in the Styles pane of the Elements tab. Clicking on a new rule's "inpector-stylesheet:1" link will take you to the editable source of the temporary rules you've created.
viewing a persistent local workspace. Setting this up takes a few extra steps, described here: "Set Up Persistence with DevTools Workspaces" .
Basically, you make a local folder on your machine where you can save local copies that you direct Chrome to use in in lieu of the version on the internet. See the instructions at that link. Note that, as it says there, "If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces." (So just type a space character into the source local CSS file to see your alterations applied again, if you've refreshed or navigated to a different page that uses the same stylesheet.)
* In Firefox, if you right-click on an element on a remote webpage, select Inspect Element, then in the Rules pane of the Inspector tab, click on a link on the right like "all.css:1", you are taken to a "Style Editor" tab where you can immediately live-edit, in contrast to Chrome's requirement of making you map to a local file. This may cause some people some confusion, if they expect the same behavior from Chrome's DevTools.
Another Chrome extension that is similar to Stylebot is Code Cola. It has an inspector that allows selecting elements, and a visual editor which does not require typing the CSS by hand. To see the generated CSS code click the curly brackets icon in the toolbar.
I have a website and I want hide the CSS and script files address from source, when user clicked right and press "view source", CSS and script files address were changed. (as well as in firebug).
Like google! please go to google.com and press right click, then "Inspect Element With Firebug", see Style in right box. You will see "www.google.com #2 (line 9)" for example! and you won't see any address for CSS files!
How is this possible?
If you meant viewing the page source and not seeing any style links there, that's because Google uses some JavaScript framework, perhaps GWT: https://developers.google.com/web-toolkit/ . You can see a lot of JavaScript gibberish on the page, right? That JavaScript creates all the style elements etc. in the DOM. And you indeed can see the resulting style definitions when inspecting the elements, be it Firefox or Chrome.
You can do the same. But that design is quite different from classic HTML + JavaScript.
But others are right, you can't hide anything that way, and you shouldnt. It's security by obscurity at best.
As far as I know, you cant prevent users from seeing these files. They can see these files as well as can also download them if they want.
All you can do is to minify these files using some kind of minifier like JS Minifier for JavaScript code.
You can place your css in inline tags. Simply copy/paste the contents into your .html document in a ... block. Then you won't have an external .css file.
The advantage is that you save an http hit. The disadvantage is that you have to download the full css every time because you can't cache it.
You can also minify your css which will obfuscate it to a certain extent. But you can never really hide css from someone who downloads it.
I just signed up for captcha. It gave me php code to display the captcha box on the page and code to put on the server. It works fine but the input box is misaligned (it might be based on the rest of the styling of the page.) I want to modify it manually but I can't.
When I do an inspect code in google chrome, it shows me the styling for the input box I needed. I unchecked a particular style
position: absolute!important
and it now looks fine. Now I need to actually modify the code. But it says the location is registration.php:1. Where is this? Registration.php is the file which creates the html code for the page and it does a "require" for a captcha php file. But I don't see the css style in that file either!
See these 2 images to see where the CSS could be coming from:
1- In Chrome console under the elements tab
2- In Chrome console under the resources tab
When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.
It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.
Does something like this exist?
I have found the answer to this, at least as of Chrome v14.
While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.
This place exactly:
In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"
This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.
See the Live Editing and Revision History section of this tutorial.
Firediff is a Firebug add-on that tracks changes done in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the Web Developer Toolbar extension (not so great), say Shift-Ctrl-F to obtain a font-size information in px.
I have seen a Firebug extension in Chrome but didn't test it, I use Firediff with Firefox.
In Chrome there is also the Changes tab in the console drawer that displays all the modifications of CSS. It's not an export, but at least it is very convenient to quickly grasp what has changed.
I built a Chrome extension that does exactly this.
It's called StyleURL - it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
Here's an example where I added "padding-bottom: 50px" to this page:
It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension
Both Firefox and Chrome support this feature now, but worth to note that in some platforms if not all Chrome does not show it by default, you need to enable the "Changes" view to see it (in my Kubuntu Linux 20.04 it wasn't by default), here is how you can enable it: go to the "Customize and Control DevTools" button in the Developer Tools bar > "More tools" > "Changes", then the tab will appear at the button:
In Firefox there is no need to enable it, but if you come from the Chrom* world may be hard to find it. Just check the last section in the right at the "Inspector" tab:
I've suggested this product on SO before (I'm not affiliated with them in any way).
http://www.skybound.ca/
Excellent product. Sounds like exactly what you're looking for and much more.
EDIT: Several other answers here have mentioned Google Chrome's ability to link to your local files (which is very very cool). Check out the other answers!
If you edit external CSS, then you can drag its latest revision out of the Resources panel into any text editor that supports DnD (see http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, the "Persisting Changes" section for more detail.) You can also revert your CSS changes to any earlier version of the stylesheet resource (in the right-click popup menu of any stylesheet revision.)
As mentioned by cloudworks, the answer to this has changed. This can now be accomplished rather well by the Chrome DevTools Autosave extension. This tool tracks CSS and JavaScript changes made within the Chrome Developer Tools console, and saves them back to local files. For instructions to install and setup the extension, please refer to the guide written by #addyosmani on his blog, here.
There is also a handy screencast which details the extension rather well.
With Workspaces you can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ and Disable automatic saving of CSS changes in Chrome Developer Tools.
My in-beta-soon product LIVEditor does this exactly.
To let you understand it easily, you can think of Firebug's inspector is embedded into your text editor.
That way you don't have to make the changes manually again in your code editor after you tweaking it using Firebug or Webkit's developer tools.
If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the {} symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!
To add an answer for Safari specifically — it's kind of possible.
When you edit CSS in the Styles section in the Inspector for an existing CSS file, you can hit Cmd-S to re-save the entire file with the changes. However, if you're using a meta language like Sass / preprocessor / generating your CSS with bundling etc, I don't think this really solves that problem, though it may be possible with CSS source maps.
When you edit CSS at the top of the Styles section, under Style Attribute to add inline styles (not tied to an existing CSS file), it doesn't seem possible to easily export all of those changes. For now, I'm just copying and pasting the overrides manually for each element.
The official Apple docs are a little dated but found here: Web Inspector Tutorial - Editing Code to Change Your Webpage.
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css