{{Previous("Learn/Getting_started_with_the_web")}}
Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит Вас использовать базовые функции инструментов разработчика в Вашем браузере.
Заметка: Прежде чем начать заниматься с примерами, откройте пример сайта для начинающих, с которым мы работали на предыдущих занятиях. Вам следует держать его открытым, чтобы выполнить описанные ниже действия.
Панель разработчика находится в нижней части Вашего браузера :
Как её отобразить? Есть три варианта:
➤ 
➤ Инструменты разработки, или Инструменты ➤ Веб-разработка ➤ Инструменты разработки
По-умолчанию, в панели открывается вкладка Inspector, Вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет Вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет Вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.
Если Вы не видите Inspector,
Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:
Попробуйте изменить что-нибудь через окно Inspector на Вашей странице прямо сейчас. Дважды кликните по элементу, или нажмите правой кнопкой мыши и выберите Править как HTML из контекстного меню. Вы можете сделать любые изменения, какие захотите, но Вы не сможете их сохранить.
По-умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:
Эти функции особенно удобны:
Вы должно быть уже заметили другие вкладки в CSS редакторе:
Узнать больше об Inspector в различных браузерах:
Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить Ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) Откроется окно, как показано ниже:
Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):
alert('hello!');
document.querySelector('html').style.backgroundColor = 'purple';
var myImage = document.createElement('img');
myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
document.querySelector('h1').appendChild(myImage);
Теперь попробуйте ввести следующую, неправильную версию кода и посмотрите, что из этого получится.
alert('hello!);
document.cheeseSelector('html').style.backgroundColor = 'purple';
var myImage = document.createElement('img');
myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
document.querySelector('h1').appendChild(myImage);
Вы увидите некоторые ошибки, которые сообщит Вам браузер. Зачастую эти ошибки выглядят довольно загадочно, но они должны быть довольно простыми, чтобы можно было выяснить проблему!
Узнать больше о JavaScript консоли в различных браузерах: