Mozilla Введение в веб программирование [Сергей Леонидович Куринный] (pdf) читать постранично, страница - 14

Книга в формате pdf! Изображения и текст могут не отображаться!


 [Настройки текста]  [Cбросить фильтры]

.

59




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

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



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

правой кнопкой мыши и выберите Править как HTML из контекстного
меню. Вы можете сделать любые изменения, какие захотите, но Вы
не сможете их сохранить.
ОБЗОР CSS РЕДАКТОРА
По-умолчанию, CSS редактор отображает CSS свойства
применённые к текущему выбранному элементу:

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

61



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

Вы должно быть уже заметили другие вкладки в CSS редакторе:
● Вычислено: Здесь указаны все вычисления свойств
выделенного элемента (окончательные, нормализованные
значения применённые браузером).
● Блоковая модель: Отображает блочную модель выделенного
элемента, здесь Вы можете увидеть внешние и внутренние
отступы, а также границы применённые к элементу, здесь
также указан их размер.
● Анимации: В Firefox, на вкладке Анимации Вы можете увидеть
анимации применённые к выделенному элементу.
УЗНАТЬ БОЛЬШЕ ОБ INSPECTOR В РАЗЛИЧНЫХ БРАУЗЕРАХ:
● Firefox Page inspector
● IE DOM Explorer
● Chrome DOM inspector​(Inspector в Opera схож с Inspector в
Chrome)
● Safari DOM inspector and style explorer

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

62

Чтобы понять, что происходит, попробуйте ввести фрагменты кода в
консоль один за другим (и затем нажмите 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/3372
925208_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/337
2925208_e1f2aae4e3_b.jpg');
document.querySelector('h1').appendChild(myImage);
Вы увидите некоторые ошибки, которые сообщит Вам браузер.
Зачастую эти ошибки выглядят довольно загадочно, но они должны
быть довольно простыми, чтобы можно было выяснить проблему!
УЗНАТЬ БОЛЬШЕ О JAVASCRIPT КОНСОЛИ В РАЗЛИЧНЫХ
БРАУЗЕРАХ:
63






Firefox Web Console
IE JavaScript console
Chrome JavaScript Console​(Inpector в Opera схож с Inspector в
Chrome)
Safari Console

Что дальше?
Ресурсы по JavaScript на Mozilla Developer Network:
https://developer.mozilla.org/ru/docs/Web/JavaScript
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference
Введение в HTML от Mozilla Developer Network:
https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Introduction
Введение в CSS от Mozilla Developer Network:
https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started

64