Как изменить текст в браузере через f12

Обновлено: 06.01.2025

Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12:

Elements

Перед нами наше HTML-древо сайта разложенное по полочкам. Расположение внутреннего контента может отличаться, в данном случае я разбил на 2 колонки, где слева HTML-древо, а справа CSS свойства выбранного элемента (тега или тега, оба варианта применяются). Изменяется HTML-древо достаточно просто, выбираете нужный Вам тэг и нажимаете F2, далее изменяете HTML-код блока, где вы можете не только его содержание изменить, но и добавить другие атрибуты этому тэгу, а так же добавить другой тег перед или после данного тэга. При наведении мышкой на данный тэг на экране будет подсвечена область данного тэга, где оранжевым и зеленым цветом отмечены padding и margin. Так же хочу заметить одну важную особенность, если разработчик допускает ошибку и не применяет clear:both после float:left чем нарушает работу верстки, то область указанного тэга не будет видна или будет отображаться с ошибкой. Самая распространенная ошибка, между прочим!

Найти нужный тег в древе не сложно, есть 2 способа. Способ первый - перед Elements в меню находятся 2 иконки, вторая из которых перевод сайта в мобильную версию (не надо даже телефон покупать, всё итак видно верстальщику), а первая - выбрать элемент на странице. Достаточно нажать на первую кнопку, выбрать нужный блок и кликнуть по нему левой кнопкой мыши, таким образом у нас откроется именно данный тэг для корректировки. Метод второй, более быстрый - сразу правой кнопкой мыши нажать на нужный участок сайта и выбрать "Просмотреть код".

Итак, практическая задача, создайте 3 колонки через float:left с содержанием картинки + текста с одним классом. Далее через панель разработчика добавьте рамки, подкорректируйте расстояние между блоками и текстом используя внутренние и внешние отступы (меняя свойства класса), измените цвет текста в каждом блоке на свой цвет (тут уже element.style). Этого будет вполне достаточно, хотя для себя можете поэкспериментировать меняя таким образом код и других сайтов. Но помните самое важное, Вы не изменяете настоящие html и css файлы, а только временные конкретно данной страницы и как только вы обновите страницу, то и слетят все Ваши настройки!

Console

Без неё и жизнь не мила у любого программиста :) Абсолютно все WARNING и ERROR записываются в данный блок. Убедитесь, что у вас выводятся все ошибки проверив следующим образом: нажмите на иконку filter в данном разделе и выберите вкладку "all", то есть выводить все ошибки. По умолчанию установлен всегда "all", но зная Вас, мои ученики. :)
Логи сохраняются в рамках данной страницы с момента открытия консоли, а не загрузки страницы. Поэтому если загрузить страницу, а после открыть консоль, то ошибок вы не увидите, хотя ошибки на странице присутствуют! Поэтому сначала мы открываем консоль, а потом перезагружаем данную страницу! Теперь справа от ошибки будет указываться файл на котором произошла ошибка и даже сама строчка. Хочу заметить, что в консоль так же попадают ошибки различных установленных плагинов и расширений для Google Chrome включая вирусы (они тоже прописываются как плагин или расширение), а так же при работе Ajax и других внешних скриптов может указываться строчка 1 или 0 в исполняемом файле, а никак не строка, откуда этот самый AJAX был выполнен. Это стоит брать во внимание!

Работая с JavaScript можем столкнуться с тем, что по клику происходит переадресация на другую страницу в формате: click - ошибка - переадресация, а ошибка произошла перед строчкой, которая должна была заблокировать переадресацию и поэтому в консоли пусто. Решается всё предельно просто, установите галочку Preserve Log, и тогда логи не будут очищаться после перезагрузки или переадресации страницы. Забудете об этой фишке, то будете ошибку пол года искать :)

О том, что наши заметки попадают в консоль из console.log я писать не буду, Вы итак это знаете из общего курса :)

Sources и Network

Отличный способ промониторить все входящие и исходящие запросы и их результат выполнения. Во вкладке Sources мы можем увидеть все подгруженные дополнительные файлы, а именно картинки и скрипты. Самый простой способ достать нужную картинку, глянуть на её размеры, сохранить к себе на комп. Открыть JavaScript файлы там так же можно. По клику правой кнопкой на нужный файл можно выбрать пункт "Open link in new tab", и уже с новой страницы сохранить файл нажав комбинацию ctrl+s . Согласитесь, удобно же :)

Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.

