Посмотреть значение переменной javascript

Введение в отладку на примере Firefox DevTools, часть 2 из 4

Часто console.log используют, чтобы узнать значение переменной. Есть способ проще и удобнее.

Откройте приложение со списком дел в новой вкладке, там же откройте отладчик. Эта версия специально сломана, чтобы мы попрактиковались в отладке.

В файле app.js вы найдёте функцию addTodo . Она превращает введённый в текст в объект с данными. Полученный объект кладёт в массив, где хранятся все дела пользователя. Попробуйте ввести в поле какую-нибудь задачу и добавить её в список дел. Наверняка вы ждали, что ваша задача окажется среди других, но вместо неё там [object HTMLInputElement] . Если ваша задача звучала не как «[object HTMLInputElement]», в чём я сомневаюсь, что-то пошло не так. Давайте искать ошибку.

Первым делом захочется всё «законсолить», расставив по коду console.log :

const addTodo = e => < e.preventDefault(); const title = document.querySelector(".todo__input"); console.log('title is: ', title); // Консолим значение const todo = < title, done: false >; console.log('todo is: ', todo); // Консолим полученный объект items.push(todo); saveList(); console.log('The updated to-do list is: ', items); // Консолим итоговый массив document.querySelector(".todo__add").reset(); >;

Способ рабочий, но с лишними телодвижениями: сперва нужно расставить console.log , после не забыть их убрать. Есть способ проще и удобнее — точки останова в отладчике.

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

В отладчике, в области предпросмотра файла app.js поставьте на 13-й строке точку останова. Для этого кликните по номеру строки. Появится синий флажок — знак точки останова:

Снова попробуйте ввести в поле какую-нибудь задачу и добавить её в список. Не закрывая отладчик! Из-за точки останова выполнение кода приостановится внутри функции addTodo на 13-й строке. До выполнения кода самой строки.

Мы хотим понять, почему в список дел не попадает введённый в текст. Для этого отследим значения переменных title и todo . Сделать это можно несколькими способами:

• На вкладке «Консоль». Здесь в момент остановки будут доступны переменные из области видимости прерванной функции. Поэтому вы можете просто ввести в консоль имя нужной переменной, нажать Enter и узнать её значение.
• С помощью курсора. Значение переменной также можно узнать, если в момент остановки навести курсор на неё в области предпросмотра. Давайте узнаем, какие свойства и методы есть у объекта document , для этого наведём на него курсор:

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

Независимо от выбранного способа вы столкнётесь с ма-а-аленькой проблемой: значения переменных title и todo ещё не определены. Дело в том, что выполнение кода приостановилось на 13-й строке, а присваивание значений этим переменным происходит позже. И нам нужно продолжить выполнение кода, пока мы не дойдём до строк 14 и 15. Для этого на панели инструментов есть кнопки навигации:

• Возобновить-приостановить, чтобы приостанавливать или возобновлять выполнение кода в процессе отладки. Если иконка «треугольная», как в видеоплеере, значит выполнение кода приостановлено. Независимо от того, нажали вы на кнопку или сработала точка останова. Если нажать на кнопку с треугольником, выполнение программы продолжится до следующей точки останова. Если больше точек останова нет, то до конца.
• Перешагнуть через, чтобы выполнить код на текущей строке и перейти к следующей.
• Зайти в, чтобы выполнить код на текущей строке и «провалиться» внутрь него. Работает, если на текущей строке есть вызов функции, в которую можно «провалиться». Если вызова нет, поведение аналогично «Перешагнуть через».
• Выйти из, чтобы выполнить код функции до конца, и «подняться» обратно. Работает, если в текущую функцию вы ранее «провалились». Иначе, поведение аналогично «Перешагнуть через».

Мы сфокусируемся на кнопке «Перешагнуть через» или по-человечески — кнопке построчного выполнения кода. И не важно, что это за код. Если это простая операция, вроде сложения, она будет выполнена целиком. Если это вызов функции, он тоже будет выполнен целиком. В этом главное отличие от кнопки «Зайти в», нажатие на которую позволяет «провалиться» в функцию вместо её вызова целиком. Но не будем уходить в сторону. Зачем и когда нужна кнопка «Зайти в», мы разберём в следующей статье.

Итак, после остановки нажмите один раз кнопку «Перешагнуть через». Выполнение кода всё ещё приостановлено, но уже на 14-й строке. Предыдущая строка, 13-я, была выполнена. Однако значение переменных всё ещё не определено, потому что остановка происходит до выполнения кода самой строки. Нажимаем «Перешагнуть через» ещё раз, и. 14-я строка теперь тоже выполнена! Значит переменной title было присвоено значение. И мы можем навести на неё курсор и узнать, какое:

Теперь, когда мы можем узнать значение title , проблема очевидна. Вместо введённого текста в переменную записывается ссылка на DOM-элемент . Целый объект свойств и методов! Но если мы изучим структуру этого объекта, то найдём нужное нам свойство с введённым текстом — это value .

Останется только изменить код, добавив в строку:

const title = document.querySelector(".todo__input");

обращение к свойству value :

const title = document.querySelector(".todo__input").value;

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

У нас и так много новой информации. Для её закрепления рекомендуем самостоятельно добавить несколько точек останова в приложение и погулять туда-сюда по коду с помощью кнопок навигации. Набить руку.

Это только основы отладчика. Но стоит с ними разобраться, и вы сами увидите, насколько удобнее пользоваться отладчиком вместо console.log . А когда будете готовы, переходите к следующей части, где мы продолжим изучать возможности отладчика Firefox DevTools.

Совет в тему

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

В нашем случае это будут две переменные: title и todo . Установим за ними слежку. После поставим точку останова всё на той же 13-й строке. Теперь попробуем добавить задачу в список дел, чтобы вызвать функцию addTodo и в итоге приостановить выполнение кода. После начнём построчно выполнять код. Как только переменной, за которой стоит слежка, присвоится значение, мы увидим его в блоке «Выражения для отслеживания». И не нужно наводить курсор или печатать что-то в консоль браузера.

Источник

Посмотреть значение переменной javascript

Самое простое, которое приходит на ум — это вывод с помощью alert.

Если бы мы вывели просто так окно с помощью alert, то вы бы ничего не поняли, поэтому:

Сделаем живой пример вывода переменной на экран!

Для этого нам понадобится:

Далее нам потребуется script, где будет объявлена переменная и присвоено ей значение:

Соберем такой простой код вывода переменной на экран:

Результат вывода переменной на экран в javascript

Второй способ вывод переменной на экран.

Для второго способа вывода значения переменной используем document.write — не буду на этой теме подробно останавливаться, сразу перейдем к живому примеру!
Для того, чтобы произошел живой вывод переменной нажмите на кнопку — «Выведи переменную на экран«!

Выведи переменную на экран

Результат использования вывода переменной:

Как вы наверное поняли — этот вариант, вывода после каких-то действий не совсем удобен.

Если мы откроем код с помощью исследовать элемент, то увидим, что неожиданно, кроме нашего вывода, на странице вообще ничего нет!

Вывод переменной на экран js при загрузке страницы Итак.

Открываем исследовать элемент.

Теперь давайте откроем «исследовать элемент» и посмотрим. как вывод переменной отображается в коде.

Очередной способ вывода переменной на экран javascript

Для того, чтобы продемонстрировать третий способ вывода переменной на экран нам понадобится:

Любой элемент Dom div, куда будем выводить переменную.

Далее с помощью innerHTML будем передавать значение переменной в выше показанный «div «

Где будет onclick, по нажатию будет запускать выполнение выше приведенной функции.

Результат вывода переменной на экран javascript

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

Как вывести переменную в консоль js

Не будем тянуть кота за хвост и сразу перейдем к коду.

В этом примере будем выводить переменную в console

Возьмем выше приведенный код и добавим вместо «innerHTML» → «console.log»!

Вывести переменную в консоль:

Откройте консоль — с помощью исследовать элемент

И нажмите кнопку «Выведи переменную в консоль«

Выведи переменную в консоль

Источник

Консоль JavaScript в вашем браузере

В процессе программирования на JavaScript появляется необходимость выводить значения переменных. К примеру, это можно делать функцией alert( ). Но если использовать её несколько раз, тогда придётся закрывать всплывающее окно, чтобы увидеть следующее. Это неудобно, поэтому на помощь приходит консоль, встроенная в браузер.

Как открыть JavaScript консоль в браузере?

Если вы пользуетесь одним из популярных браузеров (Chrome, FireFox, Safari, Opera), то в них уже встроена консоль JavaScript, в которую можно выводить отладочную информацию во время разработки. Для этого откройте страницу сайта, на которой находится JS код для тотладки, и кликните на клавишу F12 на клавиатуре. Откроется панель разработчика.

В большинстве браузеров средства разработки называются более-менее одинаково и имеют очень схожий функционал. Далее в статье будет рассматриваться браузер FireFox.

Теперь необходимо переключить вкладку вверху открывшегося окна на «Консоль». Кликните на эту вкладку с помощью курсора мыши: Разберёмся с иконоками и опциями, которые есть в этой закладке:

• Иконка корзины — очищает лог (лог — это список событий, строчки текстовых записи)
• Непрерывные логи — если поставить эту галочку, то при перезагрузки страницы лог не будет очищаться автоматически.
• «Ошибки», «Предупреждения», «Лог» . — эти закладки отключают вывод сообщений. К примеру, кликните по пункту «Ошибки» и снимите выделение, тогда в консоль не будут записываться предупреждение об ошибках.

Как вывести переменную JavaScript в консоль?

Попробуем написать на странице JavaScript код и перезагрузить её, чтобы он выполнился. В коде используем функцию console.log( ), которая выводит значение содержимого в скобках. То есть если поставить в скобки переменную, то в консоли будет показано её значение:

Заглянем в консоль и увидим значение объекта: Чтобы увидеть подробную информацию, кликните на иконку стрелочки слева на интересующей строчке: Таким способом можно выводить не только массивы и объекты, но и простые переменные. К сожалению, если выводить сразу несколько значений, то не будет понятно что к чему относится. Продемонстрируем это:

var a = 'Мышь'; var b = 'Сыр'; var c = 100; console.log(a); console.log(b); console.log(c);

Результат выполнения этого кода будет таким: Такой вывод не слишком информативен. К счастью, внутри скобок функции console.log( ) можно использовать объединение строк. Поэтому предлагаем записать дополнительную отладочную информацию в выводимые строки:

var a = 'Мышь'; var b = 'Сыр'; var c = 100; console.log('Значение переменной "a" = ' + a); console.log('Значение переменной "b" = ' + b); console.log('Значение переменной "c" = ' + c);

Теперь вывод в консоль будет более информативным. И можно использовать функцию console.log( ) десятки раз, не боясь запутаться в значениях, которые попадают в консоль:

Рекомендуем ознакомиться со статьёй «Операции со строками в JavaScript», если возникли вопросы к объединению строк.

К сожалению, это можно делать только с простыми переменными (строки/числа) и массивами (в том числе многомерными), но с объектами так сделать не получится, потому что будет выведено «[object Object]» вместо значения:

Источник