Bagaimana cara memasukkan file JavaScript atau perpustakaan di konsol Chrome?

Apakah ada cara (mungkin asli?) Yang lebih sederhana untuk memasukkan file skrip eksternal dalam browser Google Chrome?

Saat ini saya melakukannya seperti ini:

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

appendChild() adalah cara yang lebih asli:

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

Apakah Anda menggunakan kerangka kerja AJAX? Menggunakan jQuery akan menjadi:

$.getScript('script.js');

Jika Anda tidak menggunakan kerangka kerja apa pun maka lihat jawabannya oleh Harmen.

(Mungkin tidak layak menggunakan jQuery hanya untuk melakukan satu hal sederhana ini ( atau mungkin itu ) tetapi jika Anda sudah memilikinya dimuat maka Anda mungkin juga menggunakannya. Saya telah melihat situs web yang memuat jQuery misalnya dengan Bootstrap tetapi masih gunakan DOM API secara langsung dengan cara yang tidak selalu portabel, alih-alih menggunakan jQuery yang sudah dimuat untuk itu, dan banyak orang tidak menyadari fakta bahwa bahkan getElementById()tidak bekerja secara konsisten di semua browser - lihat jawaban ini untuk detailnya. )

MEMPERBARUI:

Sudah bertahun-tahun sejak saya menulis jawaban ini dan saya pikir ada baiknya menunjukkan di sini bahwa hari ini Anda dapat menggunakan:

• SystemJS
• ModuleLoader
• jspm.io

untuk memuat skrip secara dinamis. Itu mungkin relevan bagi orang yang membaca pertanyaan ini.

Lihat juga: Pembicaraan Fluent 2014 oleh Guy Bedford: Alur Kerja Praktis untuk Modul ES6 .

Di browser modern, Anda dapat menggunakan fetch untuk mengunduh sumber daya ( Mozilla docs ) dan kemudian mengevaluasi untuk mengeksekusinya.

Misalnya untuk mengunduh Angular1, Anda perlu mengetik:

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 */ })

Di chrome, opsi terbaik Anda mungkin adalah tab Cuplikan di bawah Sumber di Alat Pengembang.

Ini akan memungkinkan Anda untuk menulis dan menjalankan kode, misalnya, di halaman about: blank.

Informasi lebih lanjut di sini: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=id

Sebagai tindak lanjut dari jawaban @ maciej-bukowski di atas ^^^ , di peramban modern seperti yang sekarang (musim semi 2017) yang mendukung async / menunggu Anda dapat memuat sebagai berikut. Dalam contoh ini kita memuat pustaka 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);

Jika Anda menjalankan cuplikan dan kemudian membuka konsol peramban, Anda akan melihat fungsi html2canvas () sekarang telah ditentukan.

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

Jika ada yang gagal memuat karena skrip hes melanggar skrip-src "Kebijakan Keamanan Konten" atau "karena tidak aman-eval 'tidak diizinkan", saya akan menyarankan menggunakan modul-injektor saya yang sangat kecil sebagai cuplikan dev-tools, maka Anda akan dapat memuat seperti ini:

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>

solusi ini berfungsi karena:

1. Ini memuat perpustakaan di xhr - yang memungkinkan CORS dari konsol, dan menghindari kebijakan script-src.
2. Ia menggunakan opsi sinkron xhr yang memungkinkan Anda untuk tetap pada konteks konsol / snippet, sehingga Anda akan memiliki izin untuk membuat skrip, dan tidak diperlakukan sebagai eval-tidak aman.

Saya menggunakan ini untuk memuat objek KO ko di konsol

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

atau tuan rumah secara lokal

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

Instal tampermonkey dan tambahkan UserScript berikut dengan satu (atau lebih) @matchdengan url halaman tertentu (atau kecocokan semua halaman :)https://* misalnya:

// ==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;

})();

Setiap kali Anda membutuhkan pustaka di konsol, atau pada cuplikan, aktifkan UserScript khusus dan segarkan.

Solusi ini mencegah polusi namespace . Anda dapat menggunakan ruang nama khusus untuk menghindari penimpaan variabel global yang ada di halaman secara tidak disengaja.