Otras Páginas

Herramientas De Desarrollo

Objetivos

  • Oriéntate con las herramientas de desarrollo de tu navegador. Son un buen punto de partida para seguir construyendo tu conocimiento de HTML, CSS, y JavaScript.

    • Las imágenes a continuación son específicas para el navegador Chrome, que está disponibe para Mac y PC y tiene buenas herramientas de desarrollador. Pero si prefieres otro navegador, hay similares herramientas que puedes usar, ya sea integradas (Internet Explorer 9, Safari) o instaladas mediante plugins (FireFox).

Pasos

Paso 1

Primero, tienes que iniciar las herramientas de desarrollo. Están ocultas por default.

En Chrome, puedes hacerlo dando click View > Developer > Developer Tools.

Paso 2

Haz click en el botón 'Elements' para ver tu HTML.

Dando click a la etiqueta HTML en el panel de elementos lo destacará en la ventana del navegador. Es una gran herramienta para depurar problemas de estilo. En la parte derecha del panel, obtendrás una lista de estilos que se aplican a ese elemento.

Los elementos en el panel de Chrome se actualizarán para que coincidan con el estado de tu DOM como vaya siendo modificado con JavaScript. Algunos paneles de elementos no lo hacen — sólo muestran como se vería el HTML al actualizar la página.

Paso 3

En el panel de 'Network', podrás ver qué otros archivos y recursos está cargando tu HTML.

Si das click en el nombre de algún archivo, puedes observar el contenido que tiene el archivo. Este panel es un buen lugar para depurar problemas de vinculación o errores de cargado. (Puedes ver los encabezados de HTTP y solicitar parámetros también, investigando un poco.)

Paso 4

La 'Consola' es el arma secreta del desarrollador para JavaScript. Te deja ejecutar JavaScript escribiendo en ella directamente — y ejecuta tus scripts en el contexto de tu página, por lo que puedes interactuar directamente con objetos y funciones que has definido. Es útil para depuración y experimentación.

Paso 5

El panel de 'Sources' es otra herramienta para JavaScript. Si estás acostumbrado a trabajar con un IDE que tiene un depurador, serás capaz de utilizar muchas de las mismas técnicas (como breakpoints, stack traces, y ver las expresiones) en el navegador.

Explicación

Sigue Aprendiendo con las Herramientas de Desarrollo

Con las herramientas de desarrollo adecuadas, puedes inspeccionar cada sitio que visites. Si ves estilos con CSS interesantes o animaciones en JavaScript, podrás averiguar cómo fueron hechos. Es una buena forma de seguir aprendiendo como desarrollador front-end.

Siguiente Paso:

Ir a Agrega Archivos Iniciales

Regresar a Atributos Html%23step5