Пара полезных «Закладурок» для web разработчика

Закладурка – небольшая (но это не точно) javascript процедура, прописанная в закладке браузера. Здесь делюсь парой своих полезных закладурок.

Вообще закладурки это древняя тема, есть целый сайт, посвящённый закладуркам, который не обновляется с 2006 года. Почти всё что там есть – на данный момент – хлам. В этой записи я предлагаю вам несколько собственноручно разработанных полезных утилит.

 

P.S.: Чтобы «установить» закладурку в свой браузер, скопируйте исходный код, и вставьте вместо адреса страницы при создании закладки.

 

1. debug_div_border

Закладурка добавляет/удаляет outline ко всем дивам на странице. Это бывает полезно при отладке узких мест.

Также можно прописать выделение любого элемента на странице.

 

Исходник:

javascript:if(!window.__debug_div_borders_inited) { var sheet = document.styleSheets[0]; sheet.insertRule('body.__debug_div_borders div { outline: 1px solid green; }', ((sheet.cssRules && sheet.cssRules.length) || 0)); window.__debug_div_borders_inited = true; } document.body.classList.toggle('__debug_div_borders');void(0);

 

2. password2text

Раскрывает содержимое стандартного инпута типа password. Бывает полезно, если забыл пароль, а браузер подставил его самостоятельно:

javascript:!function(){var t=document.querySelector("input:focus");t&&(t.type="password"==t.type?"text":"password")}();

 

3. Font Usage info

Закладурка для подсчета использованных шрифтов. Весьма полезная утилита при проведении оптимизации сайта.

Работает в двух режимах (только Chrome!): если открыта консоль — выводит инфу туда, а иначе выдает всё в alert.

javascript:!function(){var e=!1,t=new Image;Object.defineProperty(t,"id",{get:function(){e=!0}}),console.log("%c",t);var n=function(){var t={};document.querySelectorAll("body *").forEach(function(e,n){var o=window.getComputedStyle(e),r=o.getPropertyValue("font-family");if(r.length>0){var a=r.split(", ");if(a.length>0){var i=a[0].toUpperCase();t.hasOwnProperty(i)||(t[i]={});var l=o.getPropertyValue("font-weight");t[i].hasOwnProperty(l)?t[i][l]++:t[i][l]=1}}});var n="Font usage info:\n";for(var o in t){n+=o,n+="\n";for(var r in t[o])n+="[ "+r+" : "+t[o][r]+" ] ";n+="\n\n"}e?console.log(n):alert(n)};"complete"==document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();

 

Комментарии

comments powered by Disqus
Яндекс.Метрика