Как проверить загрузку ресурсов
Если вы запускаете консольную программу, а та сыпет страшными красными сообщениями, то явно что-то пошло не так. Это прекрасный сигнал о проблемах, настолько привычный, что вы постоянно на него ориентируетесь: поправили код — запустили — проверили что нет ошибок в консоли. С фронтендом ситуация в чём-то похожа, но есть важное отличие. Браузер скрывает ошибки от пользователя и не показывает их пока сами не попросите.
Вкладка Network
Первое что стоит проверять — это загрузку ресурсов во вкладку Network. Откройте сайт, включите инструменты разработчика браузера. Там перейдите во вкладку Network. Теперь перезагрузите страницу, чтобы отобразился полный список ресурсов.
Вы увидите список загруженных ресурсов, и он может оказаться очень большим. Ваша задача — проверить, что в нём нет красных сообщений об ошибке.
Вкладка Console
Даже если все ресурсы загрузились, это ещё не значит что JS код будет работать исправно. Если что-то не так, то браузер сообщит об этом во вкладке Console. Поэтому откройте инструменты разработчика, перейдите во вкладку Console и проверьте, что нет красных сообщений об ошибках.
А теперь лайфхак. Во вкладке Console отображаются не только ошибки JS кода, но и ошибки загрузки ресурсов — тех самых, что во вкладке Network. Получается, что все ошибки стекаются в Console, что делает этот инструмент супер-полезным. Фактически, что бы вы не делали на фронтенде, у вас обязательно должна быть открыта вкладка Console. Выработайте в себе такую привычку, всегда держите консоль открытой. Вот полезные хоткеи:
- Chrome Ctrl+Shift+J — вкладка Console
- Firefox Ctrl+Shift+K — вкладка Console
- F12 — показать/скрыть инструменты разработчика
Правишь фронтенд — открой консоль
