Быстрая диагностика HTML кода

Отображение недочетов на странице

Часто бывает так, что по окончании процесса верстки и сборки сайта, забываешь проверить код на наличие недочетов. Таких как ссылки со значением атрибута href="#" или логотип без тайтла.
Именно для поиска таких мест и придумали диагностические css стили.

Так как каждый раз вставлять руками данный стиль дело довольно расточительное, я написал букмарклет кнопочку для браузера, нажав которую, вы увидите все самое интересное.
bug!

javascript:(function addStylesheetRules(){var decls=[['div:empty,span:empty,li:empty,p:empty,td:empty,th:empty',['padding','20px'],['outline','5px dotted yellow',true]],['*[alt=""],*[title=""],*[class=""],*[id=""],a[href=""],a[href="#"]',['outline','5px solid yellow',true]],['applet,basefont,center,dir,font,isindex,menu,s,strike,u',['outline','5px dotted red',true]],['*[background],*[bgcolor],*[clear],*[color],*[compact],*[noshade],*[nowrap],*[size],*[start],*[bottommargin],*[leftmargin],*[rightmargin],*[topmargin],*[marginheight],*[marginwidth],*[alink],*[link],*[text],*[vlink],*[align],*[valign],*[hspace],*[vspace],*[height],*[width],ul[type],ol[type],li[type]',['outline','5px solid red',true]],['input[type="button"],big,tt',['outline','5px dotted #33FF00',true]],['*[outline],a[target],table[cellpadding],table[cellspacing],*[name]',['outline','5px solid #33FF00',true]]];var style=document.createElement('style');document.getElementsByTagName('head')[0].appendChild(style);if(!window.createPopup){style.appendChild(document.createTextNode(''));}var s=document.styleSheets[document.styleSheets.length-1];for(var i=0,dl=decls.length;i<dl;i++){var j=1,decl=decls[i],selector=decl[0],rulesStr='';if(Object.prototype.toString.call(decl[1][0])==='[object Array]'){decl=decl[1];j=0;}for(var rl=decl.length;j<rl;j++){var rule=decl[j];rulesStr+=rule[0]+':'+rule[1]+(rule[2]?'!important':'')+';\n';}if(s.insertRule){s.insertRule(selector+'{'+rulesStr+'}',s.cssRules.length);}else{s.addRule(selector,rulesStr,-1);}}})();void(0);

Функцию вставки стилей я взял с сайта MDN [link] и немного обфусцировал.

Букмарклет для перехода на главную страницу

Часто надо перейти на главную страницу сайта. Для этого приходится убирать лишнее в адресной строке.
Но и такую тривиальную задачу можно повесить на отдельную кнопочку:
Home

javascript:window.location.href=window.location.protocol+'//'+window.location.host;void(0);

И, чтобы быстро зайти в админку, находясь на любой странице сайта:
Admin

javascript:window.location.href=window.location.protocol+'//'+window.location.host+'/admin/';void(0);

Новинка: Теперь вы можете в более удобной форме сгенерировать для себя похожую кнопочку. Под катом находится форма генератор. Жми Читать дальше:

Букмарклет для сброса кэша

На работе часто приходится очищать кэш. Собственно для того я и написал этот букмарклет.
Для установки перетянуть следующую ссылку на панель закладок:
clear_cache

Или вставить в поле адреса закладки следующий код:

javascript:l=function(){setTimeout(function(){var a=window.frames['fcc'].location.pathname.split('/');if(a[a.length-2]=='admin'){f.style.display='none';m.setAttribute('style',lol+'background:#093;border:1px solid #093;color:#FFF');d.innerHTML='Success!';window.location.reload();}else{f.style.display='block';m.setAttribute('style',lol+'background:#C00;border:1px solid #C00;color:#FFF');d.innerHTML='Authorization...';}},100);};var lol='position:fixed;z-index:9999;top:9px;left:50%;margin-left:-128px;width:256px;box-shadow:0 2px 4px rgba(0,0,0,0.2);border-radius:2px;text-align:center;font:14px/25px sans-serif;overflow:hidden;';if(!document.getElementById('mcc')){var m=document.createElement('div');var f=document.createElement('iframe');var d=document.createElement('div');m.setAttribute('style',lol+'background:#F9EDBE;border:1px solid #F0C36D;color:#000');m.setAttribute('id','mcc');f.setAttribute('name','fcc');f.setAttribute('id','fcc');f.setAttribute('onLoad','l();');f.setAttribute('src','/admin/admin/clear_cache/');f.setAttribute('style','display:none;border:none;height:290px;width:100%');d.setAttribute('style','cursor:pointer');d.setAttribute('onclick','document.getElementById(\'mcc\').style.display=\'none\';return false');d.innerHTML='Clearing Cache...';m.appendChild(d);m.appendChild(f);document.body.appendChild(m);}else{var m=document.getElementById('mcc');var d=m.getElementsByTagName('div')[0];var f=document.getElementById('fcc');m.style.display='block';}void(0);

Под катом отладочный код.

Сохранить пост Habrahabr в PDF

Букмарклет, с помощью которого можно сохранять пост Хабрахабр в .pdf

Установка:
Перетащите эту ссылку на вашу панель закладок:
Habr to PDF

Или создайте новую закладку, в адрес вставьте код:

javascript: var myurl = window.location.pathname; myurl = myurl.match(/\/\d{6}\//); location.href = 'http://html-pdf-converter.com/ru/convert?u=' + 'http://habrahabr.ru/mob/post' + escape(myurl[0]); void(0);

Более подробно установка букмарклета описана в смежном посте Переключаем пост на Habrahabr в мобильный вид

Использование:
Находясь на странице поста - жмем на созданный букмарклет. Ссылка на пост преобразуется в мобильный вид и отсылается на онлайн конвертер PDF Converter
Удобно для чтения с электронной книги.

Переключаем пост на Habrahabr в мобильный вид

Букмарклет кнопка для переключения страницы Хабрахабр в мобильный вид.

Установка:
Перетащите эту ссылку на вашу панель закладок:
Habr to mHabr

Или создайте новую закладку, в адрес вставьте код:

javascript: var myurl = window.location.pathname; myurl = myurl.match(/\/\d{6}\//); location.href = 'http://habrahabr.ru/mob/post' + escape(myurl[0]); void(0);

Затем добавить эту закладку в вашу панель закладок.
Или создать кнопку для Оперы: правой кнопкой по любой панели -> Настроить -> Оформление… -> Кнопки -> Мои кнопки - переместить сюда закладку, поместить созданную кнопку куда угодно.

Использование:
Когда находимся на странице со статьей - жмем по этой кнопке. Страница преобразуется в мобильную версию.

Я обычно интересные статьи сохраняю в веб архив (Ctrl+s) “Веб архив (единственный файл)” в формате .mht и читаю с мобилы (через оперу мобайл).