Консоль разработчика и базовые действия

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

В работе с кодом HTML и CSS, мы используем вкладку Elements в консоли разработчика.

Консоль реализована в каждом браузере, но имеет некоторые отличия в интерфейсе и наборе инструментов.

Мы ориентируемся на консоль в браузере Google Chrome, потому что этот браузер первым внедряет новые фичи и адаптируется к изменениях языка.

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

• Elements - для HTML и CSS кода;

• Console - для JavaScript кода;

• Sources - для структуры файлов проекта (его ресурсы);

• Network - сеть (интернет) и запросы;

• Application - работа в локальным хранилищем.

Чаще всего мы обращаемся именно к вкладке Console.

В ней выводятся возникшие ошибки (errors) и предупреждения (warnings).

Открыть Console быстро можно комбинацией клавиш:

• для Windows и Linux: Ctrl + Shift + J или F12

• для MacOS: Command + Option + J

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

Console.log('Hello World!') - самая часто используемая команда.

Вместо текста в кавычках 'Hello World!' можно указать имя переменной, чье значение хотим увидеть, другой какой-то текст или целое выражение, результат которого нас интересует.

Пример, что можно вывести в консоль, чтобы увидеть результат во вкладке Console в браузере:

console.log('My name is Google');

console.log(result); // где result - это переменная с каким-то значением

console.log(a + b); // где a и b - это переменные с числовыми значениями