Cómo utilizar FIDDLER2 para depurar directamente JavaScript y CSS de páginas en línea

Como ingeniero front-end, además de desarrollar nuevos proyectos, otra tarea importante es realizar el mantenimiento diario de los sitios web online. Una situación típica es que se produce un error en una página del sitio web y debe solucionarse con urgencia. Un método simple y tradicional es guardar la página como un archivo html local, luego buscar como loco y corregir el error, luego cargar el js y css modificado en el sitio web en línea y verificar si el error se ha solucionado.

El método anterior es suficientemente bueno para páginas simples. Pero para páginas ligeramente complejas, el guardado de IE a menudo no mantiene la fidelidad. Si la página involucra Ajax y otros errores, el guardado local será más difícil de depurar. Una forma muy natural en este momento es iniciar el entorno de desarrollo y depurarlo ahora como lo desarrolló entonces. Esto definitivamente resolverá el problema, pero requerirá movilizar muchos recursos, incluidos ingenieros de desarrollo de back-end e ingenieros de desarrollo de front-end. Para un equipo pequeño, puede ser factible, pero para un equipo grande, un movimiento tan grande no será posible hasta el final. Entonces, ¿qué debemos hacer? Primero, veamos una herramienta:

Existe una herramienta famosa en el desarrollo web, es decir, Fiddler: Fiddler. Fiddler es un proxy de depuración http que registra todo el tráfico http entre su computadora e Internet. Fiddler te permite inspeccionar todo el tráfico http, establecer puntos de interrupción y Fiddle (Fiddle significa "modificación sin sentido", lo cual es bastante gracioso). Fiddle (Fiddle significa modificación en inglés, que expresa con mucho humor el uso de Fiddler) todos los datos "dentro y fuera" (refiriéndose a cookies, html, js, css y otros datos). Oye, según la introducción anterior, ¿hueles algún tipo de solución? ¡Fiddler nos permite jugar con todos los datos "dentro y fuera"! Cuando queremos depurar un error de una página en línea, primero podemos analizar qué archivos lo están causando, encontrar estos archivos sospechosos y descargarlos localmente, y luego usar Fiddler para manipular la solicitud en línea en el archivo local correspondiente. De esta forma podemos modificar estos archivos sospechosos a nuestro gusto y actualizar directamente la página online para ver el efecto sin tener que considerar molestos problemas ambientales, todo es de alta fidelidad.

Eso es lo que pensamos, pero te voy a poner un ejemplo.

Antes de dar un ejemplo, instale Fiddler primero (no entraré en detalles sobre cómo descargarlo e instalarlo, solo siga las instrucciones a continuación). Una vez completada la instalación, el icono de Fiddler2 aparecerá en la barra de herramientas de IE. Haga clic para iniciar Fiddler. Después del inicio, acceda a cualquier sitio web a través de IE y todos los datos http entrantes y salientes se mostrarán en Fiddler. Pero espera, ¿por qué sigue apareciendo IE? Aunque puede depurar CSS y JS en IE a través de la barra de herramientas para desarrolladores de IE y Companion.JS, Firebug nos echa a perder y siempre esperamos depurar problemas solucionables en Firefox en lugar de a través de IE. Para estar a la altura de nuestras buenas expectativas, de acuerdo con las instrucciones oficiales de Fiddler, solo necesitamos realizar las siguientes operaciones:

Primero, descargue el archivo que se va a depurar localmente, inicie Fiddler y en AutoResponder columna Marque Habilitar y luego agregue reglas de reemplazo:

Después de agregar las dos reglas que se muestran arriba, actualice la página y los dos archivos JS se obtendrán localmente. A continuación, utilice su editor de texto favorito para depurar tanto como lo haría durante el desarrollo. Después de resolver el error, comprima y cargue el archivo js correspondiente, notifique al desarrollador backend para que cambie la marca de tiempo del archivo js en la máquina virtual y luego espere su lanzamiento.

CSS también se depura de la misma manera, por lo que no entraré en detalles aquí. No entraré en detalles sobre métodos similares utilizados en Firefox, Safari y Opera.

Otras habilidades estrechamente relacionadas con el desarrollo y la depuración de aplicaciones para el usuario:

2. Utilice DIFF para comparar las estadísticas de los paquetes http;

3. filtrar información. Por ejemplo, deshabilite JS, establezca puntos de interrupción, etc.

4. Utilice bpu + checker para modificar dinámicamente la respuesta. Por ejemplo, es muy útil modificar los fragmentos de código JS en la página.

5. Utilice Request Builder para probar la solicitud. Puede ser muy conveniente para probar código ajax (desafortunadamente no hay soporte para puntos de interrupción).

6. Utilice Estadísticas + Línea de tiempo + neXpert para ver el rendimiento y otras estadísticas para analizar los motivos de la carga lenta de la página.

7. Utilice reglas personalizadas (CustomRules) para personalizar configuraciones y comandos. Por ejemplo, si cambia el valor de var m_DisableCaching: boolean = false a verdadero, puede desactivar el almacenamiento en caché de forma predeterminada. También puedes personalizar comandos y más.

8. Desarrolla tus propias extensiones. Consulte Ampliación de Fiddler con código .NET.