На дате обновления файла хочу остановиться подробнее, бывает так, что файл хоть и был изменён, но браузер всё равно не проверяет его версию, он просто загружает старый вариант сохраненный в кэше. Чтобы очистить кэш браузера у клиента достаточно изменить имя файла с scripts.js?v=1 на scripts.js?v=2. Как видите, мы лишь поменяли переданные GET данные, а скрипт уже практически у всех будет подгружаться новый (не 100%, но вполне приемлемо для большинство сайтов). Но после правки запятой в скрипте во время разработки не так уж и удобно бегать и менять html с подключением этого самого js файла, тут для разработчика приходит на помощь ещё одна важнейшая галочка "Disable cache", если она включена, то все файлы не будут кэшироваться и каждый раз будут загружаться новые! Разрабатываем сайт с этой галочкой, а при загрузке новой версии скриптов всем пользователям меняем лишь версию ?v=3.

Preview и Response

После запроса сервер возвращает нам что-либо, в Preview попадёт удобный для человека вид, а в Response - неотформатированный исходник. На примере запроса изображения во вкладку Preview попадёт сама картинка, а исходный код картинки по соображениям морали будет скрыт, но вот если Вы запросили HTML, JS, PHP файлы, то как раз заглянуть во вкладку Response стоит обязательно для того, чтобы убедиться, что там вернулся именно тот контент, который мы запросили и ожидаем увидеть! При работе с Ajax в Preview мы получим удобный вид JSON ответа похожего на HTML-древо в разделе Elements, что так же упростит нам разработку сайта.

Ajax и панель разработчика

П.С. Всем моим гостям я желаю успешного программирования, а с учеников требую идеального понимания того, что я тут расписал. И если я когда-нибудь спрошу у Вас был ли отправлен AJAX запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как "блондинки". :)
Данная статья в будущем ещё будет дорабатываться, возможно!

Примеры измененного и оригинального кода

1. Оригинал страницы:

2. Подделка, созданная через исходный код страницы:

Изменение исходного кода

Путем изменения исходного кода можно подделать все, а если имеются даже минимальные знания в CSS и HTML, то для Вас не будет никаких границ. Можно изменять информацию о переведенных средствах в Webmoney, если оплата происходила через сайт. В общем, если есть фантазия, то сами пораскинете мозгами и решите с чем повеселиться.

Я буду показывать создание шутки с агентом поддержки, а именно с агентом 3-х сотым, так как его шутки наиболее актуальны в сети. Многие из них являются фейками, созданные таким образом, как я сейчас опишу.

1. Заходим на страницу, которую будем изменять. У меня это страница технической поддержки вконтакте:

Тут я изменяю аватарку

Можно увидеть, что аватарка изменилась, она стала синей, а была оранжевая (я менял не цвет, а номер аватарки)

С аватаркой мы закончили, теперь приступим к изменению имени.

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

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

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

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

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

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

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

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

В нижней части экрана, если, например, применяется браузер Google Chrome, открывается окно с кодом, в котором будет выделена строчка с кодом, обозначающим выбранный элемент, в данном случае заголовок, а в колонке справа пишутся все правила, которые применяются к этому элементу.

Классы и идентификаторы

В коде заголовка видим

Id здесь – идентификатор.

В другом случае, если нажать на меню, то в коде увидим

есть класс меню, то есть к этому элементу применяется класс “menu”.

Это нужно для того, чтобы было легче обращаться к элементам сайта для изменения их стиля. То есть, чтобы решить, как изменить код элемента заголовка, нужно найти идентификатор id — “site-title” и изменить его на нужный.

Итак, все элементы кода сайта имеют свои идентификаторы, либо классы.

Как изменить код элемента, отвечающего за его цвет

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

В правой колонке, в первой строке видим .art-postheader <

Это такой идентификатор заголовка. В фигурных скобках задаются параметры, это цвет, толщина шрифта, подчеркивание текста и т. д.

Соответственно, код будет таким

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

