Можно ли добавить ресурс с помощью инструментов Chrome Dev?

Я просматриваю веб-страницу с помощью Chrome. Исходный источник не включает jQuery, но было бы полезно использовать некоторые функции jQuery для проверки DOM. Было бы больно изменить источник, чтобы включить jQuery script, поэтому можно ли использовать инструменты разработчика Chrome для загрузки jQuery в DOM после загрузки страницы? В качестве альтернативы есть встроенная функция JavaScript, которая может выполнять загрузку?

Я попытался отредактировать тег заголовка, чтобы включить тег <script src="/path/to/jQuery.min.js"></script>, но на самом деле он не загружает файл jQuery.min.js.

К сожалению, Modernizr и другие загрузчики ресурсов также не включены в исходный код.

ОТВЕТЫ

Ответ 1

Вы должны иметь возможность запускать это в консоли JS.

var jq = document.createElement('script');
jq.src = "/path/to/jQuery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

В качестве альтернативы вы можете скопировать весь файл jQuery в консоль. Не лучший вариант, но это тоже сработает.

Третий вариант - это плагин jQueryify, я сам его не использовал, но выглядит многообещающим.

Ответ 2

Используйте requirify awesome chrome extention и получите доступ к require() в консоли.

Теперь вы можете полностью обновить рабочий процесс тестирования в консоли разработчика Chrome, чтобы напрямую импортировать модули npm в консоль.

После установки requirify вы можете легко добавить jquery в консольный сеанс, введя его в консоль разработчика:

var $ = require('jquery');

Это приведет к загрузке jQuery из числа npm, что сделает его доступным для вас в консоли. Теперь вы можете использовать jQuery в своей консоли, как на любой веб-странице:

$('div').each(function(index){ //... });

Очевидно, что это сработает для вашей ситуации, но также будет работать и во многих других ситуациях. Отличный инструмент для работы с инструментами!


См. require(), который используется в консоли ниже:

require() in the browser!

Awesome!

Ответ 3

Это фрагмент кода JS, который я часто использую для решения этой проблемы.

Это то же самое, что и Мэтт, но завернутый в IIFE, чтобы облегчить вам или любому другому человеку запуск jQuery в среде вашего браузера Просто так.

(function() {
var h = document.head;
var scr = document.createElement('script');
scr.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
h.appendChild(scr);
})();

Если вы хотите использовать имя функции $ для других функций, не связанных с jQuery, вы можете отказаться от $ и назначить функцию jQuery другому имени или вернуться к исходной форме jQuery(), вызвав $.noConflict() метод, как указано выше Мэттом.

Ответ 4

Просто скопируйте его в консоль браузера

var script = document.createElement("script");
script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js";
document.body.appendChild(script);

И вернемся к работе!