10

If I know the name of a JavaScript function, or if I have a reference to a function (eg. in a callback) how can I find where that function is defined, when using the Firefox Quantum debugger.

In Firebug/Firefox debugger I used to be able to type the function name into the JS console, and it would print a little bit of info and I could click on that output and be taken to the function definition.

Now in Firefox Quantum if I click on the function name it expands in the console to show info about the function object.

enter image description here

The Chrome debugger still works the way Firebug/Firefox used to, but I end up needing to debug/test in both browsers.

stuporglue
  • 581
  • 1
  • 5
  • 12

2 Answers2

8

In your debugger tab hit ctrl + shift + f. This will open a search window where you can type in the funtion name. This way you will get every location the name appears. Now you just have to look out for a line like: function <name> () {

Or you type function <name> right away.

404_DisplayName
  • 124
  • 4
  • 10
    This will work for global level functions, but falls short for things like methods inside of objects, or for anonymous functions passed in a callback. – stuporglue Dec 05 '17 at 17:26
1

One roundabout trick you can use is to first dump the function definition to the console:

geometa_map_new_map_init.toString();

The output may look something like this:

function(coords, options) {
  // Some comment
  if(some_logic == true)
    do logic here
  else
    do other logic there
  // Here's a very specific comment
  var peculiar_name = 'some random string';
}

Notice that "geometa_map_new_map_init" does not appear in this possible definition as there are ways to define named functions other than the typical function <name> method. If any particular line looks unique enough, like "Here's a very specific comment" or "var peculiar_name" you can try searching for one of those lines in your source code. E.g., if you're in the base directory of your project on a linux machine you could run:

grep -l -R --exclude-dir=\.git "Here's a very specific comment" .|more

(The --exclude-dir part tells grep to not search the version control data in the .git directory, if one exists.)

If a file containing the line is found, open it up, search its contents, and you may find the function definition you're looking for, which might be defined in a way like:

geometa_map_new_map_init: function(coords, options) {
  // Some comment
  if(some_logic == true)
    do logic here
  else
    do other logic there
  // Here's a very specific comment
  var peculiar_name = 'some random string';
}

In this example, we discover that the function is actually defined as part of an object, hence the <name>: function syntax.

Aufgeschissener Kunde
  • 727
  • 5
  • 10