Включить файл JavaScript в консоль Chrome

Есть ли более простой (возможно, нативный) способ включить внешний файл сценария в браузер Google Chrome?

В настоящее время я делаю это так:

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';

Ответ 1

appendChild() является более обычным способом:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

Ответ 2

Используете ли вы какую-то структуру AJAX? Используя jQuery, это будет:

$.getScript('script.js');

Если вы не используете какую-либо фреймворк, тогда см. ответ от Harmen.

(Может быть, не стоит использовать jQuery, чтобы сделать это просто (или, может быть, это), но если вы уже загрузили его, вы можете как хорошо использую его. Я видел веб-сайты, загруженные jQuery, например, с помощью Bootstrap, но по-прежнему использую DOM API напрямую, что не всегда переносится, вместо использования уже загруженного jQuery для этого, и многие люди не знают об этом факте что даже getElementById() не работает последовательно во всех браузерах - подробнее см. этот ответ.)

UPDATE:

Прошло много лет с тех пор, как я написал этот ответ, и я думаю, стоит отметить, что сегодня вы можете использовать:

для динамической загрузки скриптов. Это может иметь отношение к людям, читающим этот вопрос.

Ответ 3

В современных браузерах вы можете использовать извлечение для загрузки ресурса (Документы Mozilla), а затем eval для его выполнения.

Например, для загрузки Angular1 вам нужно ввести:

fetch('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js')
    .then(response => response.text())
    .then(text => eval(text))
    .then(() => { /* now you can use your library */ })

Ответ 4

В chrome лучшим вариантом может быть вкладка Snippets в разделе Источники в Инструментах разработчика.

Это позволит вам писать и запускать код, например, на пустую страницу.

Дополнительная информация здесь: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Ответ 5

В качестве продолжения ответа @maciej-bukowski выше ^^^ в современных браузерах (spring 2017), которые поддерживают async/wait, вы можете загрузить следующим образом. В этом примере мы загружаем библиотеку html2canvas загрузки:

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

Ответ 6

var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = path;
var hhead = document.getElementsByTagName('head')[0];
hhead.insertBefore(el, hhead.firstChild);

Ответ 7

Если кому-то не удастся загрузить, потому что hes script нарушает скрипт-src "Политика безопасности контента" или "потому что unsafe-eval 'не разрешен", я посоветую использовать мой довольно маленький модуль-инжектор как фрагмент кода dev-tools, и вы сможете загрузить его так:

imports('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js')
  .then(()=>alert('today is ${moment().format('dddd')}'));

<script src="https://raw.githack.com/shmuelf/PowerJS/master/src/power-moduleInjector.js"></script>

Ответ 8

Я использую это для загрузки нокаута объекта в консоль

document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-3.5.0.debug.js'></script>");

или локальный хост

document.write("<script src='http://localhost/js/knockout-3.5.0.debug.js'></script>");