Как включить файл JavaScript или библиотеку в консоль Chrome?

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

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

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

appendChild() это более родной способ:

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

Используете ли вы некоторые AJAX Framework? Используя jQuery это было бы:

$.getScript('script.js');

Если вы не используете какие-либо рамки, то посмотрите ответ Хармена.

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

ОБНОВИТЬ:

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

• SystemJS
• ModuleLoader
• jspm.io

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

См. Также: выступление Ги Бедфорда «Fluent 2014»: практические рабочие процессы для модулей ES6 .

В современных браузерах вы можете использовать fetch для загрузки ресурса ( документы 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 */ })

В Chrome лучшим вариантом может быть вкладка «Фрагменты кода» в разделе «Источники» в инструментах разработчика.

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

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

Как продолжение ответа @ maciej-bukowski выше ^^^ , в современных браузерах (весна 2017 г.), которые поддерживают async / await, вы можете загрузить следующим образом. В этом примере мы загружаем библиотеку load 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);

Если вы запустите сниппет, а затем откроете консоль браузера, вы увидите, что теперь определена функция html2canvas ().

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);

Если кому-то не удастся загрузить, потому что hes script нарушает script-src «Content Security Policy» или «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>

это решение работает потому что:

1. Это загружает библиотеку в xhr - что позволяет CORS из консоли и избегает политики script-src.
2. Он использует синхронную опцию xhr, которая позволяет вам оставаться в контексте консоли / фрагмента, так что у вас будет разрешение на оценку сценария, а не на то, чтобы его воспринимали как небезопасное.

Я использую это , чтобы загрузить kò объект нокаута в консоли

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>");

Установите tampermonkey и добавьте следующий код пользователя с одним (или несколькими) @matchс определенным URL-адресом страницы (или соответствием всех страниц :),https://* например:

// ==UserScript==
// @name         inject-rx
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Inject rx library on the page
// @author       Me
// @match        https://www.some-website.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     window.injectedRx = rxjs;
     //Or even:  window.rxjs = rxjs;

})();

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

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