Редактировать веб-страницу из браузера с помощью Inspect Element

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

Функционал Chrome Inspect (интегрированный в меню, которое появляется при нажатии правой кнопки) позволяет редактировать веб-страницу прямо из браузера, мгновенно и без загрузки каких-либо файлов, например, по FTP.

Очевидно, что изменение будет применяться только локально, временно, но будет полезно заранее проверить, какие вмешательства могут быть сделаны, например, в файлах CSS (таблицах стилей), чтобы изменить веб-страницу и улучшить ее «внешний вид». В частности, Inspect позволяет временно применять изменения к просматриваемой веб-странице, чтобы с уверенностью установить результат вмешательств, даже до их окончательного применения на стороне сервера.

Inspect также позволяет вам проверить функционирование кода JavaScript на странице, изменить его поведение (например, вы можете скрыть элементы, препятствующие правильному отображению страницы), проверить, какие и сколько элементов загружены (также установив, какие ресурсы склонны задерживать загрузку всей страницы) и так далее.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

Как использовать функцию проверки Google Chrome

Из браузера Google Chrome для быстрого доступа к окну проверки (инструменты разработчика) просто используйте комбинацию клавиш CTRL + SHIFT + I или щелкните правой кнопкой мыши область страницы, которую необходимо проанализировать, и выберите команду «Проверка».

Редактировать веб-страницу из браузера с помощью Inspect Element

Вкладка «Элементы» позволяет вам просматривать все элементы, содержащиеся в DOM страницы, и, возможно, изменять их «на лету».

DOM (объектная модель документа) — это структурированная форма, в которой представлены элементы, составляющие веб-страницу.

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

Sources показывает исходный код всех элементов, составляющих страницу, как резидентных на веб-сервере, на котором размещен посещаемый сайт, так и удаленных, загружаемых со страницы через ссылки в DOM.

Вкладка «Сеть» очень полезна для понимания того, как загружаются элементы веб-страницы, и их влияния на продолжительность загрузки. Он также позволяет обнаруживать возвращаемые коды ошибок и определять, какой элемент требует загрузки другого объекта.

В статье Инструменты разработчика Chrome на Android: как разоблачить тех, кто загружает вредоносный контент, мы увидели, как эту же вкладку можно использовать для диагностики поведения веб-сайтов, загружаемых на мобильные устройства Android.

В этой статье, посвященной тому, как мгновенно редактировать веб-страницу, мы сосредоточимся только на вкладке «Элементы».

Если щелкнуть правой кнопкой мыши определенный элемент, отображаемый на веб-странице, и выбрать «Проверить», Chrome немедленно выделит этот элемент в DOM.

Редактировать веб-страницу из браузера с помощью Inspect Element

Нажав на маленькую кнопку вверху «Выберите элемент на странице для его проверки», а затем щелкнув любой элемент веб-страницы, вы получите возможность вмешаться напрямую (он будет автоматически выделен в правом столбце).

Редактировать веб-страницу из браузера с помощью Inspect Element

Щелкнув правой кнопкой мыши на любом элементе в правом столбце и выбрав «Редактировать атрибут», вы можете легко изменить его, а выбрав «Добавить атрибут», вы можете добавить новый атрибут к элементу HTML.

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

Редактировать веб-страницу из браузера с помощью Inspect Element

Не удаляя элемент, его можно скрыть, добавив, например, стиль style=»display: none;» в теге HTML.

Любой элемент можно переместить, просто перетащив его на новое место.

Команда «Прокрутить в представление» позволяет выставить выбранный элемент в видимой области страницы.

При проверке HTML-элемента с помощью функции Chrome Inspect будут указаны стили (CSS), отвечающие за графический вид того же объекта (вкладка «Стили» внизу правого столбца).

Как только какой-либо элемент выбран, Inspect сообщает о его различных зависимостях.

Правая панель «Стили» показывает, какие правила CSS применяются к выбранному элементу HTML, начиная с самого высокого приоритета и заканчивая самым низким.

Становится легко определить, применялись ли стили непосредственно для определения графического вида HTML-элемента, применяется ли к выбранному элементу общее правило, определенное в CSS, или, опять же, правила были унаследованы.

В случае CSS, в случаях, когда правило было определено несколько раз, всегда действует последнее, определенное в каскаде. В правой части (панель «Стили») Инспекта вы обычно найдете несколько перечеркнутых правил. Это означает, что эти правила были переопределены правилом, которому браузер отдает «приоритет».

Правила, унаследованные от других стилей, имеют четкую пометку «Унаследовано от».

Деактивировав поля на панели «Стили», вы можете деактивировать один или несколько стилей и сразу же проверить эффект вмешательства на «внешний вид» веб-страницы.

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

Следовательно, можно воздействовать на шрифт (семейство шрифтов), на размер символов (размер шрифта), на высоту строки (высота строки, на цвет и фоны (например, фон, фон- color и color) на полях, отступах и так далее.

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

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

Также из правого столбца, щелкнув правой кнопкой мыши элемент HTML, а затем выбрав Break on, у вас будет возможность узнать, какой JavaScript изменяет дочерние элементы, атрибуты выбранного элемента или удаляет его.

Редактировать веб-страницу из браузера с помощью Inspect Element

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *