add Spanish language support in chromedevtools doc

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_Assignment_Network_es.adoc

@@ -0,0 +1,6 @@
+== ¡Pruébalo! Trabajando con la pestaña de Red
+
+En esta tarea, debes encontrar una solicitud HTTP específica y leer un número aleatorio.
+Para comenzar, haz clic en el primer botón. Esto generará una solicitud HTTP. Intenta encontrar la solicitud HTTP específica.
+La solicitud debería contener un campo: `networkNum:`
+Copia el número que se muestra después en el campo de entrada a continuación y haz clic en el botón de verificación.

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_Assignment_es.adoc

@@ -0,0 +1,8 @@
+== ¡Pruébalo! Utilizando la consola
+
+Vamos a intentarlo. Utiliza la consola en las herramientas de desarrollo y llama a la función de JavaScript *webgoat.customjs.phoneHome()*.
+Deberías recibir una respuesta en la consola. Tu resultado debería lucir algo así:
+`phone home dijo
+{"lessonCompleted:true, ... ,"output":"la respuesta de phone home es..."`
+Después de eso, pega el número aleatorio en el campo de texto a continuación.
+(Asegúrate de tener el número más reciente, ya que se genera aleatoriamente cada vez que llamas a la función)

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_console_es.adoc

@@ -0,0 +1,15 @@
+== La pestaña de la Consola
+
+En la pestaña de la consola, puedes ver cualquier cosa que un archivo JavaScript cargado haya impreso.
+No te preocupes si ves algo en rojo. Aunque sea un error, probablemente se haya resuelto por sí mismo.
+A través de la pestaña de la consola, también puedes ejecutar tu línea de código JavaScript.
+
+Comienza limpiando la consola con el atajo `CTRL+L`.
+
+Para ejecutar tu JavaScript, haz clic dentro de la consola y escribe algo como:
+`console.log("¡Hola WebGoat!");` Presiona Enter. `¡Hola WebGoat!` debería aparecer ahora en tu consola.
+La consola también te permite hacer algunas operaciones aritméticas básicas. Si escribes, por ejemplo, `1+3` y presionas Enter, la consola debería mostrar 4.
+
+Nota: Puede que veas un `undefined` en la consola. Puedes ignorar esta declaración de manera segura, solo significa que la función de JavaScript que has llamado no devolvió nada.
+
+image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"]

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_elements_es.adoc

@@ -0,0 +1,19 @@
+== La Pestaña de Elementos
+
+La pestaña de Elementos te permite examinar el código HTML y CSS utilizado para definir y estilizar el sitio web.
+
+=== Fuente HTML
+
+Si pasas el ratón sobre una línea, verás que una parte del sitio web se vuelve azul. Eso significa que
+esta línea HTML en particular define esta sección del sitio web.
+La pestaña de Elementos te permite realizar cambios en cada elemento HTML individual. Por ejemplo, si haces clic dentro de una etiqueta de párrafo (<p>...</p>), puedes editar el contenido del sitio web. Si has realizado cambios y luego haces clic en Enter,
+Chrome actualizará el sitio web para mostrar tus ediciones. También puedes cambiar la etiqueta HTML utilizada, las clases y los identificadores (id) que una etiqueta tiene, y mucho más.
+
+image::images/ChromeDev_Elements.jpg[DeveloperToolsElements,500,350,style="lesson-image"]
+
+=== Fuente CSS
+
+Puedes encontrar información sobre el CSS utilizado para estilizar el sitio web debajo de la fuente HTML. Al igual que con el HTML, también puedes editar el CSS y, por lo tanto, ajustar el estilo del sitio web.
+Puedes editar valores específicos o desactivar el estilo individual.
+
+image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"]

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_intro_es.adoc

@@ -0,0 +1,17 @@
+== Herramientas de Desarrollo de Google Chrome
+
+Para completar ciertas tareas, a veces es necesario examinar el código fuente de JavaScript o ejecutar un comando de JavaScript por tu cuenta.
+Para hacer eso, Google Chrome tiene un conjunto de herramientas que te permiten hacer eso y mucho más.
+Aunque estas herramientas no son exclusivas de Google Chrome, casi todos los navegadores modernos tienen un conjunto propio.
+Nuestra introducción se centrará en las que se encuentran en Google Chrome.
+Sin embargo, aún puedes utilizar el navegador que prefieras, como Firefox o Safari, aunque algunos pasos de este tutorial pueden ser diferentes para ti.
+
+Ten en cuenta que este tutorial no está diseñado para enseñar todo sobre estas herramientas.
+Se centrará únicamente en los conocimientos esenciales para completar tareas específicas.
+Además, si ya estás familiarizado con estas herramientas, puedes saltar estas lecciones sin problema.
+
+Para comenzar: *abre las herramientas de desarrollo*. Hay varias formas de abrirlas:
+
+1. Haz clic derecho en cualquier parte de la ventana del navegador y selecciona la opción _"Inspeccionar"_.
+2. Ve al menú del navegador (tres puntos en la esquina superior derecha), luego ve a _"Más herramientas"_ y selecciona la opción _"Herramientas de desarrollo"_.
+3. Utiliza el atajo de teclado _Ctrl + Shift + I_.

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_sources_es.adoc

@@ -0,0 +1,15 @@
+== La pestaña de Fuentes
+
+En la pestaña de Fuentes, puedes examinar el sistema de archivos y ver todos los archivos HTML, CSS y JavaScript utilizados para
+crear el sitio web. Haz clic en un archivo para ver su contenido.
+
+image::images/ChromeDev_Sources.jpg[DeveloperToolsSources,400,500,style="lesson-image"]
+
+== La pestaña de Red
+
+En la pestaña de Red, puedes ver las solicitudes HTTP y las respuestas que ha realizado el sitio web.
+Simplemente haz clic en una si deseas obtener información más detallada sobre una solicitud específica.
+La "Línea de tiempo" sobre los puntos azules representa cuándo se realizaron estas solicitudes y respuestas.
+También puedes ver las solicitudes realizadas en un marco de tiempo específico simplemente haciendo clic y arrastrando en la línea de tiempo. La ventana inferior solo mostrará las solicitudes y respuestas realizadas en ese marco de tiempo.
+
+image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"]