tablas - ¿Cómo puedo encontrar qué Javascript se está ejecutando en ciertos eventos?

title css

Question

Elegiré Chrome para este ejemplo, pero estoy abierto a una solución desde cualquier navegador.

Caso de uso: tengo un botón de actualización en mi sitio web que se usa para actualizar cantidades de artículos en un carrito de compras. Me gustaría permitir que un usuario ingrese un 0 y haga clic en actualizar para eliminar el elemento. El problema es que hay algunos oyentes en algunas funciones js que niegan la capacidad de ingresar un 0 y hacer clic en actualizar (después de hacer clic en actualizar queda la cantidad anterior).

Mi pregunta es, ¿qué herramienta de desarrollador puedo usar para encontrar qué función js se está ejecutando durante ese evento? No creo que el inspector de Chrome haga esto, y no estoy muy familiarizado con Firebug, pero tampoco pude encontrar la funcionalidad allí.

Siento que debería ser capaz de inspeccionar los disparos de js tal como hago con los estilos css. ¿Alguien está al tanto de una herramienta que pueda usar?

Answer 1

1. Abre tu página en Firefox con Firebug habilitado.
2. Vaya a la pestaña de la consola en firebug y haga clic en perfilado
3. introduzca 0 en el cuadro de texto y haga clic en el botón.
4. Deja de perfilar.
5. Podrá ver todas las funciones de javascript que se han ejecutado debido a sus acciones. Puede verlos uno por uno para averiguar qué método ha causado el daño.

Answer 2

Descargue Firebug para Mozilla Firefox , ábralo, haga clic en Net y actualice su sitio web. A continuación, puede ver qué archivos se cargan en la página.

Si desea verificar los errores y qué falla con una explicación, haga clic en la console y actualice la página una vez más. Verás los errores y en qué línea va mal.

Nota: en su console , puede decir hold o stop , para que el archivo js deje de cargarse. Y puedes editar el script haciendo clic en el script en Firebug. La depuración es simple, como dice en su página oficial https://getfirebug.com/javascript

Answer 3

He tenido que depurar algunos problemas de Javascript particularmente ocultos porque en mi trabajo. Conocer la profundidad completa de las herramientas de desarrollo como Chrome es definitivamente útil. Sin lugar a dudas, se necesita cierta creatividad para encontrar lugares que puedan estar causando el problema, pero algunos consejos:

Rastreando a los oyentes del evento

En la vista Elementos de Chrome, intente Inspeccionar un elemento (haga clic con el botón derecho, Inspeccionar); luego, en el lado derecho de la vista del desarrollador, desplácese hacia abajo hasta Event Listeners. Aquí puede ver qué archivos de código han conectado un evento. A menudo, esto solo lo llevará a un marco intermedio desde el código realmente tortuoso que está buscando, pero a veces le indicará la dirección correcta.

Atrapando una modificación de DOM

Muchos de los efectos no deseados que veo se deben a que algo cambia algún valor o atributo en la página que no quiero. Cuando esto suceda, puede hacer clic con el botón derecho en el elemento (debajo de la vista Elementos) y decir "Interrumpir en ..." y el escenario específico que está buscando. Cuando Chrome llega a un punto de interrupción, puede mirar hacia abajo en el seguimiento de pila hasta que encuentre algo reconocible que no deba llamarse.

EDITAR después de llegar a diez votos!

Atrapando una modificación de objeto JS

Si el cambio en el que está interesado es interno al código, no en la interfaz de usuario, las cosas se ponen más complicadas. Lo que significa este escenario es que sabes en algún lugar del código, algo increíblemente molesto, como lo que está sucediendo a continuación.

company.data.myObject.parameter = undefined;

En esta situación, sabes que myObject sigue siendo el mismo objeto, pero se está modificando, quizás sin querer. Para eso, a menudo inserto el siguiente bit de código, a veces solo a través de la consola del desarrollador en algún momento antes de que ocurra dicha modificación.

Object.defineProperty(company.data.myObject, ''parameter'', {
  set: (val) => {
    debugger;
  }
});

Esto incluye una función de flecha: solo está utilizando esto para la depuración y Chrome lo admite, así que también puede guardar pulsaciones de teclas. Lo que esto hará es congelar su depurador tan pronto como alguna línea de código intente modificar la propiedad " parameter " de myObject. No necesariamente tiene que tener una referencia global a la variable si puede ejecutar esta línea de código desde un punto de interrupción anterior que tendrá el objeto dado en los locales.

De lo contrario, si todo lo que estoy comenzando es el código HTML, y quiero vincularlo al código Javascript, a menudo solo buscaré características de identificación como elementos "id", y buscaré todos los archivos JS en mi directorio de desarrollo para eso. Normalmente, puedo llegar bastante rápido.

Answer 4

Ve a tu código. Si está utilizando jquery, habrá una función que se llamará con la clase o id de ese botón de actualización de particulat. O si está utilizando javascript, habrá una función llamada dentro de

Estas son dos formas de buscar la función que se llama. No hay ningún software que yo sepa.