Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

Herramientas de desarrollo de Chrome: JavaScript y rendimiento

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

En esta tercera parte de nuestra serie de herramientas para desarrolladores de Chrome, revisaremos cómo modificar y depurar JavaScript. La optimización es una parte importante del proceso de desarrollo, especialmente para aplicaciones de rendimiento crítico. También discutiremos técnicas para identificar potenciales cuellos de botella en nuestro código.

Al igual que en los dos artículos anteriores, me centraré en las características encontradas en la versión de Chrome Canary (versión 26.0, al momento de escribir esto). Cubriré los paneles Fuentes y Línea de tiempo.


Panel de Fuentes

El Panel de Fuentes es el lugar de partida para la depuración de JavaScript. Este panel, junto con el Panel de la Consola, lo convierte en una herramienta extremadamente poderosa. Es una interfaz de apuntar y hacer clic que te permite pausar la ejecución de JavaScript e inspeccionar todas las variables y objetos en el alcance actual.

The Sources panel
  1. El Panel de Fuentes. Si no ves tantos scripts como esperabas, actualiza la página con el panel Sources abierto.
  2. Este panel puede estar oculto, oculto automáticamente o fijo. Haz clic en el ícono pequeño a la derecha de 'Guiones de contenido' para alternar entre estos estados. Este panel puede redimensionarse.
  3. La pestaña Fuentes dentro del panel lateral izquierdo; es probable que tengas esta pestaña abierta la mayor parte del tiempo. Los recursos que enumera están separados por un subdominio, y puedes esperar ver CSS, JavaScript y HTML dentro de la pestaña.
  4. Puede que te resulte útil editar tu CSS y JavaScript en Developer Tools.

  5. La pestaña Scripts de contenido (no activa en la captura de pantalla) puede mostrar al principio muchos scripts con nombres extraños. De hecho, estas son extensiones de Chrome que se cargaron en la página. Esto es útil para depurar extensiones reales. De lo contrario, puedes evitar verlos abriendo tu página en una ventana de incógnito; la mayoría de las extensiones están deshabilitadas de forma predeterminada en el modo incógnito.
  6. El panel de contenido principal muestra los contenidos del script seleccionado. Seleccionar múltiples scripts crea una interfaz con pestañas similar a un IDE.
  7. Este panel contiene subpaneles que proporcionan útiles utilidades de depuración de JavaScript. En la parte superior del panel están los iconos para recorrer tu código.
  8. Watch Expressions hace exactamente eso, 'observa' las expresiones que has escrito. Si deseas saber el valor de la palabra clave this en las distintas etapas de un programa JavaScript, puedes ver la palabra clave this para ver sus diferentes valores a lo largo del tiempo. Haz clic en el botón Agregar para agregar una expresión, y si una expresión no se actualiza, presiona el pequeño botón Actualizar al lado del botón Agregar.
  9. XHR Breakpoints nos permite detener la ejecución de código JavaScript al realizar una solicitud de Ajax. Obtenemos aún más control sobre este comportamiento al proporcionar un valor en el campo 'Romper cuando la URL contiene', que aparece cuando presionas el botón Agregar. Al no proporcionar ningún valor, el depurador se rompe ante cualquier solicitud de XHR.
  10. Los puntos de interrupción del receptor de eventos te permiten establecer puntos de interrupción para eventos específicos. La captura de pantalla solo muestra las categorías de nivel superior. Por ejemplo, 'Timer' tiene los siguientes puntos de corte de escucha de eventos individuales: 'Establecer temporizador', 'Borrar temporizador' y 'Temporizador disparado'.
  11. Si encuentras un código minificado, seleccionando 'Pretty Print' actúa como un embellecedor de JavaScript.

Pestaña Fuentes

La pestaña de fuentes enumera los recursos agrupados por el subdominio desde el que se sirven. Cada recurso tiene un menú contextual (que se muestra al hacer clic con el botón derecho en el recurso) con un conjunto de opciones comunes. Sin embargo, una opción es muy interesante: Modificaciones locales, que veremos más adelante.

Nota: Puedes ver la lista de archivos de origen como una lista plana (es decir, no incluida en las carpetas agrupadas por subdominio) al desmarcar 'Mostrar carpetas' en Configuración > General.

Sources Tab

Al hacer clic en un recurso, se muestra en el panel de contenido principal. No te olvides de habilitar el modo de impresión bonita para recursos minificados, ya que algunos minificadores cambian el nombre de las variables para hacer que el código sea más difícil de entender. Con suerte, más desarrolladores generarán mapas fuente en el futuro, lo que facilitará el trabajo con código reducido.

Puedes editar la mayoría de los archivos en el panel de contenido principal, y esos cambios se reflejan inmediatamente en el navegador. Después de realizar cambios en un recurso, el menú contextual te ofrece la posibilidad de Guardar (aunque no permanentemente) o Guardar como (guarda una nueva versión localmente). Cuando trabajes con tus propios sitios locales, puedes que te resulte útil editar tus CSS y JavaScript en las Herramientas de desarrollo en lugar de tu IDE. Guardar modificaciones, en este caso, modifica el archivo fuente real. Las herramientas como Tincr o chrome-devtools-autosave pueden ayudar a automatizar este flujo de trabajo.

El menú contextual del recurso también proporciona la opción de revelar el recurso en el panel de red.

Sources Tab

Revisiones

Una revisión es un nuevo punto dentro de la vida de un recurso, sobre el cual ha sido modificado. La edición y el guardado del código del panel de orígenes crea una nueva revisión, y los cambios de estilo realizados dentro del panel de Elementos activan una nueva revisión.

Después de realizar algunos cambios, puedes hacer clic derecho en el recurso y seleccionar Modificaciones locales. Esto abre un nuevo panel Modificaciones locales que contiene una diferencia de los archivos originales y editados. Dentro del panel Modificaciones locales, podemos revertir un archivo fuente modificado en su totalidad (útil para cuando hayas realizado una gran cantidad de cambios no deseados) haciendo clic en "revertir" al lado del nombre del archivo.

Panel de contenido principal

Developer Tools tiene la amabilidad de alertarnos sobre posibles optimizaciones.

El panel de contenido principal tiene muchas de las funciones que encontrarás en los editores de código básicos: números de línea, resaltado de sintaxis, la capacidad de crear pestañas y la funcionalidad 'deshacer'. Si bien no coincide con un IDE completo, no está mal para la edición rápida.

Puntos de quiebre

Los puntos de interrupción nos permiten detener la ejecución del código JavaScript e inspeccionar el entorno actual. Por ejemplo: Supongamos que tenemos un bucle for simple que empuja los elementos hacia una matriz. Nuestro objetivo es comprender con precisión el funcionamiento interno dentro de cada iteración del ciclo. Podríamos usar console.log muy fácilmente para registrar las variables que queremos inspeccionar. Si bien esta técnica te daría los resultados deseados, ciertamente no es la técnica de depuración más eficiente. Mediante el uso de puntos de quiebre, podemos pausar la ejecución del código mientras se está dentro del bucle for e inspeccionar todas las variables dentro del alcance del contexto.

Para agregar un punto de quiebre, haz clic en el número de línea; también puedes hacer clic derecho en el número de línea y elegir la opción "Agregar punto de interrupción". Después de establecer tu punto de interrupción, actualiza la página y observa que los puntos de interrupción persisten entre cargas de página. Si el código aún no se ha ejecutado (por ejemplo, el punto de interrupción se estableció dentro de un controlador de eventos de clic), entonces puedes iniciar la ejecución del código sin una actualización de página.

Puedes codificar un punto de interrupción en tu código utilizando la declaración debugger; en tu código. Developer Tools (y la mayoría de los depuradores de JavaScript) reconoce esto como un punto de interrupción.

Al llegar a un punto de quiebre, la página se torna gris y la línea de código se resalta en azul. En este punto, podemos presionar la tecla Escape para mostrar el panel de la consola. Lo que es interesante es que el código escrito y ejecutado dentro de la consola (mientras está en pausa en un punto de interrupción) en realidad se ejecuta en el contexto actualmente en pausa. Típicamente, la palabra clave this se refiere al objeto de ventana global window; mientras que ver this en un controlador de evento de clic muestra el valor como el destino del evento (un elemento).

En la captura de pantalla anterior, la parte gris es el documento en sí, y Developer Tools resaltó la línea actual de JavaScript. En la consola, verás los resultados de inspeccionar algunas variables. Y a la derecha del panel de contenido está el panel "Variables de alcance", donde puedes inspeccionar todas las variables y objetos en el alcance actual.

Puntos de interrupción condicionales

Los puntos de interrupción condicionales te permiten interrumpir cuando una determinada condición es verdadera.

En el panel lateral derecho del panel Orígenes, verás la pestaña Puntos de interrupción XHR. Haz clic en 'Agregar punto de interrupción XHR' en tu sitio favorito habilitado para Ajax. Dejando el campo 'contiene URL' saltos vacíos en cualquier solicitud de XHR.

ajax breakpoints

Esto presenta a los desarrolladores oportunidades nuevas y poderosas. Podemos navegar a un sitio que no hemos creado, o que no tuvo ninguna participación, y simplemente comenzar a depurar el código en función de ciertos eventos y criterios. Así que detenerse en las solicitudes de Ajax es bueno, pero ¿qué otros eventos podemos romper?

Puntos de interrupción del receptor del evento

El panel de orígenes tiene una interfaz de apuntar y hacer clic para establecer puntos de interrupción que coinciden con determinados receptores de eventos. Ten en cuenta que interrumpir un evento en particular solo funciona cuando la página en cuestión está recibiendo ese evento. Si rompemos en el evento Control > Resize, tener un código como el siguiente asegura que el código se rompe cuando el evento se dispara:

event listener breakpoints

Entonces, ¿cuándo es útil romper eventos particulares?

Los puntos de interrupción persisten entre cargas de página.

  • Cuando ejecutas el nuevo juego HTML5, y deseas saber qué está pasando en tu ciclo principal de juego. Intentar configurar el Marco de Animación de Solicitud y los detectores de eventos del Temporizador y revisar lo que sucede en cada evento.
  • Ese nuevo plugin responsivo de JavaScript que establece muy bien la página sobre el cambio de tamaño de una ventana parece bastante genial. Pero como desarrolladores, queremos saber qué hace el código cuando cambiamos el tamaño de la ventana. Intenta configurar el control > Cambiar tamaño del punto de corte del detector de eventos, y puedes hacerlo. Nota: Es muy probable que tengas que pasar por mucho código de la biblioteca. Pruébalo en la versión jQuery del plugin de mampostería, y observas cómo pasar por el código en un punto de corte de cambio de tamaño te lleva a través de muchas de las partes internas de jQuery.
  • Muchos sitios web, incluido GMail, le permiten al usuario pegar contenido. El punto de corte Portapapeles > Pegar sería útil en este caso.
  • Otras opciones útiles incluyen: envío de formularios, copia de datos, eventos de mutación DOM, orientación del dispositivo, pulsaciones de teclas, solicitudes Ajax, eventos del mouse (al pasar el ratón, mover, hacer clic en etc.), setInterval, touchstarts y más.

Puntos de interrupción DOM

La pestaña Puntos de interrupción DOM muestra puntos de interrupción para el DOM. Una forma simple de ver esto en acción es encontrar un elemento que, por ejemplo, al hacer clic tenga su propiedad className modificada. Ubica el elemento en el panel Elementos, haz clic con el botón derecho y ve a Interrumpir > Modificaciones de atributos. El código ahora se romperá cuando cambien los valores de los atributos de ese elemento.

El controlador de eventos onclick anterior cuenta como una modificación de atributo, que presenta algo similar a esto:

Otras opciones incluyen:

  • Las modificaciones de subárboles ocurren cuando se inserta o elimina cualquier nodo en el árbol.
  • Las modificaciones de Atributos ocurren cuando se cambia el atributo de un elemento.
  • La eliminación de nodos se dispara al eliminar un elemento; por ejemplo: element.remove().

Nota: Chrome parece haber implementado el método remove(). Algunos navegadores no son compatibles con este método; por lo tanto, será necesario usar removeChild() en su lugar.


Panel de línea de tiempo

El panel Línea de tiempo es donde investigas los problemas de rendimiento de tu aplicación web. El propósito principal del panel Timeline es (en el momento de redactar este documento) para ver información, a diferencia de otros paneles que te permiten realizar acciones destructivas en la página.

Los tiempos que puede utilizar en el panel Línea de tiempo incluyen:

  • Investigar el rendimiento de desplazamiento de tu página.
  • Intentar mejorar el FPS de tu animación.
  • Creación de páginas web móviles que probablemente se vean en una variedad de dispositivos antiguos y nuevos.
  • ¡Haciendo la web libre de chatarra!
