Slides: http://slides.com/carlosherrera4/deck-5
Conjunto de herramientas para la creación de páginas web y depuración que están integradas en Google Chrome.
Porporcionan a los desarrolladores acceso interno a su aplicación para solucionar problemas de diseño, establecer puntos de interrupción del código JavaScript, obtener ideas para la optimización de código, etc.
Utilizando un editor de código
(Sublime Text, Apatana, Atom, Brackets, etc)
+
Navegador
"Workspace" Google Chrome
Botón F12
Botón F12
Elements: La pestaña "Elements" representa lo que llamaremos el "DOM" (Document Object Model), que no es más que lo que representa la página que estamos viendo.
Sources: Muestra las fuentes de contenido que se han utilizado para construir la página. Desde esta pestaña podemos escribir y modificar ficheros que estén vinculados a nuestro disco duro, pero veremos cómo hacer esto en la siguiente lección.
- Abrimos el html
- Abrimos las DevTools. Pestaña Sources
- Clic derecho en la ruta del directorio y seleccionamos "Add Folder to Workspace"
- Vinculamos el recurso del navegador con el fichero del disco duro que queremos modificar "Map to File System Resource"