Как Chrome Dev Tools поддерживает доступ к ресурсам сайта?

Question

Раньше я занимался отладкой и тестированием с помощью инструментов разработчика Chrome (известных как inspect element). Я обнаружил, что в столбце «Ресурсы» инструмента dev Chrome всегда может получить доступ к ресурсам с сервера и отобразить их (ссылки, видео, изображения…). Просто удивляйтесь, как это делает Chrome. Есть ли способ написать кусок кода, делающий то же самое (получить доступ к ресурсам сервера других веб-сайтов, не изменяя их, а отображая, например, ссылку видео, воспроизводимого в настоящее время на веб-сайте, которое обычно не появляется до нажата кнопка воспроизведения)?

Answer 1

DevTools не получает ресурсы с сайта. Получает их из браузера.

Уже были похожие вопросы

Как работает Инспекция ресурсов WebInspector в webkit / chrome?

и

Получение информации из инструментов разработчика Google Chrome

Инструменты разработчика Chrome состоят из двух частей: внешнего интерфейса (html + javascript) и внутреннего интерфейса (C ++), и существует API, который определяет протокол между этими частями. Вы можете увидеть спецификацию здесь . Вы можете использовать его для написания своего собственного приложения вместо стандартного веб-интерфейса DevTools.

Также имеется API экспериментальной отладки для расширений Chrome.

Answer 2

Я думаю, что Webkit WebInspector перебирает исходный код дыры и сопоставляет все ресурсы источника.

Таким образом, он соответствует <link href="something.css">, а затем помещает что-то в панель ресурсов под таблицами стилей.То же самое относится и к другим тегам.

Нетрудно сделать регулярные выражения для этого.