Encuentre 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 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. Seguro que grep resuelve esto, pero en el navegador sería mucho mejor. Quiero decir, el navegador tiene que saber esto, así que ¿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 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 falta?
Y si no es así, supongo que esto provendría de WebKit, pero no pude encontrar nada para las solicitudes de funciones de la herramienta de desarrollador o Bugzilla de WebKit .
Digamos que estamos buscando una función llamada foo:
- (abra las herramientas de desarrollo de Chrome),
- Windows: ctrl+ shift+ Fo macOS: cmd+ optn+ F. Esto abre una ventana para buscar en todos los scripts.
- marque la casilla de verificación "Expresión regular",
- buscar
foo\s*=\s*function(buscafoo = functioncon cualquier número de espacios entre esos tres tokens), - presione sobre un resultado devuelto.
Otra variante para la definición de funciones es function\s*foo\s*\(con function foo(cualquier número de espacios entre esos tres tokens.
Esto llegó a Chrome el 26 de agosto de 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 está definida 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 del prototipo de esta manera! ¡¡¡CDT definitivamente es genial!!!
¡Espero que a todos les resulte ú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 [native code]en lugar del código fuente.
EDITAR : esto implica que la función se ha definido dentro del alcance actual.
Actualización de 2016 : en Chrome versión 51.0.2704.103
Hay un Go to memberatajo (enumerado 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.
