• Главная
• Статьи и уроки
• Статьи о хостинге
• Как найти ошибку на своем сайте

Как найти ошибку на своем сайте

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

Есть способы удовлетворить своё любопытство без существенных временных затрат на изучение навороченных программных комплексов для разработчиков. Например, большинство современных браузеров имеют возможности для просмотра кода сайта и быстрого тестирования изменений. Инструменты разработчика Chrome – один из таких доступных способов начать путь веб-разработчика.

Введение в Инструменты разработчика Chrome

Когда накапливаешь опыт работы с сайтами, приходит осознание факта, то есть моменты, которые трудно реализовать в конструкторе. А знаний для разработки проекта с нуля нет.

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

Все популярные браузеры имеют такой набор функций. Но мы рассмотрим Chrome.

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

Как получить доступ к инструментам разработчика в браузере Chrome

Инструменты разработчика совершенно бесплатны и работают без установки дополнительных программ или расширений.

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

Нажимаем правую кнопку мыши и в меню выбираем «Посмотреть код».

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

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

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

Настрой расположение элементов инструментов разработчика так, как удобно, и приступай к тестированию и отладке кода страницы.

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

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

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

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

Нужно просто поставить курсор мыши на искомым элемент, нажать правую кнопку/ В контекстном меню выбираешь команду «Посмотреть код» и инструмент разработчика покажет код элемента, на котором стоит курсор мыши. Если курсором мыши поводить по коду в окне инструмента разработчика, то в окне браузера будут выделяться элементы, соответствующие коду.

Также можно вносить изменения в код страницы. Двойной щелчок на нужном участке кода открывает режим редактирования. Вносим изменения. И они сразу будут отображаться в браузере.

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

Данный метод позволяет быстро найти ошибку и протестировать на месте возможные варианты её исправления. А затем уже на рабочем проекте внести практические готовые правки в код. Или поменять элементы страницы в соответствии с желаниями и сделать скриншот для других членов команды.

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

Заключение

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

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

Как организовать пассивный доход со своего сайта?