Поправить текст отлаживаемой веб-страницы можно прямо в браузере не прибегая к правкам HTML-кода, используя стандартную функцию консоли для редактирования содержимого страницы.
При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.
Однако существует специальная команда document.designMode = ‘on’ которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.
Для вызова команды вам потребуется произвести несколько несложных действий:
- Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
- В появившемся окне выберите вкладку консоль;
- Укажите команду document.designMode = ‘on’ ;
- Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.
Как Скачать Видео из ВКонтакте без программ через код элемента! Самый Быстрый и Легкий Способ 2023
Обратите внимание, что все изменения локальны и видны только вам. При перезагрузке страницы они исчезнут.
Для чего будет полезна команда:
- изменять тексты и подменять данные на сайте;
- тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
- проверять различные форматы написания текста и быстро принимать решения;
- быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
- создавать фейковые скриншоты с содержимым страницы.
Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.
Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.
Надеюсь, материал оказался полезным. Обязательно пишите ваши комментарии или делитесь ссылкой на статью с коллегами и друзьями.
Что важного в диджитал на этой неделе?
Каждую субботу я отправляю письмо с новостями, ссылками на исследования и статьи, чтобы вы не пропустили ничего важного в интернет-маркетинге за неделю.
Статьи по теме:
- Где искать веб-разработчиков: Как мы нашли подрядчика на разработку сайта
- Яндекс заменяет тИЦ на ИКС — новый показатель качества сайта
- Как отключить слежение Google Analytics за пользователем. Используем простое расширение для блокировки кода отслеживания
- Как убрать фон с картинки без специальных программ и навыков
- Как правильно разметить ссылки в мессенджерах для Яндекс.Метрики и Google Analytics
Автор */ Константин Булгаков —> Опубликовано 12/10/2019 20/02/2023 Рубрики Материалы, Практикум
Как быстро редактировать текст на странице с помощью консоли разработчика Chrome: 2 комментария
Как вы пишите что по этой команде можно изменять текст на странице но как я поняла сохранить нельзя, так? Вот у меня есть страница в Инстаграм и я работаю в компьютере, мне это удобно и лучше чем на телефоне, но вот одна беда … Невозможно изменить уже написанное… Есть ли какая-нибудь возможность редактировать и сохранять в режиме онлайн ? document.designMode = ‘on’
Источник: konstantinbulgakov.com
Как просмотреть код элемента в Яндексе?
Вам нужны инструменты разработчика. Их можно открыть из дополнительного меню или горячими клавишами CTRL+SHIFT+I (Ай большая). Кликните в открывшемся разделе на значок стрелка в квадрате в верхнем левом углу и будет доступен код элемента на который наведена мышь.
Это я понимаю.Я же написала,мол,он заблокирован.Где-то пишут,типа,сделай аккаунт,так он у меня есть,и. Читать дальше
Показать ещё 1 комментарий
Инженер систем телекоммуникации. · 28 апр 2020
CTRL+SHIFT+I работает в окне браузера, на странице активации отдельных программ не работает, можно пробовать CTRL+u и открывается вся страница в html и искать клавишей CTRL+f, в открывшемся окне ввести поисковое слово. Удачи. У меня не работает на странице активации Win10. Успехов. Удачи
Источник: yandex.ru
Просмотр HTML-кода страницы в браузере
Каждая страница в интернете является HTML-кодом с добавлением других веб-элементов: CSS, JavaScript, ActionScript. Просмотр ее кода доступен любому пользователю, и каждый браузер предоставляет для этого несколько инструментов.
Просмотр HTML-кода страницы в браузере
Просмотр кода страницы сайта может понадобиться по разным причинам: например, для получения расширенных сведений о том, из чего состоит страница, копирования или редактирования какой-то информации, в обучающих целях для начинающих веб-разработчиков. Разберем основные способы решения поставленной задачи.
Способ 1: Горячая клавиша
Браузером намного удобнее управлять, если выучить и применять на практике различные горячие клавиши. Так, для быстрого открытия исходного кода достаточно нажать сочетание Ctrl + U. Оно работает во всех веб-обозревателях, поэтому даже при использовании разных программ комбинация не утратит актуальности.
Способ 2: Контекстное меню
Для тех, кому комфортнее пользоваться мышкой, предназначен альтернативный вариант, и для всех браузеров он практически одинаков.
- Google Chrome: нажмите правой кнопкой мыши по пустому пространству и выберите пункт «Просмотр кода страницы».
- Яндекс.Браузер: ПКМ по пустому пространству >«Просмотреть код страницы».
В результате этих действий будет открыта новая вкладка с интересующим вас содержимым. Она будет одинаковой независимо от браузера.
Способ 3: Инструменты разработчика
Помимо просмотра сплошного кода, в браузерах есть инструменты разработчика, позволяющие получать различные сведения о странице более наглядно и редактировать их. Среди этих инструментов есть и тот, который выводит весь HTML/CSS код страницы, позволяя юзеру исследовать конкретные элементы страницы в режиме реального времени.
- Google Chrome: жмите правой кнопкой мыши по странице или объекту и выбирайте «Просмотреть код».
- Яндекс.Браузер: щелкните правой кнопкой мыши по странице или интересующей области и выберите «Исследовать элемент».
- Opera: кликните ПКМ по нужной области страницы, а затем по варианту «Просмотреть код элемента».
- Mozilla Firefox: ПКМ по любой области страницы или конкретной части — «Исследовать элемент».
По умолчанию откроется вкладка «Elements» (в Firefox — «Инспектор»), где вы сможете просматривать HTML и CSS код всей страницы или конкретного объекта. Чтобы узнавать больше о конкретном элементе страницы, нажмите на кнопку со стрелкой и наводите на интересующий объект. Во всплывающем окне будет отображаться вся сопутствующая информация, а в инструментах разработчика автоматически развернется та область кода, которая отвечает за выбранный элемент.
С остальными возможностями этой вкладки юзер сможет разобраться самостоятельно, а также внести изменения при необходимости.
Из этой небольшой статьи вы узнали 3 способа того, как можно открывать и просматривать HTML-код любых страниц интернета. Если в статье вы не нашли нужного веб-обозревателя, просто возьмите предложенные инструкции за основу — большинство современных браузеров используют одинаковый движок — Chromium или его форк, поэтому принцип вызова нужного раздела почти ничем не отличается.
Источник: lumpics.ru