The timeline panel
  1. Estos tres elementos (Eventos, Marcos y Memoria) presentan diferentes vistas, cada una de las cuales ilustra varias piezas de información relacionada con el rendimiento.
  2. En esta vista de marcos, cada barra representa un marco procesado por el navegador. Cuanto más "completa" sea cada barra vertical, peor será el rendimiento, y las partes de color en la barra se explican en la leyenda en la parte inferior del panel Línea de tiempo.
  3. Puedes codificar un punto de interrupción en tu código utilizando la declaración debugger; en tu código.

  4. Un popover para registros individuales, que detalla el tiempo que un registro tardó en ejecutarse. El popover, en algunos casos, enlazará con la línea de código que provocó la ejecución del registro (es más probable que esto ocurra con los registros basados en script).
  5. La lista de registros. Algunos registros son activados por nuestro código; otros registros pueden ser causados por las acciones del usuario. Por ejemplo, desplazarse por la página provoca un evento 'Paint'.
  6. Cada registro tiene una fila correspondiente que ilustra el tiempo que tomó completarse. Como se muestra en la captura de pantalla, puedes abrir algunas barras haciendo clic en la flecha desplegable.
  7. Opciones de filtrado que dictan qué registros mostrar. Todos los registros se muestran por defecto. Si estás investigando un tipo particular de problema de rendimiento, puedes limpiar los registros grabados utilizando las opciones de filtrado.
  8. De forma predeterminada, todos los registros se muestran independientemente de cuánto tiempo tardaron en completarse. Si deseas pescar esos registros inusualmente largos, cambia de 'Todos' a una de las opciones predefinidas (como 15 ms).
  9. Esto comienza a grabar (al igual que en el panel de red). Ten cuidado de dejarlo grabar durante un largo período de tiempo; ¡serás bombardeado con datos! Al mirar problemas de desplazamiento, toco el registro, desplazo la página durante 2 segundos y luego dejo de grabar.

Grabación

recording icon

En la Parte 2, puedes recordar cómo comenzamos a registrar la información de red antes de la página cargada para capturar tantas solicitudes de red como sea posible. No hacemos eso en el panel Línea de tiempo; es mejor que grabemos eventos cortos y específicos. No necesariamente tenemos que *hacer* nada. Podríamos dejarlo grabar para ver qué sucede cuando el usuario está inactivo, o si algún cronómetro se puede estar ejecutando en segundo plano.

Las pestañas Eventos, Marcos y Memoria se completan durante la grabación; por lo tanto, asegúrate de revisarlos para encontrar los datos que necesitas. La sección de Memoria puede ayudarte a detectar posibles fugas de memoria.

Registros en la pestaña Marcos

Los registros se muestran durante y después de las grabaciones. Se captura una buena cantidad de datos dentro de los registros, como se muestra en la siguiente imagen.

Esta captura de pantalla muestra algunas solicitudes de red (azul) y algunos 'recalcular estilos' (violeta). Los recálculos de estilo pueden ocurrir por una serie de razones. Los registros amarillos son secuencias de comandos y el verde representa la representación de páginas.

Al hacer clic o pasar el mouse sobre un registro, se muestra más información. Por ejemplo, al pasar el cursor sobre un registro de "pintura" puede mostrarte la parte de la página que se pintó.

tips in the timeline panel

Las herramientas de desarrollador a veces vinculan un registro a otro panel. Por ejemplo, el enlace de una imagen te dirige al panel de Recursos con esa imagen en foco, y un registro XHR puede vincularse a la entrada correspondiente en el panel de Red.

image preview in the popover of the timeline panel

Developer Tools tiene la amabilidad de alertarnos sobre posibles optimizaciones. Observa el pequeño ícono de notificación a la derecha de algunos de los registros en la siguiente imagen. Si se desvaneció, tendrás que desglosar para localizar el registro real que contiene la información útil.

tips in the timeline panel

Los Popovers a veces contienen un enlace a la línea de código que hizo que se muestre el registro. Pero una palabra de advertencia: La impresión bonita no siempre ayudará, especialmente cuando se mira el código de un tercero. Una opción es establecer un punto de interrupción en la línea a la que te llevan. Una vez que el depurador se haya detenido, puedes ver los contenidos de la variable para comprender mejor la intención del código.

Being taken to the line of code from timeline to source panel

Filtración

Si eres como yo, siempre acabas capturando más datos de los que necesitas, pero puedes formar una selección en las barras verticales (marcos) que muestra solo los registros correspondientes a la porción seleccionada.

forming a selection in the timeline panel

Si solo te importan los registros largos, configura un filtro para que solo muestre esos registros largos. Puedes hacer esto en la parte inferior del panel de línea de tiempo.

filtering by length of time

Si el desplazamiento no se siente tan bien como debería, considera excluir 'Cargando' (por ejemplo, registros de red). Dicho eso, si sabes que las solicitudes de red se utilizan para cargar datos en una página que los usuarios utilizan para desplazarse infinitamente, querrás mantener marcada la opción "Cargando".

No apliques el filtrado solo porque los datos parecen demasiado intensos al principio. Tómate el tiempo para comprender e investigar qué te muestran las herramientas de desarrollo. Querrás utilizar la línea de tiempo para confirmar dónde se producen las disminuciones y procurar que las barras verticales estén lo más vacías posible (espacio en blanco/tiempo de inactividad).


Continúa leyendo

El panel de contenido principal tiene muchas de las funciones que encontrarás en los editores de código básico.

¿Conoces algún otro recurso útil? ¡Menciónalo en los comentarios!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.