This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to see the print media CSS in Firebug?
I'm working on a Plone website with plenty of #import and linked CSS and am trying to use the Web Developer Toolbar to show only the print css.
Unfortunately on this particular website the web developer toolbar's print css has way fewer styles than regular 'print preview', won't reset without opening the page again in a new tab, and seems generally broken. Wikipedia for example responds better to the same 'view only print css' option.
How can I use Firebug with a print-preview-esque presentation? Could I be expressing the printability of different CSS declarations in a more web developer toolbar compatible way?
Found this, witch might help you out: http://neutroncreations.com/blog/easy-print-css-coding-using-firebug-and-web-developer-toolbar/
... By using Firefox with its two close friends; Firebug and Web Developer Toolbar (you’re all using these daily for front-end engineering anyway, right?), we can make working on a print stylesheet as simple as one for the screen. Observe.
First, open your website in Firefox, then we’ll ask Web Developer Toolbar to render the page using your print rather than screen CSS by choosing CSS → Display CSS By Media Type → Print from the Web Developer Toolbar...
Related
I am new to CSS and just learned how to inspect an element. My question is how can i get a whole/full CSS code for an element?
Let say i need a full css code for a form (https://townends.co.uk) please see search form on homepage, How can i get that whole code for this module?
Thanks in advance.
A
Right click -> View Page Source from site.
Then find "< link rel='stylesheet'" keyword. You have all the css files associated.
Sounds like you could use the dev tools in your browser. They can be super helpful for seeing what actually is affecting different elements in your site. depending on which browser you are using the shortcut for it is different. My favorite suite of in-browser dev tools is in Firefox(check out the developers edition of Firefox as well).
From within the dev tools of Firefox you can click on the arrow pointing into a box from the highest level tabs. This allows you to hover over any element on your page and display the classes and ids affecting the element as well as the rules being used on the element in the dev tool partition of your screen at the bottom. There are many more useful tools in browsers so explore it a little and it will probably improve your productivity.
When using Selenium, I found the Chrome -> Web Developer -Styles window very useful in getting CSS names of web controls.
I could right click on a web control and would get the CSS name for that control. This helped me avoid using XPath.
However, the in-house web application has blocked right click, so I am not able to use that facility any more. However I can still use Firebug to show me the XPath of a control since it works if I click the arrow in Firebug toolbar, which then displays XPath of every control that I hover.
So, the question is - Does Firefox addons have a corresponding CSS identifier tool?
Or
Is there a way around the right click block in Chrome? (For some reason Chrome used to guess or build the CSS name quite accurately which I did not find in Firefox.)
The HTML panel of Firebug has a Styles side panel, where you can get all the applied styles for the selected element.
For example, opening the front page of translate.ru, it contains a lot of banners. But by the Developer Tools in Chrome it's possible to go through the page and tweak CSS in-place (mostly adding 'display: none') and eventually the page looks this way:
(source: demin.ws)
So, a question: is there any APIs or existing extensions for Chrome allowing programmatically change DOM/CSS on the page? I saw similar Chrome extensions allowing to tweak Gmail and Google Reader, but it was specifically for those websites.
You can do this using Stylebot.
I consistently run into the need to clean up css files and strip unused css elements. I am aware that google chrome has the capability to display all the unused css elements on a page but there are times (like a project I am working on right now) where the original designer left hundreds of unused elements within this file.
So, my question here is -- does anyone know of a way to customize the google chrome developer console to export a list of all used CSS elements. Or, is anyone aware of an existing google chrome plugin which provides this functionality?
I realize there is a firefox plugin which provides these capabilities but I would love to find a similar solution for google chrome.
Thanks
You have two ways customizing the Google Chrome Web Inspector:
Web Inspector Options
Chrome Extensions
http://code.google.com/chrome/extensions/experimental.devtools.console.html
http://code.google.com/chrome/extensions/experimental.devtools.audits.html
You could create an extension that does what you need.
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )