Как проверить загрузку ресурсов

Если вы запускаете консольную программу, а та сыпет страшными красными сообщениями, то явно что-то пошло не так. Это прекрасный сигнал о проблемах, настолько привычный, что вы постоянно на него ориентируетесь: поправили код — запустили — проверили что нет ошибок в консоли. С фронтендом ситуация в чём-то похожа, но есть важное отличие. Браузер скрывает ошибки от пользователя и не показывает их пока сами не попросите.

Вкладка Network

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

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

Вкладка Console

Даже если все ресурсы загрузились, это ещё не значит что JS код будет работать исправно. Если что-то не так, то браузер сообщит об этом во вкладке Console. Поэтому откройте инструменты разработчика, перейдите во вкладку Console и проверьте, что нет красных сообщений об ошибках.

А теперь лайфхак. Во вкладке Console отображаются не только ошибки JS кода, но и ошибки загрузки ресурсов — тех самых, что во вкладке Network. Получается, что все ошибки стекаются в Console, что делает этот инструмент супер-полезным. Фактически, что бы вы не делали на фронтенде, у вас обязательно должна быть открыта вкладка Console. Выработайте в себе такую привычку, всегда держите консоль открытой. Вот полезные хоткеи:

• Chrome Ctrl+Shift+J — вкладка Console
• Firefox Ctrl+Shift+K — вкладка Console
• F12 — показать/скрыть инструменты разработчика

Правишь фронтенд — открой консоль

Читать дальше

• Про ошибки в консоли и как их чинить