Encuentra la definición de función de JavaScript en Chrome

Las herramientas de desarrollo de Chrome son geniales, pero una cosa que no parecen tener (que podría encontrar) es una forma de encontrar la definición de una función de JavaScript. Esto sería muy útil para mí porque estoy trabajando en un sitio que incluye muchos archivos JS externos. Claro que grep resuelve esto, pero en el navegador sería mucho mejor. Quiero decir, el navegador tiene que saber esto, ¿por qué no exponerlo? Lo que esperaba era algo como:

• Seleccione 'Inspeccionar elemento' de la página, que resalta la línea en la pestaña Elementos
• Haga clic derecho en la línea y seleccione 'Ir a la definición de función'
• El script correcto se carga en la pestaña Scripts y salta a la definición de la función

En primer lugar, ¿existe esta funcionalidad y simplemente me la estoy perdiendo?

Y si no es así, supongo que esto vendría de WebKit, pero no pude encontrar nada para las solicitudes de funciones de Developer Tool o el Bugzilla de WebKit .

Digamos que estamos buscando una función llamada foo:

1. (abra las herramientas de desarrollo de Chrome),
2. Windows: ctrl+ shift+ Fo macOS: cmd+ optn+ F. Esto abre una ventana para buscar en todos los scripts.
3. marque la casilla de verificación "Expresión regular",
4. buscar foo\s*=\s*function(busca foo = functioncon cualquier número de espacios entre esos tres tokens),
5. presione en un resultado devuelto.

Otra variante para la definición de funciones es function\s*foo\s*\(para function foo(cualquier número de espacios entre esos tres tokens.

Esto aterrizó en Chrome el 26-08-2012 No estoy seguro de la versión exacta, lo noté en Chrome 24.

Una captura de pantalla vale más que un millón de palabras:

Estoy inspeccionando un objeto con métodos en la consola. Al hacer clic en "Mostrar definición de función" me lleva al lugar en el código fuente donde se define la función. O simplemente puedo pasar el cursor sobre la function () {palabra para ver el cuerpo de la función en una información sobre herramientas. ¡Puedes inspeccionar fácilmente toda la cadena de prototipos de esta manera! CDT definitivamente rock !!!

¡Espero que todos lo encuentren útil!

Puede imprimir la función evaluando su nombre en la consola, así

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

esto no funcionará para las funciones integradas, solo se mostrarán en [native code]lugar del código fuente.

EDITAR : esto implica que la función se ha definido dentro del alcance actual.

Actualización de 2016 : en la versión 51.0.2704.103 de Chrome

Hay un Go to memberatajo (listado en settings > shortcut > Text Editor). Abra el archivo que contiene su función (en el sourcespanel de DevTools) y presione:

ctrl+ shift+O

o en OS X:

⌘+ shift+O

Esto permite enumerar y llegar a los miembros del archivo actual.

Otra forma de navegar a la ubicación de una definición de función sería interrumpir el depurador en algún lugar donde pueda acceder a la función e ingresar el nombre totalmente calificado de las funciones en la consola. Esto imprimirá la definición de la función en la consola y dará un enlace que al hacer clic abre la ubicación del script donde se define la función.

Los diferentes navegadores hacen esto de manera diferente.

1. Primero abra la ventana de la consola haciendo clic derecho en la página y seleccionando "Inspeccionar elemento", o presionando F12.

2. En la consola, escriba ...

   • Firefox

     functionName.toSource()

   • Cromo

     functionName

en la consola de Chrome:

debug(MyFunction)
MyFunction()

Creo que la forma más rápida de localizar una función global es simplemente:

1. Seleccionar fuentes pestaña .
2. En el panel Watch, haga clic en + y escriba window
3. Sus referencias de funciones globales se enumeran primero, alfabéticamente.
4. Haga clic derecho en la función que le interesa.
5. En el menú emergente, seleccione Mostrar definición de función .
6. El panel de código fuente cambia a esa definición de función.

En Google Chrome, la herramienta de inspección de elementos puede ver cualquier definición de función de Javascript.

1. Haga clic en la pestaña Fuentes. Luego seleccione la página de índice. Busca la función.

2. Seleccione la función, luego haga clic derecho en la función y seleccione "Evaluar el texto seleccionado en la consola".

Si ya está depurando, puede pasar el mouse sobre la función y la información sobre herramientas le permitirá navegar directamente a la definición de la función:

Lectura adicional :

• Chrome DevTools> Referencia de depuración de JavaScript

Tuve un problema similar para encontrar la fuente del método de un objeto. El nombre del objeto era myTreey su método era load. Puse un punto de interrupción en la línea a la que se llamó el método. Al volver a cargar la página, la ejecución se detuvo en ese punto. Luego, en la consola de DevTools, escribí el objeto junto con el nombre del método, es decir, myTree.loady presioné Enter. La definición del método se imprimió en la consola:

Además, haciendo clic derecho en la definición, puede ir a su definición en el código fuente: