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

Experiencia moderna de depuración: Parte 1

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Modern Debugging Experience.
Modern Debugging Experience: Part 2

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


En esta serie de tutoriales de dos partes, veremos cómo escribir y depurar código JavaScript utilizando herramientas modernas, como las DevTools de Chrome.

En la parte 1, obtendrás un vistazo introductorio a los distintos paneles en DevTools y para qué flujos de trabajo son adecuados. También habrá un enfoque en escribir y ejecutar código JavaScript a través del navegador en lugar de un editor de código.

1. ¿Qué son las herramientas de desarrollo del navegador?

Las Herramientas para desarrolladores son funciones proporcionadas por navegadores que contienen un conjunto de utilidades para inspeccionar, interactuar y depurar páginas web. Las herramientas de desarrollo de navegador generalmente se incluyen con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Opera e Internet Explorer. Este tutorial se centrará específicamente en la parte DevTools de Chrome Canary, pero es probable que todas las características enumeradas aquí sean parte de Chrome Stable pronto.

¿Qué puede ofrecer DevTools a un desarrollador de JavaScript?

La plataforma web abierta te permite hacer clic con el botón derecho en > Examinar elemento en cualquier página web y descubrir las partes internas, pero JavaScript siempre ha estado un poco fuera del alcance de CSS (hojas de estilo en cascada). Aunque DevTools está repleto de funciones relacionadas con el diseño de la página, también hay un montón de funcionalidades menos conocidas que te permiten ver, escribir y depurar JavaScript de diversas maneras, ya sea en tu propia página o en la de un tercero.

¿Por qué utilizar DevTools para tu flujo de trabajo de JavaScript?

Si eres un desarrollador web front-end, te recomendamos que al menos conozcas las utilidades de JavaScript que DevTools tiene para ofrecer. Las características de alto nivel incluyen:

  • Al menos dos paneles dedicados cuyos casos de uso se adaptan casi por completo a JavaScript
  • Un entorno de desarrollo que sea rápido de configurar, con un ciclo de retroalimentación rápido
  • Capacidades avanzadas de depuración con puntos de interrupción

2. Descripción general de DevTools

Esta sección cubrirá los elementos de la interfaz de usuario de DevTools, específicamente el Panel de Fuentes y el Panel de la Consola, ya que estos son los dos paneles que se utilizarán para el resto de este tutorial.

Interfaz del Panel de Fuentes

Sources panel interface

Toma nota de algunas características de diseño:

  • DevTools está en un estado desacoplado. Puedes preferir acoplar a la izquierda, abajo o a la derecha de la ventana principal.
  • El Panel de Fuentes en el Panel de Fuentes se selecciona en la barra lateral izquierda.
  • Los paneles en la barra lateral derecha están en un estado expandido.

El Panel de orígenes te proporciona un editor de código y admite resaltado de sintaxis para muchos formatos de archivo comunes, como HTML, CSS, JavaScript, CoffeeScript, LESS y Sass. El editor de código está presente dentro del panel principal. Directamente encima del panel principal puedes ver las pestañas correspondientes a tus archivos abiertos.

En el Panel de Fuentes dentro de la barra lateral izquierda, hay un árbol de archivos que generalmente muestra los recursos que haz cargado la página inspeccionada actualmente. Los recursos se agrupan por dominio, y las carpetas pueden estar en un estado expandido o colapsado. Si haces clic solo en un recurso, se abrirá en el editor de código.

La barra lateral derecha contiene controles para la depuración de JavaScript, y cada panel puede estar en un estado expandido o colapsado. Varios niveles de salida se muestran aquí cuando JavaScript está en pausa en un punto de interrupción.

Panel de consola

Console panel

El Panel de consola te permite ver el resultado producido por el registro de diagnóstico (como las instrucciones console.log), pero también para escribir y evaluar JavaScript dentro del contexto de la página actualmente inspeccionada. El Panel de consola admite tanto la API de consola como la API de línea de comando. Aquí hay algunas funciones expuestas por cada API, junto con una descripción de su salida.

API de consola

consolelog

consoleerror

Línea de comando API

command line API

Script

La parte superior del panel de la consola contiene algunos controles como se muestra a continuación.

Console panel
  • Ningún símbolo (círculo con una barra invertida) borra la consola. Esto es útil para cuando hay más mensajes de los deseados a la vista y deseas eliminarlos. También puedes usar el atajo Command-K para eliminarlos, o ejecutar la función clear(), que es parte de la API de línea de comandos.
  • El filtro abre una barra con controles de filtrado que incluye un cuadro de entrada. Si solo estás interesado en encontrar mensajes de error, selecciona la opción Filtro de errores. Alternativamente, ingresa una expresión regular para usar como filtro.
  • El menú Seleccionar (<marco superior>) proporciona opciones para los contextos de ejecución de JavaScript disponibles para cambiar. Úsalo cuando desees que se evalúe tu JavaScript en el contexto de un IFrame o una extensión de Chrome, por ejemplo.

