2. Как логировать промежуточные результаты и еще console.log JS + Tilda

Вот бывает такое, все вроде бы должно работать, а не работает. Сам часто сталкиваюсь с ситуацией когда код написан, проверен на тестовом сайт. А при переносе его на рабочий сайт выясняется что все поломалось. А почему поломалось непонятно.

Так вот в JS есть подмога на такой случай

console.log в помощь

Итак, допустим на странице у вас есть 3 кнопки

Каждому такому блоку присвоен класс uc-find-me

Размещаем на странице код, который ищет три кнопки, и выводит через console.log результат поиска всех кнопок а также ссылку что присвоена каждой кнопке.

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

Наша кнопка это «a» найти её можно по такому запросу «.uc-find-me a». Пример кода ниже

<script>
document.addEventListener("DOMContentLoaded" , (event) => {
    let allButtons = document.querySelectorAll(".uc-find-me a");
    console.log(allButtons);
});    
</script>

Результат выполнения

Мы видим что в консоль вывелась переменная «allButtons» куда записались три кнопки.

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

<script>
document.addEventListener("DOMContentLoaded" , (event) => {
    //сначала задаем пространство имен переменных, которые используем
    let allButtons, buttonOne, buttonTwo, buttonThree
    
    //далее идет уже основной код
    allButtons = document.querySelectorAll(".uc-find-me a");
    console.log(allButtons);
    buttonOne = allButtons[0].href;
    console.log(decodeURI(buttonOne));
    buttonTwo = allButtons[1].href;
    console.log(decodeURI(buttonTwo));
    buttonThree = allButtons[2].href;
    console.log(decodeURI(buttonThree));
});    
</script>

Результат в консоли

В итоге console.log можно использовать как вывод результата для проверки работы, а также своего рода пошаговой проверки логики работы.

Саму консоль ищите в «Инструменты разработчика» в браузере, далее «Console» вкладка

debug в браузере в помощь

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

Открываете сайт, далее режим «Инструменты разработчика», далее вкладка «Sources», слева выбираете адрес страницы, ту что открыли

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

Обновляем страницу и видим что у нас сайт остановился загружаться именно на этой строчке

Тем самым вы также можете пошагово отследить корректность вашего или стороннего кода, который поставили. Посмотреть все переменные что задействовались, функции и так далее.

Как отслеживать логи с телефона

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

Но и здесь есть решение. Для андройд смартфона я использую Kiwi Browser

Вывод

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

Пример кода можете поглядеть здесь Урок 2 Логирование и console log

Как со мной связаться

Если вы не нашли для себя ответ в моих статьях или у вас есть задача, присылайте ваше ТЗ задание под ваш проект.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.