Для этого копируем .art-postheader, заходим в панель администрирования WordPress, Внешний вид — Редактор, открываем таблицу стилей style.css и вызываем поиск по сайту, нажимая Ctrl+F.

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

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

Аналогично можно поменять жирность текста, подчеркивание ссылки и другие параметры элемента.

Здесь нужно ввести в строку поиска тег HTML или свойство CSS и получаем все возможные правила для него. Любое правило можно скопировать и вставить на свой сайт.

Меняем цвет фона

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

Правило background, который отвечает за цвет, может иметь еще много различных значений. Для замены цвета нажимаем на квадрат кнопки и выбираем нужный цвет, например, голубой.

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

Добавляем картинку фона

За это отвечает правило background-image. На сайте открываем просмотр кода элемента нашего фона и в правой колонке вставляем для фона сайта это правило, ставим двоеточие и затем потребуется ссылка. Записываем url (“ “) и в кавычках пишем ссылку на картинку.

Ищем что-нибудь для сайта, например, в категории Гармония.

Поиск выдает множество картинок. Опять вводим Обои для сайта, выбираем нужную, размером побольше, допустим 1024 × 768.

В контекстном меню картинки выбираем Копировать URL картинки. Заходим на сайт и вставляем в наши кавычки. Получаем предварительный просмотр фона.

Таким же образом, в редакторе панели управления сайтом, вставляем ссылку на изображение, обновляем файл и сайт. Получаем фон сайта с картинкой.

Работа со шрифтами

Чтобы изменить код элемента, например, размер шрифта нашего заголовка, нужно вставить в правой колонке для него правило font-size. Ставим двоеточие и размер в пикселях, допустим 36 px.

Все зависит от вашей аудитории на сайте. Если это пенсионеры, то, естественно, шрифт должен быть покрупнее, а если пионеры, то можно обойтись и мелким.

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

Чтобы изменения вступили в силу, нужно опять в панели управления перейти в редактор и внести эти изменения.

Можно выбрать разновидность шрифта. За это отвечает font-family — семейство шрифтов.

Чтобы сменить шрифт заголовка, прописываем в правилах к элементу font-family и после двоеточия ставим, например, Georgia.

После запятой можно поставить еще один распространенный шрифт, допустим, Times New Roman.

В этом случае, если даже у кого-то Georgia не будет отображаться, то отобразится Times New Roman.

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

Если нужно сделать шрифт пожирнее, то применяем правило font-weight и т. д.

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

Это содержимое ссылается на более старую версию средств разработчика F12. Скачайте последнюю версию документации по средствам F12.

В данный раздел включены следующие подразделы:

Использование вкладки HTML

Вкладка HTML показывает динамическую разметку веб-страницы в виде дерева, представляемого в памяти Windows Internet Explorer 9. Она отражает модель DOM при открытии средств разработчика F12 и должна обновляться при выполнении изменений. Вы можете напрямую перемещаться по дереву с помощью мыши или клавиатуры, просматривать атрибуты и изменять значения.

Чтобы перейти к конкретному элементу веб-страницы, нажмите клавиши CTRL+B или кнопку Выбрать элемент щелчком . Элементы на веб-странице выделяются при наведении на них указателя мыши. При щелчке элемента соответствующий узел выделяется в дереве модели DOM представления HTML.

При выборе элемента на вкладке HTML можно использовать меню "Вид" > "Исходный код", чтобы выполнить фильтрацию представления, оставив либо выбранные элементы со связанными стилями CSS, либо только сами элементы.

Кнопка Исходный код элемента со стилем показывает только исходный код HTML и — в новом окне — содержимое выбранного элемента вместе с применяемым к нему кодом CSS. Это позволяет сконцентрироваться на исходном коде только для выбранных элементов. Прежде чем выполнить эту команду, в дереве модели DOM с помощью вкладки HTML нужно выбрать элемент HTML. Для выбора элемента нажмите кнопку Выбрать элемент щелчком или щелкните элемент в дереве модели DOM. При использовании кнопки Выбрать элемент щелчком рекомендуется сначала обновить представление.

