Как научиться отладке

@Kifsif · Регистрация: 12.06.2011

Author24 — интернет-сервис помощи студентам

Я создал файл index.html и в него кинул некое содержимое. Просто. Учебное.
Вот кусочек:

HTML5    
        
    Скопировано
1
2
3
4
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="jsfile1.js"></script>
</head>

В body у меня точно есть теги li.

А jsfile1.js вот такой:

JavaScript    
        
    Скопировано
1
2
3
var listElements;
listElements = $('li');
console.log(listElements);

И вот я открываю свой index.html в Chrome.
Открываю Developer tools, закладка Sources.
И ставлю точку останова на строку console.log(listElements);
А listElements добавляю в Watch Expressions.

В результате на точке останова у меня listElements: m.fn.init[0].
Скрипт отрабатывает, я иду в Console и пишу: $('li'). И получаю десяток тегов li.

Никак не могу понять. Вроде, все делаю - скрипт-то рабочий: ни ошибок в нем, в консоли результат получаю.
А вот когда шагаю - ну, пустой массив в listElements, хоть режь его.

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

@Kifsif · 10.05.2015, 10:50 **[ТС]**

Мужики, ну, помогите. Я уже всю плешь проел.

Ничего не понимаю, как этот дебаггер работает. Давайте я с картинками нынче. Значится, код тот же.
Создал сниппет, скопировал туда код скрипта, запустил. Он работает (см. скриншот Работает сниппет.png). Т.е. я вижу, что на точке останова listElements содержит 13 элементов. Да, это нужный мне результат.

Иду обратно в скрит. Обновляю страницу. Задушился на точке останова. И чего - listElements содержит 0 элементов.

Не знаю я, что с этим делать, выручайте, пожалуйста.

@Kifsif · 10.05.2015, 12:59 **[ТС]**

Вопрос снят. Причина была в том, что Html не успевал отрендерится, когда работал скрипт. Пересунул скрипт в конец документа, перед закрытием тега body - все в отладчике стало видно.

@sibbear · 11.05.2015, 19:14

Сообщение от Kifsif

Причина была в том, что Html не успевал отрендерится, когда работал скрипт.

вот для етого и существует document ready function )))))

Новые блоги и статьи Все статьи Все блоги /
Обмен данными в микросервисной архитектуре ArchitectMsa 06.04.2025 Когда разработчики начинают погружаться в мир микросервисов, они часто сталкиваются с парадоксальным правилом: "два сервиса не должны делить один источник данных". Эта мантра звучит повсюду в. . .	PostgreSQL в Kubernetes: Автоматизация обслуживания с CNPG Mr. Docker 06.04.2025 Администраторы баз данных сталкиваются с целым рядом проблем при обслуживании PostgreSQL в Kubernetes: как обеспечить правильную репликацию данных, как настроить автоматическое переключение при. . .	Async/await в TypeScript run.dev 06.04.2025 Асинхронное программирование — это подход к разработке программного обеспечения, при котором операции выполняются независимо друг от друга. В отличие от синхронного выполнения, где каждая последующая. . .	Многопоточность в C#: Синхронизация потоков UnmanagedCoder 06.04.2025 Многопоточное программирование стало неотъемлемой частью разработки современных приложений на C#. С появлением многоядерных процессоров возможность выполнять несколько задач параллельно значительно. . .	TypeScript: Классы и конструкторы run.dev 06.04.2025 TypeScript, как статически типизированный язык, построенный на основе JavaScript, привнес в веб-разработку новый уровень надежности и структурированности кода. Одним из важнейших элементов этой. . .
Многопоточное программирование: Rust против C++ golander 06.04.2025 C++ существует уже несколько десятилетий и его поддержка параллелизма постепенно наращивалась со временем. Начиная с C++11, язык получил стандартную библиотеку для работы с потоками, а в последующих. . .	std::vector в C++: от основ к оптимизации производительности NullReferenced 05.04.2025 Для многих программистов знакомство с std::vector происходит на ранних этапах изучения языка, но между базовым пониманием и подлинным мастерством лежит огромная дистанция. Контейнер std::vector. . .	Реляционная модель и правила Кодда: фундамент современных баз данных Codd 05.04.2025 Конец 1960-х — начало 1970-х годов был периодом глубоких трансформаций в области хранения и обработки данных. На фоне растущих потребностей бизнеса и правительственных структур существовавшие на тот. . .	Асинхронные операции в Django с Celery py-thonny 05.04.2025 Разработчики Django часто сталкиваются с проблемой, когда пользователь нажимает кнопку отправки формы и. . . ждёт. Секунды растягиваются в минуты, терпение иссякает, а интерфейс приложения замирает. . . .	Использование кэшей CPU: Максимальная производительность в Go golander 05.04.2025 Разработчикам хорошо известно, что эффективность кода зависит не только от алгоритмов и структур данных, но и от того, насколько удачно программа взаимодействует с железом. Среди множества факторов,. . .

@Kifsif 145 / 113 / 31 Регистрация: 12.06.2011 Сообщений: 1,246
	10.05.2015, 10:50 [ТС]
	Мужики, ну, помогите. Я уже всю плешь проел. Ничего не понимаю, как этот дебаггер работает. Давайте я с картинками нынче. Значится, код тот же. Создал сниппет, скопировал туда код скрипта, запустил. Он работает (см. скриншот Работает сниппет.png). Т.е. я вижу, что на точке останова listElements содержит 13 элементов. Да, это нужный мне результат. Иду обратно в скрит. Обновляю страницу. Задушился на точке останова. И чего - listElements содержит 0 элементов. Не знаю я, что с этим делать, выручайте, пожалуйста. Миниатюры 0

@Kifsif 145 / 113 / 31 Регистрация: 12.06.2011 Сообщений: 1,246
	10.05.2015, 12:59 [ТС]
	Вопрос снят. Причина была в том, что Html не успевал отрендерится, когда работал скрипт. Пересунул скрипт в конец документа, перед закрытием тега body - все в отладчике стало видно. 0

@sibbear 32 / 32 / 9 Регистрация: 15.02.2010 Сообщений: 215
	11.05.2015, 19:14
	Сообщение от Kifsif Причина была в том, что Html не успевал отрендерится, когда работал скрипт. вот для етого и существует document ready function ))))) 0