Blackbird – depurador de código JavaScript

0
36

Blackbird es una librería para depurar alertas de forma mas amigable que un alert(), esto nos permite realizar todo tipo de informes al momento que se esta ejecutando el javascript, podemos saber que paso con el comportamiento de alguna variable, pintar contenidos de bucles, hacer seguimiento a una función, en fin todo lo que solíamos hacer con alert().
En este tutorial les enseñare como podemos implementar en nuestra pagina web esta librería para olvidarnos del clásico alert().

Blackbird

Primero:
Descargaremos la librería blackbird y la descomprimiremos en alguna carpeta, luego crearemos una pagina html e incluiremos el javascript y la hoja de estilo en el head.

<head>
  <script src="blackbird.js"></script>
  <link type="text/css" href="blackbird.css"/>
</head>

Segundo:
En mi caso cuando estaba probando esta librería me aparecía por defecto invisible el panel de blackbird, así que cree un menú fijo, a la derecha superior de la pagina en donde puse todos los comportamientos de blackbird.

<body>
<div style="position:fixed; top:0pt; right:5pt">
<a name="clear" href="javascript:log.clear();">clear</a>
<a name="move" href="javascript:log.move();">move</a>
<a name="resize" href="javascript:log.resize();">resize</a>
<a name="toggle" href="javascript:log.toggle();">toggle</a>
</div>
...

Controles

  • log.toggle()Este control hace aparecer y desaparecer el panel blackbird
  • log.move()Mueve el panel blackbird en cuatro tipos de posiciones: derecha superior e inferior y izquierda superior e inferior.
  • log.resize()Maximiza y normaliza el panel blackbird
  • log.clear()Limpia el contenedor de mensajes del panel blackbird

Tercero:
Para poder probar la gran funcionalidad de blackbird solo basta con colocar el código según el tipo de mensaje que queramos mostrar, existen cuatro tipos de mensajes:

  • log.debug(‘Mensaje para debug’)
  • log.info(‘Mensaje de información’)
  • log.warn(‘Mensaje de Advertencia’)
  • log.error(‘Mensaje de error’)

Podemos ver la demo de este tutorial aqui
Recursos: