Як включити файл 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? Використовуючи jQuery, це було б:

$.getScript('script.js');

Якщо ви не використовуєте жодної основи, дивіться відповідь Гармен.

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

ОНОВЛЕННЯ:

Минуло роки, як я написав цю відповідь, і я вважаю, що тут варто зазначити, що сьогодні можна використовувати:

• SystemJS
• Модуль завантажувача
• jspm.io

динамічно завантажувати сценарії. Вони можуть стосуватися людей, які читають це питання.

Дивіться також: Бесіда у 2014 році Гая Бедфорда: практичні робочі процеси для модулів ES6 .

У сучасних веб-переглядачах ви можете скористатися файлом для завантаження ресурсу ( Mozilla docs ), а потім 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 */ })

У хромі найкращим варіантом може бути вкладка "Знімки" в розділі Джерела в Інструментах для розробників.

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

Більше інформації тут: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=uk

Як відповідь на відповідь @ maciej-bukowski вище ^^^ , в сучасних браузерах станом на сьогодні (весна 2017 року), які підтримують асинхронізацію / очікують, ви можете завантажити наступне. У цьому прикладі ми завантажуємо завантажувальну бібліотеку 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);

Якщо хтось не зможе завантажити, тому що він не порушує сценарій-src "Політика безпеки вмісту" або "тому, що небезпечний-eval" не дозволений ", я пораджу використовувати мій маленький модуль-інжектор як фрагмент інструментів розробки, тоді ви зможете завантажити так:

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, який дозволяє вам залишатися в контексті консолі / фрагмента, тому ви будете мати дозвіл на оцінку сценарію, а не на трактування як на небезпечний-eval.

Я використовую це , щоб завантажити 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 та додайте наступний UserScript з одним (або більше) @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;

})();

Кожен раз, коли вам потрібна бібліотека на консолі чи фрагменті, увімкніть певний UserScript та оновіть.

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