web-dev-qa-db-ja.com

JavaScriptファイルをChromeコンソールに含める

Google Chromeブラウザーに外部スクリプトファイルを含める簡単な（おそらくネイティブですか？）方法はありますか？

現在、私はこれを次のようにしています：

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

appendChild()は、よりネイティブな方法です。

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

AJAXフレームワークを使用していますか？ jQueryを使用すると、次のようになります。

$.getScript('script.js');

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

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

更新：

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

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

参照： Guy BedfordによるFluent 2014トーク：ES6モジュールの実用的なワークフロー 。

84
rsp

最新のブラウザでは、fetchを使用してリソースをダウンロードし（ 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 */ })
32
Maciej Bukowski

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

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

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

13
atirado

@ maciej-bukowski 上記^^^ の答えのフォローアップとして、async/awaitをサポートする現在（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（）関数が定義されていることがわかります。

11
jbustamovej
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);
6
xiao 啸

これを使用して、コンソールで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>");
1
Deepak Vishwakarma