Сегодня я вам расскажу о полезных добавлениях к броузерам, которые не только облегчают процесс просмотра сайтов, но и помогают разрабатывать их.
Речь идет о так называемых bookmarklets (букмарклетах). Это небольшие программки, написанные на javascript, которые можно помещать на панель закладок (отсюда и название, склеенное из двух слов: bookmark и applet). При щелчке по такой закладке запускается JavaScript-программа, которая выполняет какое-либо полезное действие.
Очень часто букмарклеты используют DOM, а так как в разных броузерах реализация DOM - разная, не все букмарклеты могут работать одинаково хорошо во всех броузерах. Что уж говорить о таких допотопных монстрах, как IE4 или NN4. Букмарклеты, которые будут здесь представлены, работают в последних версиях Mozilla/Firebird, IE 5.5+ и Opera, составляющих подавляющее большинство.
При написании данной статьи были использованы материалы сайтов, список которых будет представлен в конце. Вы без труда найдете еще кучу таких же сайтов: достаточно в google.com набрать ключевое слово bookmarklet.
Броузеры: 
это Internet Explorer 5.5 for Windows, 
это Netscape 7.1 или Mozilla, 
это Netscape 4.79, и 
это Opera 7.03.
Букмарклеты для веб-серфинга
Показывает скрытые элементы форм как поля, и позволяет редактировать их значения.
Придуман "shad-ом".
Отключает все стили, используемые на странице.
Подсвечивает все слова на странице, содержащие искомые символы.
Находит и подсвечивает все слова, содержащие искомые символы, кроме случаев, когда фраза прерывается другим элементом. Например, букмарклет найдет слова "Paul McGarry" и "искомые слова", но не фразу "на скрипте" в абзаце, что идет ниже.
Основан частично на скрипте, придуманном Paul McGarry.
Позволяет сортировать ряды в таблицах на веб-странице по алфавиту.
Добавляет еще один ряд сверху каждой таблицы со ссылками "a" и "d" над каждой колонкой. Щелкнув по ссылке, вы отсортируете таблицу в убывающем или возрастающем порядке по данной колонке. Сортировка идет по HTML-коду, так что если в колонке присуствуют ссылки, ряды со ссылками будут идти первыми.
Преващает ряды таблиц в колонки, а колонки - в ряды, и наоборот.
Учитывает rowspan и colspan, а также по возможности старается соблюсти цвет фона в ячейках.
Нумерует ряды во всех таблицах на странице.
Полезный букмарклет, например, для улучшения вида таблицы багов Mozilla.
Если у таблицы есть заголовочный ряд (оформленный тегами th и thead), данный скрипт не присваивает ему номера. Вместо этого в заголовочную строку добавляется еще одна ячейка над колонкой, где выводятся номера рядов, и в этой ячейке пишется слово "Row" (Ряд).
Преобразовывает все маркированные списки (UL) в нумерованные (OL).
Пригодится например для того, чтобы узнать позицию своего сайта в списке каталога Dmoz.
Заменяет все картинки на странице на текст, прописанный в теге ALT.
Этот букмарклет позволяет посмотреть на то, как будет выглядеть страница с выключенным выводом картинок. Также вы получите представление о том, как ваша страница будет смотреться для голосовых броузеров и для текстовых броузеров, таких как Links. Более подробно о том, как правильно создавать текстовую версию сайта, читайте Web Content Accessibility Guidelines for alternate text.
Этот букмарклет заменяет только теги <img>; он ничего не делает с картинками на кнопках, с фоновым изображением и с изображениями-картами (image maps).
Формирует в диалоговом окне ссылку на текущую страницу в уже готовом формате тега <A>. Пригодится в частности для блоггеров, а вообще для всех, кому надо быстро сделать ссылку на страницу, чтобы переслать по почте или вставить в html-код.
Как вариант предыдущего букмарклета, формирует в диалоговом окне ссылку на текущую страницу в простом текстовом варианте "заголовок: ссылка".
Букмарклеты для веб-мастеров
Позволяет создать временный или пробный CSS и тут же увидеть результат его исполнения.
Букмарклет создает новое окно, в котором можно напечатать CSS-правила. Эти правила сразу же будут применены к странице. Правила будут действовать, пока окно открыто, даже в том случае, когда вы перезагрузите страницу или перейдете на другую страницу на том же сайте. См. примеры полезных стилевых правил.
Отображает в статусной строке список всех "предков" любого элемента страницы, над которым вы устанавливаете курсор.
Например при установке курсора на ссылке в ячейке таблицы в статусной строке появится следующее: "BODY > table tbody tr TD > A".
Так же показывает классы элементов (например, SPAN.newsItemLink) и идентификаторы id (например, DIV#content), если таковые присуствуют. Идея отображения классов и идентификаторов появилась из букмарклета pixy "List computed styles".
Рисует границы вокруг таблиц (цветами показывается уровень вложенности), абзацев и div-ов.
Абзацы обводятся светлосерым цветом, div-ы - черным. Цвета границ у таблиц зависят от уровня вложенности: самые внешние таблицы обводятся синим, таблицы второго уровня - зеленым, а третьего уровня и глубже - красным.
Этот букмарклет накладывает на страницу таблицу стилей, которая загружается динамически с сайта http://www.cs.hmc.edu/. Изучите внимательно этот css-файл: он немного меняет вид страницы (убирает фон), что не всегда удобно.
Придумал Paul McGarry.
Если вам хочется создать свою таблицу стилей и не зависеть от постороннего сайта, javascript в букмарклете надо немного поменять. Например, я сохранил свою таблицу стилей на своей машине, а в javascript-е прописал путь к ней, как к файлу: "file://E:/WINDOWS/Web/cells-structure.css" и из букмарклета, показывающего границы блоков, я сделал другой букмакрлет, показывающий только границы ячеек, обводя их легким 1px пунктиром.
При каждом нажатии выделяет на странице ссылку, которая указывает на squarefree.com. Поменяйте в javascript значение, на нужный вам домен.
Ищет в Google страницы с PR4+, которые линкуются на текущую страницу, если у нее тоже PR4+.
Ищет в Google все ему известные страницы с текущего сайта.
Составляет список использованных на странице слов и подсчитывает частоту их употребления.
Меняет ссылку на текст "engine: запрос"
Например, при анализе логов букмарклет поменяет текст данной ссылки http://www.google.com/search?hl=en&q=%22remove+plugins%22+%22internet+explorer%22 на "www.google.com: 'remove plugins' 'internet explorer'".
Превращает текстовые ссылки в реальные ссылки.
Например, при анализе логов, этот букмарклет превратит текст "http://www.google.com/" в ссылку.
Послесловие
Для Firebird (Mozilla Project) есть дополнительный компонент Web Developer, который позволяет удобно выполнять такие функции, как включение/выключение CSS, включение/выключение картинок, изменение размера окна, обрисовка ячеек таблиц и блоковых элементов, посмоттреть http-заголовки.
Opera поставляется с дополнительными CCS-файлами, которые можно быстро наложить на любую страницу и очертить блоковые элементы или ячейки таблиц.
