web-dev-qa-db-fra.com

Appeler une fonction Javascript depuis la console

Dans la console JavaScript de Chrome, comment appeler une fonction appartenant à un fichier .js inclus dans la page Web affichée?

javascriptfunctiongoogle-chrome-devtoolsdeveloper-tools
59
L3v3L

Si c'est à l'intérieur d'une fermeture, je suis à peu près sûr que vous ne pouvez pas.

Sinon, vous ne faites que functionName(); et appuyez sur Entrée.

60
Kevin Ennis

Un exemple d’endroit où la console retournera

//this will fail
$(document).ready(function () {
          myFunction(alert('doing something!'));
          //other stuff
}

Pour réussir, déplacez la fonction en dehors de la fonction de préparation de document

//this will work
myFunction(alert('doing something!'));
$(document).ready(function () {

          //other stuff
}

Puis dans la fenêtre de la console, tapez le nom de la fonction avec le '()' pour exécuter la fonction.

myFunction()

Il est également utile d’imprimer le corps de la fonction pour vous rappeler son rôle. Faites ceci en laissant le '()' du nom de la fonction

function myFunction(alert('doing something!'))

Bien sûr, si vous avez besoin que la fonction soit enregistrée après le chargement du document, vous ne pouvez pas le faire. Mais vous pourrez peut-être contourner ce problème.

21
Tony Deacon

C'est un fil plus ancien, mais je viens de chercher et de le trouver. J'utilise les outils de développement Web pour la première fois: principalement les outils de développement de Firefox (Firefox v.51), mais aussi les outils de développement Chrome (Chrome v.56)].

Je n’ai pas pu exécuter de fonctions à partir de la console Developer Tools, mais j’ai trouvé ce résultat.

https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

et j'ai pu ajouter du code au bloc-notes, mettre en surbrillance et exécuter une fonction, transmise à la console selon la capture d'écran présentée.

J'ai également ajouté l'extension Chrome "Scratch JS": il semblerait qu'elle offre les mêmes fonctionnalités que le Scratchpad dans les outils de développement de Firefox (capture d'écran ci-dessous).

https://chrome.google.com/webstore/detail/scratch-js/alploljligeomonipppgaahpkenfnfkn

Image 1 (Firefox): http://imgur.com/a/ofkOp

 enter image description here

Image 2 (Chrome): http://imgur.com/a/dLnRX

 enter image description here

5
Victoria Stuart

vous pouvez l'invoquer à l'aide de window.function_name () ou directement function_name ()

1
naresh

Je viens de découvrir ce problème. J'ai pu contourner le problème en utilisant l'indirection. Dans chaque module, définissez une fonction, appelons-la indirect:

function indirect(js) { return eval(js); }

Avec cette fonction dans chaque module, vous pouvez ensuite exécuter n'importe quel code dans son contexte.

Par exemple. si vous aviez cette importation dans votre module:

import { imported_fn } from "./import.js";

Vous pouvez ensuite obtenir les résultats de l'appel de imported_fn à partir de la console en procédant comme suit:

indirect("imported_fn()");

Ma première pensée a été d’utiliser eval, mais cela ne fonctionne pas. Mon hypothèse est que l'appel de eval depuis la console reste dans le contexte de la console et que nous devons exécuter dans le contexte du module.

0
Adrian