Чтобы развернуть или свернуть свойства элемента, щелкните поле, помеченное знаком "плюс" (+) или "минус" (-). Все элементы в представлениях HTML и CSS можно редактировать, и изменения вступают в силу немедленно. Правила и атрибуты стилей можно включить или отключить, щелкая флажок рядом с именем элемента.

Просмотр динамического кода HTML

Для большинства веб-сайтов используется динамический код. Для формирования HTML, который будет видеть пользователь, часто используются сценарии на клиентской стороне. Статический код HTML часто минимален и используется только для запуска действия на странице. Поскольку средства разработчика F12 отображают код HTML и CSS так, как он отображается в браузере, а не точный исходный код HTML, поиск ошибок упрощается.

На вкладке HTML показывается текущее состояние модели DOM, но изменения не отслеживаются автоматически. Если изменение значения или атрибута не отображается немедленно, обновите представление, нажав клавишу F5 на вкладке HTML.

Изменение значений и добавление атрибутов

Средства разработчика F12 позволяют изменить значение практически любого атрибута или свойства. На вкладке HTML выберите элемент либо в дереве модели DOM, либо с помощью кнопки Выбрать элемент щелчком. В представлении свойств (правая область) щелкните значение, чтобы выделить его и изменить.

Чтобы добавить атрибут, щелкните правой кнопкой мыши элемент в левой области вкладки HTML или CSS, а затем выберите пункт Добавить атрибут в контекстном меню. Вам нужно знать формат атрибута, например "background-color:", и правильные значения.

Чтобы удалить атрибут (либо добавленный, либо один из существующих), щелкните атрибут в представлении правой области, а затем нажмите клавишу DELETE. Вернуться к атрибутам исходной страницы можно, обновив веб-страницу. Добавленные атрибуты придется применять повторно.

Если нужно только временно отключить атрибут на время сеанса, снимите флажок рядом с атрибутом в правой области либо вкладки HTML, либо вкладки CSS.

Средства и представления вкладки HTML

Выбрав элемент в представлении дерева в левой области, справа можно просматривать и изменять стили, структуру модели полей и атрибуты для выбранных и дочерних элементов. Внесенные изменения не являются постоянными и будут потеряны при обновлении или открытии другой страницы. Но можно сохранить измененный код HTML, нажав кнопку Сохранить.

При просмотре нескольких правил CSS, применяемых к выбранному элементу на вкладках "Стиль" и "Отслеживать стили", правила отображаются в зависимости от их особенностей в соответствии со спецификацией CSS. Правило в верхней части списка — это правило, первым применяемое к выбранному элементу, а правило в нижней части — это правило, в настоящее время определяющее свойства стиля выбранного элемента. Значения этих правил можно изменять. Щелкните значение, введите новое значение и нажмите клавишу "ВВОД". Изменение немедленно проявится на веб-странице. Данные, найденные в обоих типах свойств, являются одинаковыми. Но в типе свойства "Отслеживать стили" эти же данные группируются по свойствам, для которых заданы правила, отображаемые под свойствами. Свойства приводятся в алфавитном порядке, а правила снова упорядочиваются в зависимости от их особенностей.

Стиль содержит правила и стили для элемента, выбранного вами в представлении дерева. Эта вкладка организована по правилам и содержит унаследованные и переопределенные атрибуты.

Отслеживать стили содержит те же данные, что и вкладка "Стиль", но сгруппированные по свойствам, а не по правилам.

Макет показывает модель полей для выбранного элемента. Любое значение в представлении "Макет" можно изменить, щелкнув его на схеме. Вкладка Макет недоступна для элементов SVG.

Атрибуты показывает атрибуты, такие как ID, выбранного элемента. Атрибуты можно добавить или удалить

Контекстное меню вкладки HTML

Как упоминалось ранее, можно щелкнуть элемент правой кнопкой мыши в левой области вкладки HTML. Ниже перечислены возможности, которые вы можете использовать на вкладке HTML.

Пункт меню	Действие
Добавить атрибут	Добавление новых атрибутов в тег или элемент.
Копировать	Копирование тега и атрибутов в буфер обмена.
Копировать InnerHTML	Копирование контента InnerHTML (дочерний текст, элементы и атрибуты) элемента в буфер обмена.
Копировать OuterHTML	Копирование контента OuterHTML (дочерний текст, элементы и атрибуты) элемента в буфер обмена.

