Как быстро редактировать текст на странице с помощью консоли разработчика Chrome

Поправить текст отлаживаемой веб-страницы можно прямо в браузере не прибегая к правкам HTML-кода. Предлагаю познакомиться с мощной возможностью консоли для редактирования содержимого страницы. Инструмент будет полезен вебмастерам, копирайтерам и маркетологам.

При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.

Однако существует специальная команда document.designMode = 'on' которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.

Для вызова команды вам потребуется произвести несколько несложных действий:

  1. Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
  2. В появившемся окне выберите вкладку консоль;
  3. Укажите команду document.designMode = 'on';
  4. Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.

Консоль Google Chrome

Обратите внимание, что все изменения локальны и видны только вам. При перезагрузке страницы они исчезнут.

Для чего будет полезна команда:

  1. изменять тексты и подменять данные на сайте;
  2. тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
  3. проверять различные форматы написания текста и быстро принимать решения;
  4. быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
  5. создавать фейковые скриншоты с содержимым страницы.

Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.

Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.

Надеюсь, материал оказался полезным. Обязательно пишите ваши комментарии или делитесь ссылкой на статью с коллегами и друзьями.

Сохраните ссылку

Напишите комментарий

avatar
  Подписаться  
Уведомлять о