There is Firebug Ad开发者_如何学GodOn - "Inline Code Finder", but it doesn't show how many bytes! Do you know any tool doing it?

You can run the following bit of JS in the Firebug Console for the size in bytes of all the effective inline style rules as CSS.

(unhook all linked stylesheets, load page and run this JS to effectively get the only-declared-inline CSS size).

var styleText = '';
$('*').each(function(){
    styleText += this.style.cssText;
});
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length
console.log(styleTextLengthInBytes);

(conversion to bytes handles UTF-8 correctly, courtesy of dt.in.th/2008-09-16.string-length-in-bytes

Variation - exclude SPANs and Ps, and count everything else:

var styleText = '';
$('* :not(span,p)').each(function(){
    styleText += this.style.cssText;
});
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length
console.log(styleTextLengthInBytes);

Stoyan Stefanov created a really nice tool fr working out the values of js/css on a page and called it statsy

http://www.phpied.com/statsy-more-data-points-for-markup-quality/

Below is an explanation taken from his site

the results

Once you run the bookmarklet it alerts these stats points:

• • JS attributes (e.g. onclick) - this is the sum of all onclick, onmouseover and so on including the attribute names. So for example is 11 characters (bytes) of JavaScript attributes code
  • CSS style attributes - the sum of all style="..."
  • Inline JS - the sum of all the contents of all script tags (excluding the tag itself)
  • Inline CSS - sum of all tag contents
  • All innerHTML - this is document.documentElement.innerHTML.length, it should be close to the ungzipped size of a page, provided the page is not doing a lot of DOM manipulation

  • DOM elements - the total number of elements on the page is

    counted simply using document.getElementsByTagName('*').length

Do a character count on the found CSS - usually 1 char is 1 byte.