El panel de la consola es uno de los pocos paneles que puedes superponer sobre otros paneles en DevTools (elementos, red, fuentes) para proporcionar un flujo de trabajo mejorado. Si te encuentras regularmente regresando al Panel de la Consola, abre el Cajón de la Consola presionando la tecla Escape.

3. Ver JavaScript usando DevTools

Esta sección se centrará en el uso de DevTools para ver los recursos de JavaScript que está usando un sitio. Antes de continuar, se recomienda desactivar la memoria caché del navegador a través de DevTools. Para hacerlo, ve a Configuración > General y habilita la casilla de verificación titulada Desactivar caché (mientras DevTools está abierta). Esto garantiza que siempre obtengas una versión nueva de un recurso.

Flujo de trabajo en sitios de terceros

Navega a HTML5Please.com, un sitio que explica la preparación de las características de la Plataforma web. Abre las herramientas de desarrollo con Command-Shift-I o seleccionando Inspeccionar elemento en el menú contextual de la página. Dirígete al Panel de Fuentes y toma nota de la estructura del árbol de archivos que se muestra en la barra lateral izquierda. No es extraño que los sitios web almacenen su JavaScript en carpetas como "js" o "scripts", por lo que ya sabes dónde buscar. Abre el archivo script.js en la carpeta js. Ten en cuenta algunas características del editor de código que pueden resultar útiles cuando visualizas o editas código JavaScript:

  • Resaltado de sintaxis completa
  • Número de línea y columna del cursor
  • Nueva pestaña correspondiente al archivo abierto
  • Ocurrencias de palabras mapeadas a la selección actual
  • Coincidencias
  • Ir a definición
go-to definition

Usa la función de definición de ir para encontrar o descubrir rápidamente métodos o funciones de JavaScript. Puedes abrir la ventana modal de definición de ir a través del atajo Command-Shift-P. Si conoces el nombre del método o función que estás buscando, escríbelo en el cuadro de búsqueda de definición de ir a; mientras escribes, los resultados se actualizarán en tiempo real. Cada resultado contiene el nombre del método de coincidencia (si hay uno) y el número de línea donde se define. Usa Enter para seleccionar un resultado de búsqueda, y luego aterriza en la línea de código donde se define la función.

Ahora abre modernizr-2.0.min.js en la carpeta js/libs. El hecho de que este archivo esté minimizado hace que sea más difícil de ver. Selecciona Pretty Print para que DevTools aplique un formato más intuitivo al archivo, utilizando saltos de línea e indentación. La característica de impresión bonita funciona tanto para CSS como para JavaScript.

Guarda el JavaScript externo en el sistema de archivos

Cada archivo JavaScript en el árbol de archivos tiene un menú contextual, así que ábrelo usando el botón derecho. Observa algunas opciones útiles para desconectar el archivo y usarlo más adelante.

  • Abrir el enlace en pestaña nueva: Usa esto si deseas inspeccionar más la información de red en una pestaña dedicada (a través del Panel de red).
  • Guardar como: Usa esto si deseas hacer una copia fuera de línea del archivo en tu sistema de archivos.
  • Copiar dirección de enlace: Usa esto si deseas compartir la URL en otro lugar.

Encuentra JavaScript en el Panel de red

El Panel de red, además de simplemente mostrarte qué recursos ha cargado una página, también mostrará otra información y datos.

  • Iniciador: Qué causó la descarga de un script
  • DOMContentLoaded (azul) y Cargar eventos (rojo): Una representación visual basada en línea de tiempo de cuando estos eventos disparan
  • Tamaño: El tamaño del recurso, incluido el tamaño Gzip

Utilizando HTML5Please.com como un sitio web de ejemplo, sigue los pasos a continuación:

  1. Navega hasta el Panel de red y borra los registros.
  2. Recarga la página.
  3. Filtra los registros de JavaScript seleccionando el filtro Scripts.

El primer script, modernizr-2.0.min.js, tiene el valor de html5please.com/:17 para el iniciador. Esto sugiere que fue un recurso HTML que inició la descarga del script (en lugar de un gestor de scripts, por ejemplo). Haz clic en el iniciador y te llevará a la línea de código en el Panel de Fuentes que hace referencia al archivo:

En el caso de que una secuencia de comandos se inserte dinámicamente (con un gestor de secuencia de comandos por ejemplo), la columna de iniciador en el Panel de red puedes proporcionar una pila de llamadas de JavaScript relacionada con las llamadas que ocurrieron hasta el punto donde la secuencia de comandos se insertó dinámicamente en el DOM.

Initiator column in Network Panel

