Depuración de D3
Aunque no se necesita un entorno de desarrollo modular frontend completo para crear visualizaciones con D3.js, sí se necesita un buen depurador. Todos los navegadores incluyen herramientas de desarrollo que permiten navegar por una estructura de página estática y elementos DOM generados, así como una consola donde se puede interactuar en tiempo real con los datos utilizados por el motor de JavaScript.
La herramienta más importante es la consola de JavaScript, donde verás los mensajes de error. Es muy común obtener una página en blanco cuando esperabas otra cosa y no tener ni idea de por qué tu código no funciona como se espera. A veces, simplemente se trata de una coma olvidada, o de que no hay conexión a internet y no se cargó algún archivo. Si tienes abierta la consola de JavaScript mientras ejecutas la página, te dirá al instante qué está pasando. También es recomendable usar un editor con numeración de líneas, ya que la mayoría de los mensajes de error indican las líneas donde se produjo el problema:
Puedes abrir las herramientas de desarrollo como un marco en tu navegador o como una ventana independiente. A continuación, se muestran las rutas de menú de la consola de JavaScript en las últimas versiones de los tres navegadores más populares:
- Chrome: View | Developer | JavaScript Console
- Firefox: Tools | Web Developer | Web Console
- Safari: Develop | Show Error Console
Muchos fragmentos de código y ejemplos se pueden probar simplemente escribiéndolos en la consola de JavaScript. El contexto de la consola es la página cargada actualmente. Podrá acceder a las funciones de cualquier archivo de biblioteca de JavaScript cargado con la etiqueta <script y a cualquier variable global declarada en bloques <script></script>, por lo que también puede usar la consola para experimentar con D3. La consola es una excelente manera de aprender D3, ya que permite ejecutar funciones en tiempo real y ver inmediatamente los resultados que producen. Puede probar muchos ejemplos de código de este libro usando la consola de JavaScript.