Андрей Смирнов
Время чтения: ~5 мин.
Просмотров: 6

Как изменить исходный код страницы в Яндекс браузере

Просмотр html кода странице в браузере позволяет изменить содержимое сайта. Вы можете изменить расположение текста, сделать его жирнее, разукрасить по-своему или же добавить необходимый фон. Также, если вы уже опытный пользователь, то будет полезным посмотреть некоторые страницы с исходным кодом. Это позволяет практиковаться в таких профессиях как веб программист и веб-дизайнер. Разберемся далее, как изменить html код страницы в яндекс браузере.

На компьютере

Для того, чтобы поменять код любой страницы в яндекс браузере, необходимо открыть консоль. Консоль предназначена для более глубокой проверки сайта. В ней доступны таки возможности как: отслеживание скорости загрузки, редактор кода, а также выявление ошибок страницы.

Для того, чтобы изменить html код, следует сделать следующие:

  1. Для начала открываем в новой вкладке тот сайт, в котором нужно редактировать код страницы. Далее кликаем на три линии сверху и выбираем дополнительно.1-1024x554.png
  2. Затем открываем вкладку «Дополнительные инструменты», после чего выдвигается новое меню.  2-1024x554.png
  3. Затем выбираем «Консоль JavaScript» или «Инструменты разработчика». Также, как вы могли заметить, вы можете открыть html код страницы быстрее, при помощи сочетания клавиш «Ctrl+Shift+J». 3-e1556959290596-771x1024.png
  4. Далее перед нами открывается консоль с различными функциями. Нам требуется выбрать вкладку «Elements».  Именно в этом меню находится редактор, в котором вы можете изменить код страницы по своему усмотрению. 4-1024x503.png
  5. Найдите тег внутри который нужно изменить код и кликните по нему правой кнопкой мыши. В меню выберите Edit as HTML.5-1.png
  6. Теперь вы можете редактировать код страницы.6-1.png

Также стоит знать, что каждый сайт строится на языке программирования html, и если вы хотите создать свой сайт, то следует разобраться в этом языке. С виду это всё выглядит как сплошной и непонятный текст, однако здесь всё логично и понятно, если в этом разобраться.

На телефоне

Официально изменить код элемента в яндекс браузере на телефоне невозможно, единственное, что вы можете сделать, так это посмотреть код страницы. Его можно открыть при помощи ввода функции «view-source: ссылка сайта» в строку запроса.6.png

Теперь вы знаете как поменять html код страницы в яндекс браузере. Откройте консоль в браузере и перейдите в блок команд «Elements», в котором расположена вся информация о сайте в коде.

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

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

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

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) September 27, 2019

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

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

console-designmode.jpg

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

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

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

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

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

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

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

Читайте дальше:

ava.pngКонстантин БулгаковРасскажите о ваших задачах, а я найду для вас решения. Напишите на почту или скачайте презентацию. —> ✉ Подпишитесь на статьи🎉 Поблагодарить автора —> Поддержите автораРекомендуем почитать:249-210x280.jpg

Xakep #249. Wi-Fi

Читаете тексты в интернете и постоянно встречаете фразы и слова, которые вас раздражают? Теперь это не проблема. Расширение FoxReplace к браузеру Firefox заменяет текст на любой веб-странице в соответствии с заданными правилами. Для своей задачи оно гораздо удобнее, чем продвинутые универсальные инструменты вроде Greasemonkey. Здесь процедура внесения правок до безобразия простая: указываете какое слово заменить каким — и готово. Например, везде менять фразу “Google Chrome” на “Хром”.

000.png#26759185

FoxReplace подходит для автоматической замены слов с одного языка на другой. Или для стёба над ненавистными компаниями или людьми. Можно просто заменить настоящее наименование фирмы на произвольное слово или фразу. Никто не увидит этого, кроме вас, и не подаст в суд за оскорбление личности или хулиганство. Фактически, вы даже не нарушаете закон, если делаете это на своём личном компьютере, а не на публичном форуме в интернете. А моральное удовлетворение даже больше, когда видишь «истинный» эпитет по отношению к объекту насмешки на странице официального СМИ или какого-нибудь серьёзного сайта.

Хотя базовая функциональность FoxReplace довольно проста, но расширение поддерживает и более продвинутые функции. Здесь можно составлять скрипты, заменять текст по маске, модифицировать URL’ы и скрипты на веб-страницах.

Кстати, для Chrome или Opera подобных расширений, вроде бы, не существует, так что пользователям Firefox есть чем гордиться.

Используемые источники:

  • https://ya-browsers.ru/nastrojki/kak-izmenit-html-kod-stranitsy-v-yandeks-brauzere
  • http://konstantinbulgakov.com/post/6146
  • https://xakep.ru/2014/06/18/62652/

Рейтинг автора
5
Подборку подготовил
Максим Уваров
Наш эксперт
Написано статей
171
Ссылка на основную публикацию
Похожие публикации