habilitar - instalar javascript

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

Question

Las herramientas de desarrollo de Chrome son una roca, pero una cosa que no parecen tener (que pude 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, entonces ¿por qué no exponerlo? Lo que esperaba era algo como:

• Seleccione ''Inspeccionar elemento'' en la página, que resalta la línea en la pestaña Elementos
• Haga clic con el botón derecho en la línea y seleccione ''Ir a 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 me la estoy perdiendo?

Y si no es así, supongo que esto provendría de WebKit, pero no pude encontrar nada para las solicitudes de características de la Herramienta de Desarrollador o el Bugzilla de WebKit .

Answer 1

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

Answer 2

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

1. Seleccione la pestaña Fuentes .
2. En el panel Reloj, haga clic en + y escriba ventana.
3. Las referencias de sus 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.

Answer 3

Esto aterrizó en Chrome el 2012-08-26 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 desplazarme 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!

Answer 4

Otra forma de navegar a la ubicación de la definición de una función sería interrumpir el depurador en algún lugar donde pueda acceder a la función e ingresar el nombre completo de la función 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.

Answer 5

Puede imprimir la función evaluando su nombre en la consola, de esta manera

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

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

EDITAR : esto implica que la función ha sido definida dentro del alcance actual.

Answer 6

Actualización 2016 : en Chrome versión 51.0.2704.103

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

Ctrl + Mayús + O

o en OS X:

⌘ + shift + O

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

Answer 7

Digamos que estamos buscando una función llamada foo :

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

Otra variante para la definición de la función es function/s*foo/s*/( para la function foo( con cualquier número de espacios entre esas tres fichas).