web-dev-qa-db-fra.com

Inclure le fichier JavaScript dans la console Chrome

Existe-t-il un moyen plus simple (peut-être natif?) D’inclure un fichier de script externe dans le navigateur Google Chrome?

Actuellement, je le fais comme ça:

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

appendChild() est une méthode plus native:

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

Utilisez-vous du framework AJAX? En utilisant jQuery ce serait:

$.getScript('script.js');

Si vous n'utilisez aucun framework, voyez la réponse de Harmen.

(Peut-être que cela ne vaut pas la peine d’utiliser jQuery pour faire cette chose simple ( ou peut-être est-ce que c’est le cas ), mais si vous l’avez déjà chargé, vous pouvez aussi bien l’utiliser. J'ai déjà vu des sites Web Par exemple, jQuery est chargé avec Bootstrap mais utilise toujours l'API DOM d'une manière qui n'est pas toujours portable, au lieu d'utiliser le jQuery déjà chargé pour cela, et beaucoup de personnes ne sont pas conscientes du fait que même getElementById() ne ne fonctionne pas systématiquement sur tous les navigateurs - voir cette réponse pour plus de détails.)

MISE À JOUR:

Cela fait des années que j'ai écrit cette réponse et je pense que cela vaut la peine de souligner que vous pouvez utiliser aujourd'hui:

charger dynamiquement des scripts. Celles-ci peuvent être pertinentes pour les personnes qui lisent cette question.

Voir aussi: L'exposé courant 2014 de Guy Bedford: Workflows pratiques pour les modules ES6 .

84
rsp

Dans les navigateurs modernes, vous pouvez utiliser fetch pour télécharger la ressource ( Mozilla docs ), puis eval pour l'exécuter.

Par exemple, pour télécharger Angular1, vous devez taper:

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

En chrome, votre meilleure option pourrait être l'onglet Extraits de code sous Sources dans les outils de développement.

Cela vous permettra d’écrire et d’exécuter du code, par exemple dans une page about: blank.

Plus d'informations ici: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=fr

14
atirado

Pour donner suite à la réponse de @ maciej-bukowski ci-dessus ^^^ , à partir de maintenant (printemps 2017), la prise en charge async/wait vous permet de charger comme suit. Dans cet exemple, nous chargeons la bibliothèque de chargement 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);

Si vous exécutez l'extrait puis ouvrez la console de votre navigateur, la fonction html2canvas () devrait maintenant être définie.

13
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 啸

J'utilise cela pour charger ko objet knockout dans la console

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

ou héberger localement

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