Chrome konsoluna JavaScript dosyası veya kitaplığı nasıl eklenir?

Google Chrome tarayıcısına harici bir komut dosyası eklemenin daha basit (yerel olabilir mi) bir yolu var mı?

Şu anda böyle yapıyorum:

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

appendChild() daha doğal bir yol:

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

AJAX çerçevesi kullanıyor musunuz? JQuery kullanarak:

$.getScript('script.js');

Herhangi bir çerçeve kullanmıyorsanız, Harmen'in cevabına bakın.

(Belki de sadece bu basit bir şey yapmak için jQuery kullanmaya değmez ( ya da belki de ) ama zaten yüklediyseniz o zaman da kullanabilirsiniz. JQuery, örneğin Bootstrap yüklü ama yine de DOM API'sini bunun için önceden yüklenmiş jQuery kullanmak yerine doğrudan her zaman taşınabilir olmayan bir şekilde kullanın ve birçok kişi getElementById()tüm tarayıcılarda tutarlı bir şekilde çalışmadığının farkında değildir - ayrıntılar için bu cevaba bakın. )

GÜNCELLEME:

Bu yanıtı yazmamın üzerinden yıllar geçti ve bence bugün kullanabileceğinizi belirtmek gerekir:

• SystemJS
• ModuleLoader
• jspm.io

dinamik olarak yüklemek için. Bunlar bu soruyu okuyan kişilerle ilgili olabilir.

Ayrıca bkz: Guy Bedford'un Fluent 2014 konuşması: ES6 Modülleri için Pratik İş Akışları .

Modern tarayıcılarda, kaynağı ( Mozilla dokümanları ) indirmek ve daha sonra yürütmek için değerlendirmek için getirmeyi kullanabilirsiniz .

Örneğin Angular1'i indirmek için aşağıdakileri yazmanız gerekir:

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'da en iyi seçeneğiniz Geliştirici Araçları'ndaki Kaynaklar'ın altındaki Parçacıklar sekmesi olabilir.

Örneğin, yaklaşık: boş bir sayfaya kod yazmanıza ve çalıştırmanıza olanak tanır.

Daha fazla bilgi burada: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=tr

^^ mac'un üstündeki @ maciej-bukowski'nin cevabının bir devamı olarak, async / await'i destekleyen modern tarayıcılarda (ilkbahar 2017) aşağıdaki gibi yükleyebilirsiniz. Bu örnekte yük html2canvas kütüphanesini yüklüyoruz:

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

Parçacığı çalıştırır ve ardından tarayıcınızın konsolunu açarsanız, html2canvas () işlevinin tanımlandığını görmelisiniz.

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 betiği script-src "İçerik Güvenliği İlkesi" veya "güvensiz-değerlendirmeye 'izin verilmediği için" yüklenmediği takdirde, oldukça küçük modül enjektörünü dev-tools snippet'i olarak kullanmanızı öneririm, o zaman şu şekilde yükleyebilirsiniz:

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>

bu çözüm çalışır çünkü:

1. Kitaplığı xhr biçiminde yükler - CORS'nin konsoldan kullanılmasına izin verir ve script-src ilkesini önler.
2. Konsol / snippet'in bağlamında kalmanızı sağlayan senkronize xhr seçeneğini kullanır , böylece komut dosyasını değerlendirme iznine sahip olursunuz ve güvensiz bir değerlendirme olarak ele alınmazsınız.

Bu konsolu ko nakavt nesnesini yüklemek için kullanın

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

veya yerel olarak barındır

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

Tampermonkey'i yükleyin ve aşağıdaki UserScript'i, @matchbelirli sayfa URL'si (veya tüm sayfaların eşleşmesi ) içeren bir (veya daha fazla) ile ekleyin 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;

})();

Konsolda veya snippet'te kitaplığa ihtiyacınız olduğunda, belirli UserScript'i etkinleştirin ve yenileyin.

Bu çözüm ad alanı kirliliğini önler . Sayfadaki mevcut global değişkenlerin yanlışlıkla üzerine yazılmasını önlemek için özel ad alanlarını kullanabilirsiniz.