Если щелкнуть дочерний узел элемента на вкладке HTML, например текстовый элемент тега "h2", могут быть видны не все возможности. Если не видна нужная возможность, перейдите к родительскому элементу и повторите попытку.

Проверка правил CSS

На вкладке CSS показывается взаимодействие между таблицами стилей. Эта вкладка очень полезна для веб-сайтов, использующих несколько таблиц стилей. Чтобы переключиться между таблицами стилей, используйте средство выбора таблицы стилей. При выборе таблицы стилей правила и соответствующие свойства стилей появляются в левой области. По умолчанию эта кнопка показывает первую таблицу стилей, на которую ссылается веб-страница. Щелкните раскрывающийся список, чтобы выбрать другую таблицу стилей, если на веб-странице используется несколько таблиц стилей.

Пункты контекстного меню на вкладке CSS

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

Пункт меню	Действие	Место щелчка правой кнопкой мыши
Добавить атрибут	Добавление нового атрибута в тег или элемент.	Любое правило или атрибут (любой элемент).
Добавить правило	Добавление селектора, объявления или стиля.	Пустое место, а не существующий элемент.
Добавить правило после	Добавление селектора или правила после текущего правила.	Любой элемент.
Добавить правило перед	Добавление селектора или правила перед текущим правилом.	Любой элемент.
Удалить атрибут	Удаление выбранного атрибута.	Любой атрибут.
Удалить правило	Удаление выбранного правила и всех связанных атрибутов.	Любое правило или селектор.

Изменение числовых значений CSS на вкладке CSS

Значения свойств CSS можно изменить, как практически любое другое свойство в средствах разработчика F12. Свойства CSS можно изменить, щелкнув значение свойства и введя новое значение. На вкладке CSS можно также воспользоваться стрелками вверх и вниз, чтобы увеличить или уменьшить числовые значения.

Поиск и сохранение изменений

Как и на остальных вкладках средств разработчика F12, можно выполнять поиск конкретных тегов, свойств, атрибутов и значений с помощью поля Поиск на обеих вкладках HTML и CSS. При нажатии кнопки Поиск выделяются все экземпляры ключевого слова и область прокручивается до первого соответствия.

Внесенные изменения, такие как настройка модели полей или добавление атрибута, не являются постоянными. При перезагрузке страницы в браузере или при переходе к другой веб-странице все внесенные изменения теряются. Чтобы сохранить изменения в локальной копии файла HTML/CSS, нажмите кнопку Сохранить в левой области.

Многих пользователей интересует вопрос, как посмотреть код страницы в браузере. При помощи таких данных можно узнать множество полезной информации. В данной статье рассказывается, как открыть код и на что обратить внимание, при изучении текста.

Как запустить код страницы в браузере

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

Если по какой-либо причине в контекстном меню отсутствует необходимый пункт, то пользователю следует нажать на три полоски справа, запустив параметры обозревателя, выбрав «Дополнительно».

Далее остановитесь на «Дополнительные инструменты», кликните по искомому элементу.

Максимально быстро открыть нужный текст, рассказывающий о сайте, можно комбинацией клавиш «Ctrl+U».

Что скрывает открытая страница

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

Исходный текст включает в себя:

таблицу или ссылку на css файл;
разметку html;
программы, написанные при помощи JavaScript, или показывает, где располагается файл с текстом платформы.

Чтобы приступить к изучению информации, нажмите на текст правой кнопкой мыши, выберите «Исследовать элемент».

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

Как изменить код сайта

Некоторые из серферов желают попробовать изменить данные сайта, используя инструменты разработчика. Чтобы справится с задачей, необходимо знать язык программирования, ведь именно на нем прописывается любой интернет-ресурс.

Для запуска инструмента, откройте меню, выберите «Дополнительно».

Остановитесь на «Дополнительные инструменты», кликните по искомому элементу.

Откроется окно, нажмите на «Elements». В верхней части написано множество знаков. Наведите курсор мыши на один из них, вызовите контекстное меню.

В высвеченном окне выберите «Edit as HTML».

Теперь пользователь может вносить изменения в текст, которые автоматически сохранятся после выхода из режима редактирования.

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

Читайте также: