Внимание! Большая часть текста была взята с https://developer.mozilla.org, из этого урока.

Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит вас использовать базовые функции инструментов разработчика в вашем браузере.

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

• Клавиатура. Ctrl + Shift + I, кроме

  • Internet Explorer. (клавиша - F12)

  • Mac OS X. (сочетание клавиш - ⌘ + ⌥ + I )

• Панель Меню.

  • Firefox. Открыть меню➤➤ Инструменты разработки, или Инструменты ➤ Веб-разработка ➤ Инструменты разработки

  • Chrome. Дополнительные инструменты ➤ Инструменты разработчика

  • Safari. Разработка ➤ Показать Web Inspector . Если вы не видите меню "Разработка", зайдите в  Safari ➤ Настройки ➤ Дополнительно,  и проверьте стоит ли галочка напротив "Показать меню разработки".

  • Opera. Меню ➤ Разработка ➤ Инструменты разработчика. Если вы не видите меню "Разработка",  включите его отображение, перейдя в Меню ➤ Другие инструменты ➤ Показать меню разработчика.

• Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт Исследовать Элемент. (дополнение: этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)

Inspector: DOM обозреватель и CSS редактор
По умолчанию, в панели открывается вкладка Inspector, вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.

# увеличивается по клику

Если вы не видите Inspector:

• Нажмите на вкладку Inspector .

• В Internet Explorer, нажмите на DOM Обозреватель, или нажмите Ctrl + 1.

• В Safari, элементы управления представлены не так чётко, но вы должны увидеть HTML код, если вы не выбрали что-то другое в окне разработки. Нажмите на кнопку Стиль, чтобы увидеть CSS.

Консоль JavaScript

Консоль 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);

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

Узнать больше
Разумеется, это только самое основное, касающееся инструментов разработчика. Советуем вам обратить внимание на эти статьи, если хотите узнать больше:

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