Puedes hacer clic en cada llamada dentro de una pila de llamadas para navegar a la parte relevante del código en el Panel de Fuentes.

Code in the Sources Panel

4. Escribir JavaScript usando DevTools

En la sección "Visualización de JavaScript usando DevTools", expliqué cómo ver información, metadatos y código fuente en recursos de JavaScript. Esta sección examinará las formas en que puedes escribir JavaScript usando DevTools.

Panel de consola

Usa el Panel de consola para escribir líneas rápidas de JavaScript rápidas con resultados inmediatos. JavaScript se ejecuta con el contexto de la página actualmente inspeccionada. Ejecuta algunos JavaScript en el panel de la consola presionando Enter luego de ingresar algún código.

Consulta Console API y Command Line API para obtener una lista de métodos y funciones disponibles.

Consejos

Si bien el panel de la consola es relativamente simple, hay algunos consejos pequeños para mejorar tu flujo de trabajo:

  • Usa Shift-Enter para una nueva línea: esto te permite escribir código de varias líneas.
  • Ejecuta keys(window) para detectar variables globales en la página actual.
  • Usa el helper $_ para recuperar el último resultado de un comando anterior.

Es posible que el Panel de consola sea un buen candidato para experimentar rápidamente con JavaScript y descubrir cuál es el resultado de ciertas expresiones. Sin embargo, cuando comienzas a escribir JavaScript más complejo, puedes encontrar fácilmente limitaciones:

  • La falta de resaltado de sintaxis puede disminuir la legibilidad.
  • La sangría se debe hacer manualmente con caracteres espaciales.
  • Las características faltantes están típicamente presentes en los editores de código.

El panel de consola no pretende ser un reemplazo del editor de código o incluso una alternativa. Aquí hay una lista de algunos casos en los que el panel de consola puede ser útil:

  • Utilizando la función de autocompletar por el descubrimiento de propiedades
  • Descubriendo la diferencia entre los métodos call() y apply() de JavaScript ejecutándolos en línea y observando los resultados

Panel de Fuentes

El panel principal del Panel de Fuentes contiene un editor de código con capacidades de edición básicas.

CodeMirror

El editor en sí funciona con CodeMirror, un potente editor de texto implementado con JavaScript. DevTools importa el editor CodeMirror en su propia base de código y habilita de forma selectiva varias funciones que a su vez están disponibles para cualquier usuario de Chrome.

Al editar JavaScript (entre otros lenguajes compatibles), el editor del Panel de Fuentes contiene una serie de utilidades tales como:

  • Sugerencias de autocompletar: Recibe sugerencias sobre la palabra que puedes estar intentando escribir. Estos se basan en propiedades escritas existentes dentro del mismo archivo. Por ejemplo, no se sugiere documento después de escribir en docu a menos que ya exista al menos una aparición dela palabra documento en el mismo archivo.
  • Buscar y reemplazar: Para abrir el cuadro de búsqueda, haz clic en Comando-F. Los resultados coincidentes se describen en el código en tiempo real. La casilla de verificación Reemplazar proporciona funciones de búsqueda y reemplazo.
  • Accesos directos de teclado: Existen varios accesos directos, similares a los que se encuentran en los editores de código como Sublime Text. Por ejemplo, usa Comando-/ para alternar un comentario, Comando-D para seleccionar la aparición de la palabra siguiente de la palabra seleccionada en ese momento, y muchas más, como se documenta en la página de accesos directos de Chrome Developer Tools.

Edición de JavaScript en vivo

La función, más conocida como Live Edit, te brinda la capacidad de editar el código JavaScript de una página a través de DevTools y hacer que los cambios se apliquen a la página inmediatamente sin una actualización de página. No hay una IU particular para usar esto; simplemente reescribe una parte del código JavaScript y presiona Command-S para guardarlo.

Cómo se explica esto detrás de escena se explica a continuación, pero primero, tenga en cuenta los siguientes requisitos previos (estos son independientes de Live Edit):

  1. Una página que usa script.js carga en Chrome a través de una página web.
  2. script.js se analiza, evalúa y compila en código máquina a través del motor de JavaScript V8.

Esto es lo que ocurre detrás de las escenas de la función Live Edit, teniendo en cuenta los puntos anteriores:

  1. Abre script.js en el editor de código DevTools. Supongamos que hay un botón en la página web actual. Al hacer clic en un botón, un receptor de evento de clic ejecuta una función anónima.
  2. Modifica la función anónima para agregar una instrucción console.log y guarda el archivo.
  3. Los contenidos de texto sin procesar de script.js se vuelven a inyectar en el motor V8 para su procesamiento.
  4. Las comparaciones se realizan entre el nuevo script.js y el anterior. Las eliminaciones, adiciones y modificaciones se almacenan.
  5. V8 compila el JavaScript modificado y remueve script.js con los cambios compilados.

