ChromeコンソールにJavaScriptファイルまたはライブラリを含める方法は？

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

フレームワークを使用していない場合は、Harmenの回答を参照してください。

（たぶん、これを1つの単純なことをするためだけにjQueryを使用する価値はありません（または多分それはそうです）が、すでにロードされている場合は、それを使用することもできます。既にロードされているjQueryを使用する代わりに、常に移植性のない方法でDOM APIを直接使用します。多くの人々はgetElementById()、すべてのブラウザーで一貫して機能しないことさえ知らない- この回答を参照してくださいを参照してください。 ）

更新：

私がこの答えを書いてから何年も経っていますが、今日ここで使用できることをここで指摘する価値があると思います。

• SystemJS
• ModuleLoader
• jspm.io

スクリプトを動的にロードします。これらは、この質問を読んでいる人に関係があるかもしれません。

参照：Guy BedfordによるFluent 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 */ })

Chromeでは、開発者ツールの[ソース]の下にある[スニペット]タブが最適なオプションです。

これにより、たとえば、about：blankページでコードを記述して実行できます。

詳細はこちら：https : //developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

上記の @ maciej-bukowski ^^^の回答のフォローアップとして、async / awaitをサポートする現在（2017年春）の最新のブラウザーでは、次のようにロードできます。この例では、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);

スクリプトが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>

このソリューションは次の理由で機能します。

1. ライブラリをxhrにロードします -コンソールからCORSを許可し、script-srcポリシーを回避します。
2. これは、コンソール/スニペットのコンテキストにとどまることができるxhr の同期オプションを使用するため、スクリプトを評価する権限があり、安全でない評価として扱われることはありません。

これを使用して、コンソールにkoノックアウトオブジェクトをロードします

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（またはすべてのページの一致）を持つ1つ（または複数）の次のUserScriptを追加します。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を有効にして更新します。

このソリューションは、名前空間の汚染を防ぎます。カスタム名前空間を使用して、ページ上の既存のグローバル変数が誤って上書きされることを回避できます。