Calling a Javascript Function from Console

Question

In Chrome's JavaScript console, how do I call a function that belongs to a .js file included in the webpage I am viewing?

Valval

Answer 1

If it's inside a closure, i'm pretty sure you can't.

Otherwise you just do functionName(); and hit return.

Marlinemarlinespike

not for me: functionName(); is ok in firebug shows 'undefined' in chrome developer tools. – Yuonneyup

undefined is the return value of the function. Chrome's dev tools automatically print the return of any function invoked from the console. If it wasn't working, you'd see ReferenceError: functionName is not defined in red. – Marlinemarlinespike

Nobody could become confused by this behaviour, right? :) – Comminate

@KevinEnnis I thought you were wrong, and then I saw that my css was hiding my change that my js was making. Good catch. – Lindeman

Answer 2

An example of where the console will return ReferenceError is putting a function inside a JQuery document ready function

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

To succeed move the function outside the document ready function

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

Then in the console window, type the function name with the '()' to execute the function

myFunction()

Also of use is being able to print out the function body to remind yourself what the function does. Do this by leaving off the '()' from the function name

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

Of course if you need the function to be registered after the document is loaded then you couldn't do this. But you might be able to work around that.

Tristram

Thanks a lot Tony. Perfect answer – Corymb

Answer 3

This is an older thread, but I just searched and found it. I am new to using Web Developer Tools: primarily Firefox Developer Tools (Firefox v.51), but also Chrome DevTools (Chrome v.56)].

I wasn't able to run functions from the Developer Tools console, but I then found this

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

and I was able to add code to the Scratchpad, highlight and run a function, outputted to console per the attched screenshot.

I also added the Chrome "Scratch JS" extension: it looks like it provides the same functionality as the Scratchpad in Firefox Developer Tools (screenshot below).

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

Image 1 (Firefox): https://i.sstatic.net/bkS7W.jpg

Image 2 (Chrome): https://i.sstatic.net/cndGC.jpg

Braddock

Answer 4

You can invoke it using

window.function_name()

or directly without window like

function_name()

Crumley

Answer 5

Basically, there are two cases here:

1. Your function is in global scope. In that case, simply open a console and call it yourFunction()
2. Your function is scoped inside some other function(s) and is not accessed globally. In that case, you can open a Sources tab, locate your .js file, place a breakpoint anywhere at the bottom of the outer function (you might need to refresh a page after that if the code have already been run) and call yourFunction() in console. Also, while at breakpoint you may do something like window.yourFuncRef = yourFunction in console, to be able to access it later at any time.

Marrs

I tried the 2nd option above, and it almost works, I added a line and placed a breakpoint, and when trying to call my function in the form of var = function, I got an error "Uncaught ReferenceError: showBuy is not defined", but the console itself showed me the function, I just had to tab+enter – Gazehound

If you get undefined, this could mean you have placed a breakpoint before the actual definition of a function. maybe you can give more details about how the function is defined and where you set a breakpoint? – Marrs

Answer 6

I just discovered this issue. I was able to get around it by using indirection. In each module define a function, lets call it indirect:

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

With that function in each module, you can then execute any code in the context of it.

E.g. if you had this import in your module:

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

You could then get the results of calling imported_fn from the console by doing this:

indirect("imported_fn()");

Using eval was my first thought, but it doesn't work. My hypothesis is that calling eval from the console remains in the context of console, and we need to execute in the context of the module.

Gaullist

Answer 7

I think your problem could be that you're importing the ".js" file as a module.

<script type="module" src="example.js"></script>

I had the same problem and deleting 'type="module"' attribute worked for me.

<script src="example.js"></script>

Piegari