Live Edit funciona mejor con modificaciones menores en lugar de crear archivos JavaScript completos para tu aplicación. Los escenarios de depuración funcionan bien con Live Edit.

Espacios de trabajo

Workspaces o Espacios de trabajos no es un componente crítico de la depuración de JavaScript a través de DevTools. Sin embargo, dependiendo de tus requisitos, puedes acelerar tu flujo de trabajo de depuración. Workspaces es una función de DevTools que te permite modificar el contenido de una carpeta en el sistema de archivos haciendo cambios de código en DevTools.

Si estás explorando un proyecto que se sirve localmente a través de un servidor web, como en http://localhost:3000/ y el proyecto existe en tu sistema de archivos en ~/development/project, por ejemplo, puedes enseñar DevTools sobre el mapeo entre los dos y usa las capacidades de Live Edit con capacidades de salvar en disco. Workspaces habilita el siguiente flujo de trabajo:

  1. Después de instruir a tus DevTools sobre la asignación entre la página que estás viendo y su fuente en tu sistema de archivos, puedes ver el código fuente en el Panel de Fuentes.
  2. Encuentras un error de JavaScript por lo que durante la depuración, realizas un cambio en el Panel de orígenes.
  3. Guarda los cambios usando Command-S.

En el paso 3, el guardado sobrescribe el archivo fuente original.

Mapas de fuentes

Los mapas de origen resuelven un problema común al tratar con el código fuente que se procesa o compila en otra cosa. Ejemplos incluyen:

  • El código de JavaScript que se minimiza y concatena como parte de un sistema de compilación
  • El código Ecmascript 6 que se transporta en código ES5 para que sea compatible con todos los navegadores modernos
  • Código CoffeeScript que se compila en JavaScript

El problema es el siguiente: Al depurar una versión procesada del código, puede ser difícil entender cómo el código fuente original se asigna a lo que estás viendo durante la depuración. Si obtienes un error en la consola de DevTools para un sitio web de producción, generalmente terminarás teniendo que depurar una versión miniaturizada y concatenada de código JavaScript, que se parece poco a los archivos fuente que tú creas.

Un mapa de origen es un archivo generado producido como parte de un proceso de compilación que está disponible para los casos de uso enumerados anteriormente. DevTools puede leer un archivo de mapa de origen para comprender cómo se mapea un archivo compilado en el archivo original.

Los dos fragmentos de código (Source File-app.js y Transpiled file-compiled.js) muestran el código del depurador de Source Map.

Ejemplo 1. Fuente File-app.js

Ten en cuenta que el archivo de origen de app.js utiliza una función compatible con Ecmascript 6 conocida como iterador de matriz.

Ejemplo 2. Transpiled File-compiled.js

Ten en cuenta que compiled.js es referenciado por una etiqueta de script en una página HTML, junto con el tiempo de ejecución de Traceur, y finalmente se abre en un navegador.

compiledjs screenshot

Incluso el JavaScript compilado tiene la sentencia console.log en la línea 6. DevTools puede mostrar exactamente dónde existe la instrucción console.log dentro del archivo fuente original (depuración del mapa de origen), que está en la línea 2. Los puntos de interrupción funcionan como se esperaba. Detrás de escena, el JavaScript compilado se evalúa y ejecuta, pero DevTools presenta un recurso diferente en lugar de la versión evaluada del navegador.

Fragmentos o Snippets

La característica Snippets de DevTools proporciona una forma rápida de escribir código JavaScript misceláneo y ejecutarlo. Todo el JavaScript ejecutado a través de Snippets se ejecuta dentro del contexto de la página actual. Ejecutar un fragmento de DevTools es similar a ejecutar un Bookmarklet en una página. Es posible que prefieras escribir ciertos JavaScript en fragmentos en lugar de hacerlo en el Panel de consola por motivos relacionados con un mejor entorno de edición de códigos. Tus fragmentos se guardan en el almacenamiento local de DevTools.

Para usar fragmentos:

  1. Asegúrate de que la barra lateral izquierda esté visible en el Panel de orígenes y selecciona la pestaña Fragmentos en la barra lateral (junto a las pestañas "Orígenes" y "Guiones de contenido").
  2. Haz clic derecho en la barra lateral izquierda y selecciona Nuevo para crear un nuevo fragmento.
  3. Nombra tu nuevo fragmento.
  4. Escribe console.log('Hola'); en el editor de código.
  5. Presiona Comando-Enter y observa la salida resultante en el Panel de la consola.

Puedes encontrar una serie de fragmentos ya escritos en este repositorio de fragmentos de DevTools.

Eso es todo por la parte 1 de una experiencia moderna de depuración. En la Parte 2, veremos algunas funciones de depuración y también algunas extensiones que pueden ayudar con esto.

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.