Загрузить PDF
Загрузить PDF
Ни один шутник не откажется от возможности временно изменить способ отображения сайта на компьютере, не говоря уже о множестве практических применений, которые эта возможность открывает. Какие бы цели вы ни преследовали — шутливые, утилитарные или, не дай бог, зловредные, — изменить отображение сайта довольно просто.
-
1
Найдите ссылку на букмарклет, изменяющий текущий сайт. Самый простой способ сделать это — ввести в Google запрос: «изменить текущий сайт букмарклет» (без кавычек). Найдите подходящую ссылку среди результатов поиска.[1]
-
2
Перетащите ее на панель закладок. Отредактируйте сайт, на котором вы нашли ссылку. Для этого просто щелкните по ней или перетащите на панель закладок. Это позволит вам использовать ссылку на любом сайте.
-
3
Используйте ссылку. Откройте страницу, которую хотите изменить, и нажмите на закладку. И хотя это не принесет заметного эффекта, теперь вы сможете открыть программный код страницы и отредактировать его по своему усмотрению.[2]
Реклама
-
1
Найдите текст или фотографию, которую хотите изменить. Откройте страницу в Chrome, которую хотите отредактировать. Если вы хотите отредактировать текст, выделите слова, которые хотите изменить, и щелкните по ним правой кнопкой мыши. Если вы хотите отредактировать фотографию, просто щелкните по ней правой кнопкой мыши.[3]
- Чтобы отредактировать фотографию, вам нужно будет загрузить другое фото и заменить на него текущее. Для этого вам нужно заменить URL-адрес в исходном коде новым URL-адресом.
-
2
Откройте инспектор кода. Щелкните правой кнопкой мыши по странице, чтобы отобразить контекстное меню. Нажмите на «Просмотреть код». Внутри текущей страницы откроется новое окно с HTML кодом.[4]
- Если ваш компьютер работает под управлением ОС Windows, откройте инспектор кода, нажав F12.
-
3
Найдите текст, который хотите изменить, в инспекторе кода. Текст, выделенный в инспекторе, будет выделен и на исходном сайте. При редактировании изображения в инспекторе будет выделен большой фрагмент текста с подчеркнутым URL-адресом в конце.
-
4
Измените код. Если вы хотите изменить текст, просто отредактируйте выделенные слова. Если вы хотите изменить фотографию, замените ссылку на фото другой ссылкой, не касаясь остальной части кода.
- Если допустите ошибку, нажмите Command+Z на Mac или Control+Z на Windows, чтобы отменить изменение.
-
5
Завершите редактирование. Нажмите «Enter» и закройте инспектор кода. Теперь на странице сайта будет отображен текст или изображение, которое вы добавили. Естественно, сама страница не была отредактирована, и при ее обновлении все внесенные вами изменения пропадут.
Реклама
-
1
Включите меню «Разработка». Нажмите на меню «Safari» в верхней части экрана. Выберите «Настройки», а затем «Дополнения» из меню в верхней части окна «Настройки». Установите флажок рядом с параметром «Показывать меню “Разработка” в строке меню» в нижней части окна. Меню «Разработка» появится в строке меню между опциями «Закладка» и «Окно».[5]
-
2
Найдите текст или фотографию, которую хотите изменить. Перейдите на страницу, которую хотите отредактировать. Если вы хотите отредактировать текст, выделите слова, которые хотите изменить, и щелкните по ним правой кнопкой мыши. Если вы хотите отредактировать фотографию, просто щелкните по ней правой кнопкой мыши.
- Чтобы отредактировать фотографию, вам нужно будет загрузить другое фото и заменить на него текущее. Для этого вам нужно заменить URL-адрес в исходном коде новым URL-адресом.
-
3
Откройте инспектор кода. Щелкните по странице правой кнопкой мыши, чтобы отобразить контекстное меню. Нажмите на «Исследовать элемент». Внутри текущей страницы откроется новое окно с HTML кодом.
- Окно «Просмотреть код» можно также открыть, раскрыв меню «Разработка» и выбрав пункт «Подключить веб-инспектор». Найдите искомый текст, нажав Command+F на Mac или Control+F в Windows и введя текст, который хотите изменить. Стоит отметить, что это более окольный путь, чем предыдущий способ.
- Чтобы открыть инспектор кода, используйте сочетание клавиш Alt+Command+I на Mac или клавишу F12 на Windows.
-
4
Измените код. Если вы хотите изменить текст, просто отредактируйте выделенные слова. Если вы хотите изменить фотографию, замените ссылку на фото другой ссылкой, не касаясь остальной части кода.[6]
- Если допустите ошибку, нажмите Command+Z на Mac или Control+Z на Windows, чтобы отменить изменение.
-
5
Завершите редактирование. Нажмите «Enter» и закройте инспектор кода. Теперь на странице сайта будет отображен текст или изображение, которое вы добавили. Естественно, сама страница не была отредактирована, и при ее обновлении все внесенные вами изменения пропадут.
Реклама
Об этой статье
Эту страницу просматривали 68 727 раз.
Была ли эта статья полезной?
Перейти к содержимому
Поправить текст отлаживаемой веб-страницы можно прямо в браузере не прибегая к правкам HTML-кода, используя стандартную функцию консоли для редактирования содержимого страницы.
При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.
Однако существует специальная команда document.designMode = 'on' которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.
That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) September 27, 2019
Для вызова команды вам потребуется произвести несколько несложных действий:
- Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
- В появившемся окне выберите вкладку консоль;
- Укажите команду
document.designMode = 'on'; - Далее нажмите
Enterи приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.
Обратите внимание, что все изменения локальны и видны только вам. При перезагрузке страницы они исчезнут.
Для чего будет полезна команда:
- изменять тексты и подменять данные на сайте;
- тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
- проверять различные форматы написания текста и быстро принимать решения;
- быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
- создавать фейковые скриншоты с содержимым страницы.
Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.
Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.
Надеюсь, материал оказался полезным. Обязательно пишите ваши комментарии или делитесь ссылкой на статью с коллегами и друзьями.
Что важного в диджитал на этой неделе?
Каждую субботу я отправляю письмо с новостями, ссылками на исследования и статьи, чтобы вы не пропустили ничего важного в интернет-маркетинге за неделю.
Узнать подробнее →
Статьи по теме:
- Как перенести ресурс Google Analytics из одного аккаунта в другой
- Конструктор сайтов Тильда: возможности и ограничения работы из личного опыта по сборке сайта
- Как установить код отслеживания Google Analytics на все страницы сайта и отдельные разделы с помощью Google Tag Manager
- Странная работа Вебвизора: Визиты без целей, плеер прерывает запись и проблема с кнопками сортировки записей по датам
- Как отслеживать видео с помощью Google Analytics и Google Tag Manager
Метки #инструменты
Меняем текстовое содержимое элемента
Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.
Возьмём абзац с текстом:
И перезапишем его текстовое содержимое:
Обратите внимание, что строки с текстом нужно заключать в кавычки.
Когда инструкция выполнится, текст внутри абзаца изменится:
Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.
Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.
Как быстро редактировать текст на странице с помощью консоли разработчика Chrome
При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.
Однако существует специальная команда document.designMode = ‘on’ которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.
That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) September 27, 2019
Для вызова команды вам потребуется произвести несколько несложных действий:
- Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
- В появившемся окне выберите вкладку консоль;
- Укажите команду document.designMode = ‘on’ ;
- Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.
Обратите внимание, что все изменения локальны и видны только вам. При перезагрузке страницы они исчезнут.
Для чего будет полезна команда:
- изменять тексты и подменять данные на сайте;
- тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
- проверять различные форматы написания текста и быстро принимать решения;
- быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
- создавать фейковые скриншоты с содержимым страницы.
Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.
Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.
Надеюсь, материал оказался полезным. Обязательно пишите ваши комментарии или делитесь ссылкой на статью с коллегами и друзьями.
Как пользоваться вкладкой Elements
Инструменты разработчика в браузерах очень мощные. Они помогут отредактировать страницу прямо в браузере, даже не особо зная, что такое HTML. Можно заменять текст, картинки, передвигать целые блоки на лету, т.е. прямо в браузере, не сохраняя никаких файлов. Правда, эти изменения носят временный характер: при обновлении страницы изменения пропадают.
Инструменты отлично подходят, когда хочется “попробовать, как это выглядит”.
В этой статье мы пользуемся браузером Google Chrome, но в других браузерах всё работает схожим образом.
Поменять текст
Чтобы заменить любой текст на странице, достаточно кликнуть правой клавишей мыши по нужному тексту и выбрать “Просмотреть код”. Откроется код этого элемента, где вы сразу увидите нужный текст. Кликните по нему дважды, чтобы заменить. При нажатии на Enter вы увидите, что текст поменялся и на странице.
Попробуйте повторить приём ниже. Где пробовать.
Поменять картинку
Чтобы заменить картинку, нужно найти её путь: обычно это какая-то длинная ссылка внутри элемента с названием img. Довольно просто, ничем не отличается от смены текста.
В примере ниже мы задумали у второго урока поставить такую же картинку, как у первого. Попробуйте повторить приём ниже. Где пробовать.
Обратите внимание на прикольную фичу: при наведении на ссылку Chrome показывает миниатюрку картинки, которая лежит по этой ссылке. Мелочь, а приятно.
Найти блок вёрстки
Весь HTML устроен иерархически: большие элементы на странице складываются из элементов поменьше, а те, в свою очередь, тоже делятся на части и так пока не дойдёт дело до самых простых элементов на странице — текста, картинок и прямоугольников. Например, на странице Энциклопедии Девмана есть строка, в которой лежит 3 списка из рубрик энциклопедии.
Видно, что они “вложены” в строку — при желании их можно “свернуть”:
При наведении на строчки элементы на странице будут выделяться синим. Чтобы выделить весь элемент поднимайтесь “наверх” по коду, пока он не выделится целиком. Если выделилось слишком много, то вы поднялись слишком высоко, теперь спускайтесь обратно. Перемещайтесь по элементам, пока не найдете нужный.
Найденный элемент можно отредактировать прямо в браузере, выбрав в контекстном меню Edit as HTML . Правда, в файл изменения не попадут. Ещё можно разом скопировать весь блок с вложенными в него элементами или даже удалить их все. О том как это сделать читайте ниже.
С инструментами разработчика любой блок на странице сайта найти проще простого, но вот повторить трюк с текстовым редактором и HTML файлом будет куда сложнее. Ориентируйтесь по названию тега, его классам и его родителям. Например:
С помощью инструментов разработчика вы поняли, что вам нужен элемент <div js-article-content»> . Значит в файле надо искать тег div с классами row и js-article-content и с родителями body и article . Задача сильно упростится, если в редакторе свернуть часть кода, в англоязычном интерфейсе этот приём называется code folding .
Помните, что на странице может быть много одинаковых с виду элементов, с одинаковым тегом и классами. Ориентируйтесь прежде всего на родителей — внутри каких элементов он находится. Начинайте поиск с тега <body> — этот элемент на странице всегда один и находится на самом верху.
В коде теги ищут по их родителям
Скопировать элемент
Если вы уже нашли элемент через инструменты разработчика, то кликните по нему правой кнопкой мыши и в выпадающем меню выберите Copy outerHTML . HTML разметка скопирована в буфер обмена, теперь можете вставить её в текстовый редактор.
Удалить элемент
Чтобы удалить элемент, нужно так же кликнуть по нему правой кнопкой мыши и выбрать “Просмотреть код”. Далее выберите его целиком. Когда вы выберете нужный элемент — жмите Delete .
В этой гифке мы задумали удалить вторую статью “Как установить Python”. Попробуйте повторить приём ниже. Где пробовать.
В гифке видно, как мы “поднимаемся” наверх, выделяя всё больше. Как только “поднялись” достаточно — свернули всё, что внутри с помощью “стрелочки” слева. Стало видно, что некие li — это элементы списка (на самом деле это list item), а в некоем ul лежит весь список (это unordered list).
Попробуйте бесплатные уроки по Python
Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.
3 февраля, 2023 в 1:41 дп
Добрый день! Задался вопросом, как редактировать текст на сайте в режиме онлайн. То есть, чтобы не лазить в код и прочее. Наверное, отличная штука для предварительного просмотра и внесения изменений. Кто знает – как это лучше всего сделать (быстро и просто). Заранее благодарен.
Известно несколько приемов редактирования текстов и других элементов на любом сайте в режиме онлайн. Ниже подробно опишу все популярные и рабочие способы, как это сделать быстро и без напряга, в том числе через код элемента в Google Chrome.
Консоль разработчика (через «Просмотреть код») в Google Chrome
Это самый простой и быстрый способ. Просто выделяете любой текст или его часть, которую хотите редактировать. Затем жмете правую кнопку мыши и выбираете «Просмотреть код».
Откроется блок в правой части страницы, в который можно вносить изменения. Кликаете правой клавишей мыши на выделенный фрагмент и выбираете «Редактировать как HTML».
Рассмотрим на примере. Допустим, вы зашли в группу «Барахолка». Увидели пост о продаже автомобиля «Газель» с ценой и прочими характеристиками.
Ради шутки внесли изменения. Взяли и поменяли стоимость на 16 р – потом сделали скрин и отправили другу, который ищет такую машину по дешевой цене.
Таким же способом вы сможете изменять все элементы на любом сайте.
Firefox и инструменты веб-разработчика
Если вы работаете в Firefox, то можете аналогичным способом редактировать контент на любой web-page в пару кликов.
Пошаговая инструкция:
1. Откройте браузер и конкретную страницу.
2. Кликните на три линии наверху и выберите «Другие инструменты» в раскрывшемся окне.
3. Нажмите «Инструменты веб-разработчика».
4. Это должно открыть специальную панель в нижней части окна браузера для просмотра исходного кода страницы и редактирования текста или других элементов.
5. Активируйте курсор слева в панели. Используйте его, чтобы выделять элементы, которые надо редактировать.
6. Приступайте к редактированию элементов.
Когда внесете все необходимые изменения, то кликните в любом пустом месте экрана и закройте инспектор панели.
Inspect Element (расширение для Google Chrome)
Есть такой инструмент для временного редактирования элементов на сайте, который поддерживается большинством web-браузеров, – называется Inspect Element. Широко используется разработчиками, дизайнерами и другие специалистами для тестирования web-ресурса, без рисков что-то сломать в верстке. Ниже подробно расскажу, что такое Inspect и как его использовать для временного редактирования кода.
Inspect Element – это отдельное расширение от Google Chrome. Позволяет видеть и редактировать коды HTML, Javascript и CSS конкретного сайта. Например, легко изменять цвета, шрифты и многое другое. Установить его можно из магазина Хрома по этой ссылке.
Разработчики чаще всего используют Inspect для временного редактирования кода. Это полезно, потому что можно сразу тестить изменения в своем браузере в рамках одного сеанса. Это означает, что получится определить причины практически любых ошибок в коде, не рискуя нарушить функциональность сайта или вызвать дополнительные проблемы.
Как работать в Inspect
Подробная инструкция по работе:
- Установите расширение с официальной страницы.
- Перейдите на сайт, который хотите редактировать.
- Кликните на расширения и выберите Inspect.
- Щелкните на тот элемент, который хотите изменить в режиме онлайн. Например, выбрав Border Sideline.
Кто и для чего может использовать изменение содержимого страницы через код элемента?
Этот инструмент можно использовать для разных задач, поэтому он облюбован специалистами различных сфер деятельности. Кому же он приглянулся?
- Web-дизайнеры. Они могут использовать инструменты разработчика перед реализацией цветовых элементов, общего дизайна или макетов, установкой адаптивной верстки – короче, для предварительного анализа. Например, внести какие-то изменения, сделать скрин и отправить заказчику. Если последнему понравится, то приступают уже к настоящим изменениям.
- Маркетологи. Они применяют инструмент для принятия конкретных маркетинговых решений. Например, анализируют с помощью этого инструмента сайт конкурента, чтобы протестить элементы, которые могут увеличить конверсию.
- Разработчики. Быстро проверяют изменения, которые необходимо внести.
5 февраля, 2023 в 2:14 дп
Всем привет. Провести изменения можно на любом сайте независимо от движка, просто кликаем правой кнопкой мыши на выделенном элементе и переходим в код. При этом можно править не только текст, но и картинки. В принципе можно провести полную замену исходного кода. Это простая и крутая штука, но требуются хотя бы минимальные знания в CSS/Html.
- Ответ изменён 5 дней, 19 часов назад пользователем
Devaka-ne-rabotaet.
5 февраля, 2023 в 2:28 дп
Не совсем разделяю вышеописанный метод, поскольку работать через код – не самый удобный вариант. Лично сам пользуюсь консолью для разработчиков от Гугла. Функциональный редактор, который позволяет быстро редактировать содержимое на сайте.
Чтобы проще понять суть, расскажу алгоритм действий:
- На интересующем сайте вызвать консоль админа. Для этого нужно нажать F12.
- В открывшемся окне выбрать вкладку Console.
- В нижнем поле прописать следующий код – «document.desighnMode = ‘on’».
- После этого наводим мышкой на любой элемент и проводим необходимые изменения.
В таком формате можно менять практически все: шрифты, цвет, контент, проверять формы написания. Именно таким методом пользуются мошенники, когда делают скрины с отредактированной фейковой информацией.
6 февраля, 2023 в 2:55 дп
Зачем усложнять себе жизнь какими-то условными обозначениями или знанием языков программирования в поисках нужного куска в коде. Можно жить проще:
- на странице выделить необходимый элемент
- нажать правую клавишу мышки и выбрать опцию «посмотреть код»
- далее будет представлен интересующий фрагмент
- еперь можно править все, что пожелается
- Конечное же, после перезагрузки страницы все изменения исчезнут. Это удобный и быстрый вариант для проверки шрифтов или других нововведений на сайте.
6 февраля, 2023 в 2:56 дп
В силу своей работы всегда допиливаю страницы. При этом требуется замена шрифтов, картинок, цвета и самого текстового контента, соответственно, смена элементов через код мне близка как никому. По поводу вариантов, указанных выше, могу сказать, что они рабочие и имеют право на существование, здесь уже кому как удобнее.
Для мелких корректировок я просто выделяю нужный элемент и провожу правку через правую кнопку мыши. Что касается более глобальных изменений, то, конечно же, лучше работать в полноразмерном редакторе, через консоль администратора.
6 февраля, 2023 в 2:57 дп
Доброго времени суток. Я за консоль разработчика в Chrome – это наиболее удобный и быстрый вариант любых правок на сайте. Например, таким образом, быстро делаю нужные правки в коде текста, картинок или дополнительных параметров, которые отвечают за внешний вид всего контента. Ранее делала все через правую кнопку, а также команду document.designMode = ‘on’ и была уверена, что использую наиболее эффективные варианты, но как оказалось, это не так.
6 февраля, 2023 в 2:59 дп
Зачем изобретать велосипед – нажми Ctrl+Shift+I или F12 и делай любые правки. Все просто, понятно и не нужно быть супер профессионалом, чтобы прописать пару кодов для желаемого результата. В то же время, если нужно провести правки на своем сайте, то зачем вообще мучить себя, когда можно быстро провести изменения из самого движка.
Here’s how to change text on a website, using F12 and Inspect Element, to create fake screenshots to amuse your friends.
Scroll through any social media website long enough, and you’ll eventually see a screenshot of a ridiculous conversation or similar text that seems outrageous. As it turns out, your instinct is right—most of these are actually fake.
You might not know that it’s really easy to doctor the text on a website and capture a screenshot of it. You don’t need any fancy photo editing software, either. WIn this article, we show you how to change text on a website using Chrome.
How to Edit Text on a Website
To change the text on any page, first load it in your browser. We’ll discuss Chrome here, but the process is similar in other browsers too.
With a page open, right-click on the chunk of text that you want to modify and choose Inspect (sometimes listed as Inspect Element). This will launch Chrome’s developer panel on the Elements page. If you’re wondering how to change text with F12, know that you can press F12 to open the same panel.
In that box, you’ll see the HTML for the page you’re visiting. See our introduction to HTML if this is unfamiliar to you.
Depending on the text you’ve selected, you’ll likely see some text in <p>, <div>, or other similar tags. Click the arrow next to those tags to expand the section and show the full text.
From there, simply double-click or right-click and choose Edit text on the block you want to change. Once you click away or hit Enter, the text will update.
You can do this as much as you like to change the various text. As you mouse over tags in the Elements panel, you’ll see the corresponding text on the page light up. You can remove entire blocks by right-clicking on them and choosing Delete element.
The page will retain your changes until you refresh it. Feel free to take a screenshot and share your funny edit wherever you like.
How to Fake Edit a Website Using Design Mode
If you love changing text on websites, you should know about Chrome’s Design Mode. This allows you to click any text and edit it immediately instead of having to sort through HTML.
To use it, press F12 to open Developer Options and switch to the Console tab. Then type the following line into the console (next to the arrow at the bottom of any warnings you see) and hit Enter:
document.designMode = "on"
Once you do this, you can click any text and immediately start typing to change it.
It only applies to the current tab, and you’ll have to do this every time you want to use it. But when you want to make a lot of changes to a page’s text, it’s worth it.
Changing Words on a Website Made Easy
Once your browser downloads a webpage, you’re free to make whatever changes you want to the copy that’s on your device. That’s why it’s so easy to change the text displayed on a website. Now you know how to edit website text and have a bit of fun!
If you enjoyed this, check out these funny computer-based practical jokes to play on your friends.
Image Credit: nevodka/Shutterstock
Here’s how to change text on a website, using F12 and Inspect Element, to create fake screenshots to amuse your friends.
Scroll through any social media website long enough, and you’ll eventually see a screenshot of a ridiculous conversation or similar text that seems outrageous. As it turns out, your instinct is right—most of these are actually fake.
You might not know that it’s really easy to doctor the text on a website and capture a screenshot of it. You don’t need any fancy photo editing software, either. WIn this article, we show you how to change text on a website using Chrome.
How to Edit Text on a Website
To change the text on any page, first load it in your browser. We’ll discuss Chrome here, but the process is similar in other browsers too.
With a page open, right-click on the chunk of text that you want to modify and choose Inspect (sometimes listed as Inspect Element). This will launch Chrome’s developer panel on the Elements page. If you’re wondering how to change text with F12, know that you can press F12 to open the same panel.
In that box, you’ll see the HTML for the page you’re visiting. See our introduction to HTML if this is unfamiliar to you.
Depending on the text you’ve selected, you’ll likely see some text in <p>, <div>, or other similar tags. Click the arrow next to those tags to expand the section and show the full text.
From there, simply double-click or right-click and choose Edit text on the block you want to change. Once you click away or hit Enter, the text will update.
You can do this as much as you like to change the various text. As you mouse over tags in the Elements panel, you’ll see the corresponding text on the page light up. You can remove entire blocks by right-clicking on them and choosing Delete element.
The page will retain your changes until you refresh it. Feel free to take a screenshot and share your funny edit wherever you like.
How to Fake Edit a Website Using Design Mode
If you love changing text on websites, you should know about Chrome’s Design Mode. This allows you to click any text and edit it immediately instead of having to sort through HTML.
To use it, press F12 to open Developer Options and switch to the Console tab. Then type the following line into the console (next to the arrow at the bottom of any warnings you see) and hit Enter:
document.designMode = "on"
Once you do this, you can click any text and immediately start typing to change it.
It only applies to the current tab, and you’ll have to do this every time you want to use it. But when you want to make a lot of changes to a page’s text, it’s worth it.
Changing Words on a Website Made Easy
Once your browser downloads a webpage, you’re free to make whatever changes you want to the copy that’s on your device. That’s why it’s so easy to change the text displayed on a website. Now you know how to edit website text and have a bit of fun!
If you enjoyed this, check out these funny computer-based practical jokes to play on your friends.
Image Credit: nevodka/Shutterstock
Автор:
Peter Berry
Дата создания:
16 Август 2021
Дата обновления:
2 Февраль 2023
Содержание
- меры
- Immyt
В этой статье: Измените веб-сайт с помощью любого браузера с помощью панели закладок. Измените веб-сайт с помощью Chrome. Отредактируйте веб-сайт с помощью ссылок Safari7.
Любой, кто любит шутки, понимает, что может временно изменить внешний вид веб-сайта на компьютере, и, к счастью, есть много способов сделать это. Ваши намерения должны быть скорее игривыми, чем злонамеренными, но независимо от вашего плана, операция довольно простая.
меры
Способ 1 Редактирование веб-сайта с помощью любого браузера с панелью закладок
- 1 Найдите ссылку на закладку «Редактировать текущий сайт». Самый простой способ сделать это — поиск в Google по запросу «редактировать букмарклет текущего веб-сайта». Среди результатов вы найдете много страниц с ссылкой, которую вы ищете. 2 Перетащите ссылку на панель избранного. Вы можете изменить веб-сайт, на котором вы нашли ссылку, просто нажав на нее, но вы должны перетащить ее на панель; таким образом, вы можете использовать его на всех веб-страницах. 3 Воспользуйтесь ссылкой. Откройте страницу, которую вы хотите редактировать, и нажмите на закладку. Вы не заметите никаких немедленных эффектов, но у вас будет возможность изменить весь текст, который находится на сайте.
Метод 2 из 3: изменить сайт с помощью Chrome
1 Найдите текст или изображение, которое вы хотите изменить. Откройте интересующую вас веб-страницу в Chrome. Если вы хотите изменить текст, выберите слова для изменения и щелкните по ним правой кнопкой мыши; если вы хотите отредактировать фотографию, щелкните правой кнопкой мыши, не выбирая ее.
- Чтобы отредактировать фотографию, необходимо загрузить изображение, которым вы хотите заменить существующее. Вы должны заменить исходный URL-адрес кода новым.
2 Откройте пункт «Проверка». Как только вы щелкнете правой кнопкой мыши, откроется меню. Нажмите «Проверить товар». В текущем окне появится другое окно с десятками строк HTML-кода.
- Если вы используете Windows, вы сможете открыть окно проверки элемента, нажав F12.
3 Найдите текст для редактирования в окне «Проверка элемента». Слова, которые вы выбрали на сайте, также должны быть выделены в окне. Если вместо этого вы хотите отредактировать фотографию, будет выделен более крупный текстовый раздел с незнакомым URL-адресом в конце.
4 Измените код. Чтобы изменить текст, просто напишите другое предложение вместо того, которое нужно заменить. Чтобы обменять фотографию, замените исходный URL-адрес новым, оставив остальной код без изменений.
- Если вы допустили ошибку, нажмите Command + Z на Mac или Control + Z на Windows, чтобы отменить операцию.
5 Завершите операцию. Нажмите «Enter», затем закройте «Inspect item». На веб-странице вы должны увидеть текст или изображение, которое вы ввели. Конечно, вы на самом деле не изменили код сайта, и эти изменения исчезнут при обновлении карты.
Метод 3 из 3: Изменить сайт с помощью Safari
- 1 Включить меню «Разработка». В Safari щелкните меню «Safari» на панели в верхней части экрана. Отсюда нажмите «Настройки», затем выберите «Дополнительно» в меню в верхней части окна «Настройки». Установите флажок «Показывать меню разработки в строке меню». Теперь вы увидите меню «Разработка» в верхней панели, между «Закладками» и «Окном». 2 Найдите текст или изображения для изменения. Откройте страницу, которая вас интересует. Чтобы редактировать текст, выберите слова для замены, затем щелкните правой кнопкой мыши; если вы хотите изменить фотографию, просто щелкните правой кнопкой мыши, не выбирая ее.
- Чтобы отредактировать фотографию, вы должны загрузить изображение, которое вы хотите вставить на свое место. Вы должны заменить исходный код URL на новый.
3 Откройте пункт «Проверка». Как только вы щелкнете правой кнопкой мыши, появится меню. Нажмите «Проверить товар». В текущем окне откроется новое окно с десятками строк HTML-кода.
- Вы также можете открыть окно «Проверка», щелкнув меню «Разработка» и выбрав «Показать веб-проверку». Найдите нужный текст, нажав Ctrl + F на Mac или Control + F в Windows и введите новые фразы. Этот метод более сложный. Вы также можете открыть веб-проверку с помощью сочетания клавиш Alt + Command + I на Mac или нажав клавишу F12 в Windows.
4 Измените код. Чтобы редактировать текст, просто замените выбранные слова теми, которые вы хотите. Чтобы заменить фотографию вместо этого, замените текущий URL-адрес на тот, который вы выбрали, оставив остальную часть кода без изменений.
- Если вы допустили ошибку, нажмите Ctrl + Z на Mac или Control + Z на Windows, чтобы отменить изменение.
5 Завершите операцию. Нажмите «Enter», затем закройте «Inspect item». На сайте вы должны увидеть текст или изображение, которое вы ввели. Конечно, вы действительно не изменили код сайта, и эти изменения исчезнут, когда вы обновите страницу.
Immyt
как
Отменить аккаунт в Instagram
как
Знайте, если кто-то заблокировал вас на WhatsApp
как
Связывание Instagram с
как
Начать онлайн разговор
как
Разблокировать флеш плеер
как
Включить или отключить уведомления Instagram
как
Связаться с Instagram
как
Решение проблемы невозможности доступа к определенному веб-сайту
как
Доступ к электронной почте с компьютера, который вам не принадлежит
как
Откройте файл XML
как
Реактивируйте свой аккаунт в Instagram
как
Бесплатно скачать любое видео с любого сайта
как
Станьте идеальной девушкой Tumblr
как
Создать оригинальное имя пользователя
Название этой статьи может сбивать с толку. Во-первых, мы разъясняем, что постоянное изменение содержимого веб-страницы из браузера невозможно. Только владелец веб-сайта может редактировать контент из панели администратора веб-сайта и публиковать его в Интернете. Однако во многих ситуациях вы можете захотеть вставить заметку на действующую веб-страницу. Вы можете сделать снимок экрана с обновленным содержимым, чтобы его можно было использовать для обмена или в последующих справочных целях. Итак, здесь мы объясним, как редактировать содержимое веб-страницы онлайн в браузерах во временных целях.
Связанный: Как делать заметки в браузере онлайн?
2 способа редактирования содержимого веб-страницы в Интернете
Вы можете редактировать контент в Интернете двумя способами, используя инструменты разработчика. Эти методы будут работать во всех браузерах, и мы объясним здесь с помощью Google Chrome.
- Редактировать элементы как HTML
- Изменить от руки с помощью консольной команды
1. Редактировать элементы как HTML
Следуйте приведенным ниже инструкциям, чтобы отредактировать содержимое как элементы HTML.
- Откройте веб-страницу, содержание которой вы хотите изменить, в Google Chrome.
- Щелкните правой кнопкой мыши и выберите параметр «Проверить». Либо нажмите F12 на ПК с Windows, чтобы открыть консоль разработчика.
- Используйте инструмент выбора элемента, чтобы выбрать элемент на странице, чтобы получить соответствующий HTML-код в консоли на вкладке «Элементы».
- Щелкните правой кнопкой мыши выбранный элемент в консоли разработчика и выберите вариант «Редактировать как HTML».
- Теперь добавьте любой контент, который хотите, используя тег абзаца HTML. Например, вставьте приведенный ниже код внутрь элемента :.
<p>This is a sample text i want to insert on this page.</p>- Вы можете использовать любой класс CSS, который уже используется для других элементов на странице с тегом абзаца. В нашем примере мы будем использовать класс цвета фона, используемый в существующем элементе абзаца.
- После добавления элемента щелкните внешнюю область. Новый абзац мгновенно появится на веб-странице.
Как и при добавлении элементов, вы также можете удалить любые элементы, щелкнув их правой кнопкой мыши и выбрав опцию «Удалить элемент». Закройте инструмент разработчика и сделайте снимок экрана с обновленным содержимым.
2. Использование консоли консоли
Единственная проблема в вышеупомянутом методе заключается в том, что вы должны использовать HTML-теги для добавления содержимого. Если вы хотите напрямую удалить или добавить контент на веб-страницу, следуйте этому методу.
- Откройте консоль разработчика в Chrome или другом браузере.
- Перейдите на вкладку «Консоль», вставьте приведенный ниже код и нажмите Enter.
document.body.contentEditable = true- Вы увидите, что в качестве возврата указано «истина».
- Теперь вы можете удалять и добавлять любой контент прямо на веб-страницу.
Закройте окно консоли разработчика и измените содержимое веб-страницы в Интернете, чтобы добавить собственное содержимое.
Заключительные слова
Некоторые браузеры, такие как Edge, предлагают функцию аннотации для быстрого выделения важного содержимого при чтении. Однако редактирование содержимого веб-страницы в Интернете поможет вам добавить на страницу собственный текст или изображения. Вы можете сделать снимок экрана целиком и сохранить для справки в автономном режиме или вставить в любые документы. Обновленный контент будет доступен, пока вы не закроете браузер или не обновите веб-страницу.