5 полезных букмарклетов для разработчиков
Пять полезных bookmarklets для разработчиков: live-редактирование страниц, отладка layout, показ паролей, выбор цвета и запуск eruda на мобильных.
Букмарклет — это закладка, URL которой представляет собой одну строку JavaScript с префиксом javascript:. При нажатии на неё код выполняется в контексте текущей страницы, а не выполняет переход по адресу. Это делает букмарклеты самым быстрым способом редактировать страницу в реальном времени, отлаживать вёрстку, раскрывать скрытые поля ввода или получать цвет — без установки расширений, без панели DevTools, без этапа сборки. В этой статье представлены пять по-настоящему полезных, готовых к копированию букмарклетов, работающих в современных Chromium-браузерах. Также объясняется, когда стоит использовать каждый из них, и разбираются подводные камни, на которые часто натыкаются разработчики (однострочный синтаксис, блокировка Content-Security-Policy, ограничения same-origin), а в конце показано, как написать собственный букмарклет.
Установить любой из них можно двумя способами: создать новую закладку и вставить код с javascript: в качестве URL, либо перетащить ссылку, у которой в атрибуте href содержится этот код, на панель закладок. Каждый фрагмент кода ниже уже представлен в виде одной строки — вставляйте его как есть.
Ключевые выводы
- Букмарклет должен быть одной строкой с префиксом
javascript:; никогда не используйте однострочные комментарии//, так как они закомментируют всё, что идёт после них, — при необходимости используйте/* */. - Завершайте букмарклеты, изменяющие DOM, выражением
void 0или оборачивайте их вvoid(...), потому что если последнее выражение вjavascript:-URL возвращает строку, браузер заменит страницу этой строкой. - Встроенный инструмент выбора цвета EyeDropper работает только в Chromium-браузерах (Chrome и Edge) по протоколу HTTPS; по состоянию на 2026 год Firefox и Safari его не поддерживают.
- Букмарклеты, подключающие внешний скрипт (например, консоль eruda), блокируются на любом сайте со строгой политикой
Content-Security-Policy, а сетевые запросы по-прежнему подчиняются правилам same-origin и директивеconnect-srcCSP.
1. Живое редактирование любой страницы с помощью design mode
Discover how at OpenReplay.com.
Превратите всю страницу в редактируемый документ, чтобы проверять текст, отступы и вёрстку на живом сайте без открытия DevTools:
javascript:document.designMode="on";void 0;Установка document.designMode в значение "on" делает весь документ редактируемым — это тот же эффект, что и contenteditable="true", но применяется ко всей странице, а не к отдельному элементу. Кликните на любой заголовок или абзац и начните вводить текст. Используйте этот букмарклет, когда заказчик спрашивает «а что если на этой кнопке написать X» или вы хотите проверить, не сломает ли более длинное название продукта навигационную панель, — не трогая кодовую базу.
Завершающий void 0 здесь важен. javascript:-URL, последнее выражение которого является строкой, воспринимается как HTML-документ, к которому браузер выполняет переход; void 0 принудительно возвращает нестроковое значение, и страница остаётся на месте. Хотите редактировать только одну область? Замените на javascript:void(document.body.contentEditable=true).
2. Подсветка всех элементов для отладки вёрстки
Отобразите границы блоков всех элементов одновременно — незаменимо для обнаружения переполнения, смещений и лишних отступов:
javascript:document.querySelectorAll("*").forEach(e=>e.style.background="rgb(0 0 0 / 10%)");void 0;Этот код применяет чёрный фон с прозрачностью 10% ко всем элементам на странице. Поскольку полупрозрачные слои накладываются друг на друга, вложенные элементы отображаются всё темнее, что позволяет визуально определить глубину DOM и сразу увидеть, какой контейнер шире своего родителя. Если вы предпочитаете чёткие границы вместо заливки, замените строку с фоном на обводку: e.style.outline="1px solid rgb(255 0 0 / 40%)". Обводки не влияют на вёрстку — в отличие от рамок, они не занимают место в блочной модели, — поэтому геометрия страницы, которую вы отлаживаете, остаётся нетронутой.
3. Отображение скрытых полей с паролем
Переключите все поля с паролем в режим отображения открытого текста:
javascript:(()=>{document.querySelectorAll('input[type=password]').forEach(el=>el.type='text')})();Этот код перебирает все элементы input[type=password] и меняет их type на text, раскрывая текущее значение. Используйте его при отладке формы аутентификации, для проверки того, что именно ввёл менеджер паролей или автозаполнение браузера, или для подтверждения того, что при вставке не был захвачен пробел в конце. Код читает живой DOM так же, как это делал бы встроенный отладчик — записи сессий при сбоях входа нередко показывают, что автозаполнение ввело незначительно неверное значение, и это самый быстрый ручной способ подтвердить подобный класс ошибок.
4. Получение любого цвета с экрана с помощью встроенного пипетки
Выберите любой пиксель на экране и получите его значение в формате hex:
javascript:void(async()=>{try{prompt('HEX:',(await new EyeDropper().open()).sRGBHex)}catch(e){alert(e)}})()Этот код вызывает EyeDropper API, который превращает курсор в лупу с пипеткой; выбранный цвет возвращается в виде sRGBHex и отображается в диалоге prompt, откуда его можно скопировать. Важный нюанс: EyeDropper API доступен только в Chromium-браузерах (Chrome и Edge), только в защищённых контекстах (HTTPS), а Firefox и Safari по состоянию на 2026 год его не поддерживают. Кроме того, API требует пользовательского взаимодействия — open() выбрасывает исключение, если не вызван в результате кратковременной активации пользователем — однако клик по букмарклету является пользовательским жестом, поэтому вызов срабатывает корректно. Блок try/catch перехватывает отклонение промиса, которое возникает при нажатии Esc вместо выбора цвета.
5. Подключение мобильных DevTools с помощью eruda
Получите полноценную консоль и инспектор DOM на любой странице — в том числе на телефоне без DevTools:
javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/eruda';s.onload=function(){eruda.init()};document.head.appendChild(s)})();Этот код добавляет тег <script>, который загружает eruda — консоль для мобильных браузеров (текущая стабильная версия 3.4.3) — и вызывает eruda.init() после загрузки, отображая панель DevTools поверх страницы. Это незаменимый инструмент для отладки на реальных устройствах, к которым нельзя подключить настольный инспектор. Два важных момента: незафиксированный URL cdn.jsdelivr.net/npm/eruda всегда отдаёт последнюю опубликованную сборку, а темп выпуска обновлений eruda замедлился (более года без новых версий на npm), поэтому воспринимайте его как стабильный, но не активно поддерживаемый инструмент. Поскольку букмарклет загружает внешний скрипт, на него распространяются ограничения CSP, описанные далее.
Почему мой букмарклет не работает?
Четыре сценария сбоев объясняют почти все случаи «просто не работает»:
| Проблема | Причина | Решение |
|---|---|---|
| Часть кода игнорируется | Комментарий // отключает всё, что идёт после него в одной строке | Используйте /* */; букмарклет — это одна строка |
| Страница переходит по адресу или отображает сырой текст | Последнее выражение вернуло строку, которая отрендерилась как HTML | Завершите выражением void 0 или оберните в void(...) |
| Букмарклет с eruda или внешним скриптом молча не срабатывает | Строгая директива CSP script-src блокирует внедряемый скрипт | Обходного пути на стороне клиента нет; политика сайта имеет приоритет |
Букмарклет с fetch() заблокирован | Политика same-origin и директива CSP connect-src ограничивают кросс-доменные запросы | Обращайтесь только к ресурсам того же домена или к CORS-совместимым эндпоинтам |
Случай с CSP стоит запомнить особо: на сайте со строгой Content-Security-Policy — попробуйте букмарклет с eruda на GitHub и сравните с поведением на странице с мягкой политикой — консоль просто не появится, а в (настоящей) консоли будет зафиксировано нарушение CSP. Кроме того, сама javascript:-навигация может быть заблокирована директивой script-src.
Как написать собственный букмарклет?
Чтобы написать собственный букмарклет, оберните код в IIFE внутри javascript:-URL и завершите DOM-изменяющие выражения через void 0, чтобы страница не выполняла переход к строковому возвращаемому значению:
javascript:(function(){/* your code here */})();IIFE изолирует переменные от глобальной области видимости страницы, а javascript:foo() по соглашению предваряется void, чтобы предотвратить случайную навигацию при возврате строки. Напишите и отладьте логику сначала в консоли DevTools, затем сверните её в одну строку — удалив комментарии // — и вставьте в качестве URL закладки. Всё, что вы можете ввести в консоли, можно сохранить как букмарклет и запускать одним кликом.
Часто задаваемые вопросы
Почему мой букмарклет перестаёт работать на середине кода?
Букмарклет — это одна строка, поэтому однострочный комментарий // отключает все символы после него, включая закрывающие скобки и вызовы функций. Замените все // комментарии на /* блочные */, либо удалите их полностью. При сворачивании многострочного кода из консоли в букмарклет сначала удалите все // комментарии, поскольку перевод строки, который обычно их завершает, в однострочном формате отсутствует.
В чём разница между designMode и contentEditable в букмарклете?
Установка document.designMode в значение 'on' делает весь документ редактируемым одним выражением, тогда как contentEditable задаётся для каждого элемента отдельно, поэтому document.body.contentEditable = true делает редактируемой только область body. Используйте designMode, когда хотите кликать в любой заголовок, абзац или кнопку на всей странице; используйте contentEditable, когда нужно ограничить редактирование одним контейнером, оставив остальную часть страницы неизменной.
Работает ли букмарклет с EyeDropper в Firefox или Safari?
Нет. EyeDropper API доступен только в Chromium-браузерах — Chrome и Edge — и только по HTTPS в защищённом контексте; по состоянию на 2026 год Firefox и Safari его не поддерживают. API также требует кратковременной активации пользователем, однако клик по букмарклету считается пользовательским жестом, поэтому open() срабатывает корректно при таком способе вызова. В неподдерживаемых браузерах букмарклет выбрасывает исключение, поскольку конструктор EyeDropper не определён.
Может ли букмарклет выполнять кросс-доменные fetch-запросы?
Не без ограничений. Вызов fetch() внутри букмарклета выполняется в контексте текущей страницы, поэтому подчиняется политике same-origin и директиве connect-src CSP сайта. Запросы к другому домену блокируются, если только этот эндпоинт не отправляет корректные заголовки CORS. Ограничивайте сетевые вызовы в букмарклетах тем же доменом, что и страница, или CORS-совместимыми API; обходного пути на стороне клиента для обхода политики сайта не существует.
