Source

Source panel – Панель источников DevTools. Вкладка Source — это отладчик JavaScript, которая используется для контроля кода ваших страниц. Network DevTools. Эта вкладка позволяет вам просматривать информацию о ресурсах, которые создают веб-страницы. Понимать производительность вашего блога, разбивая полную загрузку на этапы.

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

На первый взгляд назначение третьей вкладки инструментов разработчика "Sources" не совсем понятно. По умолчанию в центре рабочего пространства здесь также открывается исходный код страницы, который, почему-то, нельзя править. По бокам расположено две панели: "Page" (слева) и "Threads" (справа). И вот как раз левая панель и является основным "богатством" вкладки "Sources"! Эта панель позволяет просмотреть все ресурсы, которые подгружаются вместе со страницей. Картинки, скрипты, таблицы стилей – всё это можно выделить и просмотреть в рабочей области (а скрипты можно ещё и править)

Помимо просмотра ресурсов и правки JavaScript (кстати, при этом можно использовать инструменты из правой панели), вкладка "Sources" позволяет скачивать любые файлы на компьютер. Эту особенность можно применить в дело, для скачивания, например, фотографий из Instagram и других веб-ресурсов, на которых прямое сохранение изображений недоступно! Просто открываем инструменты разработчика, в списке ресурсов ищем нужные картинки, а затем сохраняем их:

Аналогично можно скачивать, например, понравившиеся шрифты SVG-графику и подобные ресурсы, прямое сохранение которых может быть недоступно.