Statsy v2 – Quelques ajouts

Stoyan Stefanov à présenté Stasty, un bookmarklet qui permet d’obtenir très rapidement des informations notamment sur les style et script présents en inline sur une page.
Cependant, il manque sur ce script quelques informations importantes, facilement récupérables.
J’ai donc créé un nouveau bookmarklet avec des infomations un peu plus complètes.

Publicités

Stoyan Stefanov à présenté Stasty, un bookmarklet qui permet d’obtenir très rapidement des informations notamment sur les style et script présents en inline sur une page.

Cependant, il manque sur ce script quelques informations importantes, facilement récupérables.

J’ai donc créé un nouveau bookmarklet avec des infomations un peu plus complètes :

Statsy 2
(function(){
    var jsattribs = [
        'onbeforeunload',
        'onclick',
        'ondblclick',
        'onerror'
        'onload',
        'onmousedown',
        'onmousemove',
        'onmouseout',
        'onmouseover',
        'onmouseup',
        'onunload',
    ],
    cssattribs = [
        'style'
    ];

    var all_elems = document.getElementsByTagName('*');

    function getAttribsSize(attribs) {
        var value = '',
            attr = '',
            cnt = 0;

        for (var i = 0; i < all_elems.length; i++) {
            for (var j = 0; j < attribs.length; j++) {
                attr = attribs[j];
                value = all_elems[i].getAttribute(attr);
                if (value && typeof value === 'string') {
                    cnt += attr.length;
                    cnt += 3; // ="..."
                    cnt += value.length;
                }
            }
        }
        return cnt;
    }

    function getInlineSize(tag) {
        var s = 0,
            all = document.getElementsByTagName(tag);
        for (var i = 0; i < all.length; i++) {
            s += all[i].innerHTML.length;
        }
        return s;
    }

    var jsatt = getAttribsSize(jsattribs);
    var cssatt = getAttribsSize(cssattribs);

    var msg = [];
    msg.push('JS in HTML attributes: '+jsatt+' bytes');
    msg.push('CSS in HTML attributes: '+cssatt+' bytes');
    msg.push('JS in SCRIPT tag: '+getInlineSize('script')+' bytes');
    msg.push('CSS in STYLE tag: '+getInlineSize('style')+' bytes');
    msg.push('All innerHTML: '+document.documentElement.innerHTML.length+' bytes');
    msg.push('# SCRIPT tag: '+document.getElementsByTagName('script').length);
    msg.push('# STYLE tag: '+document.getElementsByTagName('style').length);
    msg.push('# DOM elements: '+all_elems.length);
    msg.push('Cookie size: '+document.cookie.length+' bytes');

    alert(msg.join("n"));
})();

Vous pouvez directement récupérer le bookmarklet ici :

Statsy 2

N’hésitez pas à faire vos suggestions !

UPDATE 30/11/2010

Suite à la demande de jpvincent, petit explicatif des différentes informations remontées :

JS in HTML attributes : Cette information remonte tout le code JavaScript présent directement dans les balises HTML en tant qu’attribut. Par exemple, une page qui contiendrait <h1 onmouseover= »alert(‘H1’); »></h1> ajouterait 26 bits à JS in HTML attributes

CSS in HTML attributes : Même procédé que pour les JavaScript détaillés un peu plus haut, en utilisant cette fois le contenu des attributs style (ex. style= »color:#f00; »)

JS in SCRIPT tag : Cette information remonte le nombre de bits du code JavaScript présent au sein de balises

JCSS in STYLE tag : Même principe que la propriété précédente, cette information remonte le nombre de bits du code CSS présent au sein de balises <style></style>

# SCRIPT tag : Compte le nombre d’occurrence d’utilisation des balises <script> au sein de la page

# STYLE tag : Compte le nombre d’occurrence d’utilisation des balises <style> au sein de la page

# DOM elements : Compte le nombre d’éléments DOM au sein de la page

Cookie size : Retourne la taille en bit des cookies présent sur le fichier HTML, et donc probablement sur tout les fichiers statiques s’ils ne sont pas sur un domaine externe

Rendre l’URL de recherche de Google plus lisible

Matt Cutts, responsable de la webspam team de google à posté sur son twitter Une méthode pour rendre les URL de recherche de Google plus jolies.

Lorsque vous faites une recherche, vous tombez facilement sur une URL du type http://www.google.com/search?source=ig&hl=en&rlz=&q=google&aq=f&oq=&aqi=g-p3g7 qui n’est au final pas très lisible. Cette méthode permet de transformer cette URL en une plus compréhensible pour l’humain et aillant les mêmes résultats : http://www.google.com/search?q=google.

Malheureusement, dans l’exemple que je donne, cette méthode est buggée et ne retourne pas un bon résultat. J’ai donc corrigé ce bookmarklet afin d’avoir un résultat correct en toute situation. Le bookmarklet est disponible ici : Trim Google Result.

Pour les personnes qui voudraient éventuellement analyser le code, le voici en version non minimifiée :

javascript:(function(){
	var windowLocationHref = window.location.href;
	var domainName = window.location.hostname;
	var myPathname = window.location.pathname;
	var searchArray = windowLocationHref.split('&');
	var mySearch = '';
	for(myElement in searchArray){
		if(searchArray[myElement].match(/^q=/)){
			mySearch = searchArray[myElement];
		}
	}
	var searchOnly = domainName + myPathname + '?' + mySearch;
	self.location.href='http://' + searchOnly;
})();