Далее на странице...
- Вкладка Sources - breakpoints Вкладка Source позволяет дебажить код (отлаживать) Допускается устанавливать точки останова (разрыва)
В большинстве случаев для отладки и тестирования кода используется консоль браузера.
Но помимо консоли (кроме вкладки Console) для разработчиков доступны и другие инструменты: такие вкладки как Elements, Sources, Network и не только.
Вкладка Elements (элементы) - содержит HTML-код текущей страницы, а также используемые css-файлы и javascript-файлы.
В браузере Mozilla Firefox вкладка Elements называется Инспекотр DOM и стилей. Что такое DOM? Читайте здесь.
Вкладка Sources (исходный, источник) - это вкладка со всеми доступными для текущей страницы исходными материалами: все подгруженные файлы из всех источников. Здесь видны все ресурсы, которые подгружаются вместе со страницей.
В браузере Mozilla Firefox вкладка Sources называется Отладчик.
Вкладка Network (сеть) - отвечает за работу с сетью. Дает возможность отслеживать все, что касается загрузки сайта: файлы и их размер, скорость загрузки отдельных файлов. Также во вкладке Network есть возможность наблюдать за запросами, которые делает/отправляет текущая страница.
Вкладка Sources - breakpoints
Подробнее остановимся на вкладке Sources.
Вкладка Source позволяет дебажить код (debug - отлаживать), то есть отлаживать и проверять программный код на ошибки. Здесь есть возможность получать промежуточные результаты и видеть, как работают отдельные фрагменты кода.
Отчасти это возможно благодаря тому, что во вкладке Sources допускается устанавливать точки останова (разрыва) - breakpoints. Этот инструмент используется, когда выполнение кода нужно остановить, что очень удобно.
Во вкладке Sources есть возможность тестировать код фрагментарно, видеть все ошибки и нюансы работы скриптов.
Подробнее об отладке кода и точках останова breakpoints читайте здесь.