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.
Related
I want to quickly see how the fallback-fonts is working for a website by excluding one or more specific fonts. Is this possible in Chrome? How?
Have searched for it with no luck.
It's quite easy with the Chrome Inspector. You just have to find the HTML lines which include your custom font (Or in your CSS) and delete it.
Of course you can just modifiy your css directly in Chrome to see what happens.
UPDATE: Delete directly the font in the sources tab in you Chrome Inspector.
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 am looking for a fix for styling a webpage that so that a webpage on google chrome, will look the same as it does on firefox, meaning, is there some syntax in css to make all of the web browsers look the same. does this exist (I would also like one for I.E., and any other web browser if it exists if it exists)
Google Chrome uses a different rendering engine than Internet Explorer/Firefox, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.
If your site isn't rendering properly in any browser, make sure your HTML and CSS are valid by testing them at http://validator.w3.org/.
If your site doesn't render properly in Google Chrome or Apple Safari, file a bug at webkit.org as described at http://webkit.org/quality/reporting.html.
If your site renders properly in Apple Safari but not in Google Chrome, please file a bug against Google Chrome at http://code.google.com/p/chromium/issues/list.
How can I test my website in Google Chrome?
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
I found the Answer. Being that I am using drupal, there is a built in IE fix for the theme that I am using (fusion) that creates separate css files (ie7.css, ie8.css, etc). using these, I can adjust what I need for IE specifically.
Most layout problems with decent browsers are cause by invalid HTML, invalid CSS, or misunderstanding what a particular piece of CSS is actually supposed to do.
In general, when I see a difference between FF and Chrome, it is because Chrome is doing the proper thing and FF just happens to be rendering some invalid CSS fine. 99% of the time, I can fix the CSS and get FF and Chrome to render the same.
The remaining times, I typically browser sniff and use jQuery to fix the problem.
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...
It seems that it is not possible, but if anyone as a hint on how to create a right-sided sidebar (like a iframe) in google chrome, any hint will help. Thanks.
The experimental sidebar API has, as of this time, disappeared from the chrome documentation, since there is no longer a developer working on it.
Your best bet for something that you can achieve now is a DOM bar, as discussed in Creating a StumbleUpon-like toolbar for Chrome
If you mean something like that
This is from the google chrome experimental api:
Caution: Don't depend on these
experimental APIs. They might
disappear, and they will change. Also,
the Chrome Developer Dashboard doesn't
allow you to upload extensions that
use experimental APIs.
Details: http://www.chromium.org/chromium-os/user-experience/panels