Обзор инструментов разработки в браузерах

Как открыть инструменты веб-разработчика в Вашем браузере?

Панель разработчика находится в нижней части Вашего браузера :

Как её отобразить? Есть три пути:

• Клавиатура. Ctrl + Shift + I, кроме
  • Internet Explorer. (клавиша - F12)
  • Mac OS X. (сочетание клавиш - ⌘ + ⌥ + I )
• Панель Меню.
  • Firefox. Открыть меню ➤ ➤ Инструменты разработки, или Инструменты ➤ Веб-разработка ➤ Инструменты разработки
  • Chrome. Дополнительные инструменты ➤ Инструменты разработчика
  • Safari. Разработка ➤ Показать веб-инспектор . Если Вы не видите меню "Разработка", зайдите в  Safari ➤ Настройки ➤ Дополнительно,  и проверьте стоит ли галочка напротив "Показать меню разработки". 
  • Opera. Меню ➤ Разработка ➤ Инструменты разработчика. Если Вы не видите меню "Разработка",  включите его отображение перейдя в Меню ➤ Другие инструменты ➤ Показать меню разработчика.
• Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором Вам нужно выбрать пункт Исследовать Элемент. (дополнение: этот способ отобразит Вам код того элемента, на котором вы щёлкнули правой кнопкой.)

Инспектор: DOM обозреватель и CSS редактор

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

Если Вы Не видите инспектор,

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

Обзор DOM инспектора

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl-клик) по HTML элементу в DOM инспекторе и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но выжными из них являются одни и те же:

• Удалить узел (иногда Удалить элемент). Удаляет текущий элемент.
• Править как HTML (иногда Добавить атрибут/Править текст). Позволяет редактировать HTML и видеть результат "в живую". Очень полезно для отладки и тестирования.
• :hover/:active/:focus. Заставляет элементы переключить своё состояние на то к которому применён Ваш стиль.
• Копировать/Копировать как HTML. Копирует текущий выделенный HTML.

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

Обзор CSS редактора

По-умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:

Эти функции особенно удобны:

• Свойства применённые к текущему элементу отображаются в порядке убывания приоритета.
• Можно убирать галочки на против свойств для того чтобы видеть что получиться если их удалить.
• Нажмите на маленькую стрелочку рядом со свойством чтобы увидеть все его эквиваленты.
• Нажмите на имя свойства или его значение чтобы открыть текстовое окошко, в котором Вы можете задать новые значения и увидеть как измениться Ваш элемент с новыми значениями.
• Рядом с каждым свойством указаны имя файла и номер строки где распологается это свойство. Щелчок по этому пути перенесёт Вас в окно, где можно редактировать этот CSS и сохранить.
• Вы можете также нажать на фигурную скобку возле свойства чтобы открыть текстовое поле в новой строке, где вы сможете написать совершенно новую декларацию для Вашей страницы.

Вы должно быть уже заметили другие вкладки в  CSS редакторе:

• Вычислено: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
• Блоковая модель: Отображает блочную модель выделенного элемента, здесь вы можете увидеть внешние и внутренние отступы а так же границы применённые к элементу, здесь также указан их размер.
• Анимации: В Firefox, на вкладке Анимации Вы можете увидеть анимации применённые к выделенному элементу.

Узнать больше

Узнать больше об Инспекторе в различных браузерах:

• Firefox Page inspector
• IE DOM Explorer
• Chrome DOM inspector (Инспектор в Opera схож с Инспектором в Chrome)
• Safari DOM inspector and style explorer

JavaScript консоль

JavaScript консоль невероятно полезная вещь для отладки JavaScript, если он не работает как Вы ожидали. Она позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить Ваш код. Для доступа к консоли из любого браузера, просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) откроется окно как показано ниже:

Чтобы понять что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):

1. alert('hello!');

2. document.querySelector('html').style.backgroundColor = 'purple';

3. var myImage = document.createElement('img');
   myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
   document.querySelector('h1').appendChild(myImage);

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

1. alert('hello!);

2. document.cheeseSelector('html').style.backgroundColor = 'purple';

3. var myImage = document.createElement('img');
   myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
   document.querySelector('h1').appendChild(myImage);

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

Узнать больше

Узнать больше о JavaScript консоли в различных браузерах:

• Firefox Web Console
• IE JavaScript console
• Chrome JavaScript Console (Инспектор в Opera схож с Инспектором в Chrome)
• Safari Console