Клуб технических писателей

Нельзя просто так взять и снять скриншот браузера

Алексей
11 августа 2014, 16:39

Иногда для веб-страниц, которые мы документируем, нельзя сходу снять скриншот. Например: 

  • Отображаемые данные секретны, и поэтому нужно заменить их на тестовые. Но настоящий тестовый аккаунт техписателю недоступен.
  • Или наоборот — перед нами тестовый интерфейс с бессмысленной рыбой, а хорошо бы сделать текст, имена и названия похожими на реальные.
  • В интерфейсе опечатки. Они вот-вот будут исправлены, но скриншоты нужно делать прямо сейчас.

Ниже я расскажу, как поменять любой текст на веб-странице без регистрации и SMS.

Любая веб-страница, которую отображает браузер — это HTML-файл, загруженный из интернета. Уже загруженый файл мы можем подправить прямо у себя на компьютере и увидеть изменения в браузере.

К счастью, нам не придется обманывать браузеры — все они уже довольно дружелюбны к своим пользователям и сами предоставляют инструменты для такой правки на лету. В примере, который мы рассмотрим ниже, используется Яндекс.Браузер.

Итак, инструкция:

  1. Откройте нужную страницу в браузере. Убедитесь, что нормальный скриншот снять невозможно.
  2. Нажмите правой кнопкой мыши на текст, который вам не нравится. В выпавшем меню выберите Проверить элемент.
  3. В нижней части окна откроется панель инструментов разработчика. Фокус в этой панели окне будет на том HTML-элементе, в который вложен интересующий вас текст. (Возможно, придется развернуть несколько тегов, прежде чем вы увидите нужные слова — чтобы развернуть тег, нажмите на стрелку в начале строки.)
  4. Добравшись до текста, дважды кликните на нем, чтобы начать редактировать.
  5. Внеся изменения, нажмите Enter. Браузер сразу изменит текст на самой странице. После того, как весь ненужный текст исправлен, можно снимать!

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


А как же другие браузеры?

Инструкция подходит для всех браузеров, основанных на Chromium, а также для последних Internet Explorer, Firefox и Safari (в Safari сначала нужно включить инструменты разработчика: Настройки > Дополнения > Показывать меню «Разработка» в строке меню). Отличия нашлись только в названии пункта меню из 2 шага: вместо Проверить элемент можно увидеть Проверить объект. Но работают они совершенно аналогично.

3 комментария
Способ отличный.
Еще в тему: лучше использовать спец тулзы для создания скриншотов. Многие из них умеют выделять и снимать часть экрана. После чего изображение сразу готово к размещению в тексте, без дополнительной обработки в редакторе.

Да, мы используем SnagIt, который позволяет быстро по мелочи поправить, если все-таки нужно.

Спасибо большое за полезную информацию!