Мониторинг изменений в JavaScript с помощью динамических выражений

Динамические выражения — это отличный способ отслеживания значения выражений JavaScript, которые с течением времени сильно меняются. Вместо создания множества отдельных сообщений консоли , которые необходимо прочитать и прокрутить, можно закрепить выражения JavaScript в верхней части средства Консоли .

При использовании динамических выражений вы увидите значение выражений JavaScript в верхней части средства консоли , всегда в одном и том же месте, и вы можете использовать журналы консоли для значений, которые не меняются так часто.

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

Добавление нового динамического выражения

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

1. Откройте демонстрационную веб-страницу динамического выражения в новом окне или вкладке.

2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей.

3. В devTools откройте средство Консоли .

4. В консоли щелкните значок Создать динамическое выражение ( рядом с текстовым полем Фильтр .

   Появится текстовое поле:

   

5. Введите выражение document.activeElement JavaScript в текстовое поле. Динамическое выражение может быть любым допустимым выражением JavaScript.

6. Чтобы сохранить выражение, нажмите клавиши CTRL+ВВОД (Windows, Linux) или COMMAND+ВВОД (macOS). Или щелкните за пределами текстового поля Динамическое выражение .

   Выражение теперь является динамическим и отображается body в качестве результата:

   

7. Щелкните различные части веб-страницы или нажмите клавиши TAB или SHIFT+TAB , чтобы переместить фокус вокруг веб-страницы.

   Значение document.activeElement Live Expression изменяется, чтобы отразить текущий элемент в реальном времени:

   

Добавление дополнительных динамических выражений

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

Чтобы добавить второе динамическое выражение, выполните следующие действия:

1. В консоли щелкните значок Создать динамическое выражение ( рядом с текстовым полем Фильтр .

   Под первым динамическим выражением появится новое текстовое поле:

   

2. Введите новое выражение JavaScript в текстовое поле, например window.innerWidth , чтобы отобразить ширину окна браузера.

3. Повторите шаги, чтобы добавить еще одно динамическое выражение для window.innerHeight.

   Теперь в средстве "Консоль" отображаются три динамических выражения:

   

Удаление динамических выражений

Чтобы избавиться от динамического выражения, щелкните значок Закрыть () рядом с выражением:

Замена ведения журнала консоли динамическими выражениями

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

Использование ведения журнала консоли для отображения координат мыши

Чтобы отслеживать перемещение мыши на текущей веб-странице, выполните следующие действия:

1. Откройте демонстрационную веб-страницу Ведение демонстрации перемещения мыши в новом окне или вкладке.

2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с демонстрационной веб-страницей.

3. Наведите указатель мыши на отрисованную демонстрационную веб-страницу.

   В консоли отображается множество сообщений журнала:

   

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

Использование динамических выражений для отображения координат мыши

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

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

1. Откройте демонстрационную веб-страницу Перемещение мыши без ведения журнала демонстрации в новом окне или вкладке.

   Эта демонстрационная веб-страница использует JavaScript для отслеживания текущего положения мыши и сохраняет координаты в x глобальных переменных и y .

2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с демонстрационной веб-страницей.

3. Переместите мышь.

   Значения x переменных и y обновляются, но сообщения журнала не отображаются.

4. В средстве Консоли щелкните значок Создать динамическое выражение ( рядом с текстовым полем Фильтр , а затем введите выражение xJavaScript .

5. Повторите описанный выше шаг, чтобы добавить второе динамическое выражение для y.

6. Перемещение мыши по отображаемой веб-странице.

   Теперь в консоли значения динамических выражений x и y обновляются в режиме реального времени: