[Pedido para todos los novatos]: aprendan a utilizar la consola
Hola:
Le quiero pedir a todos aquellos que están comenzando y a aquellos que aún no la conocen que, por favor, lean lo siguiente para que aprendan a depurar/limpiar/detectar los posibles errores. De esta forma, cuando tengan que pedir ayuda, no llegarán con preguntas como "No puedo ver las imágenes, ¿que hago?", lo que no esta mal, pues no son expertos, pero la gente del foro no les podrá ayudar con una pregunta tan ambigua.
Para abrir la consola en:
- Google Chrome: presionen F12.
- Firefox: si bien Firefox tiene una consola integrada, no es tan poderosa como Firebug, así que lo primero que deben hacer es instalar el plugin Firebug en Firefox. Una vez instalado, debería aparecer un bicho (como una chinita) de color gris (esquina superior derecha), el cual tendrán que presionar (cuando la consola no esta funcionando no podrán ver ningún error ni advertencia y se darán cuenta que no esta funcionando porque estará de color gris; de lo contrario será de color rojo con negro). Luego de activarlo deben hacer clic con el botón derecho sobre el mismo icono y luego hacer clic sobre Activar todos los paneles. Editado: las herramientas de desarrollo de Firefox a la fecha (15 de Julio de 2014) han progresado bastante, así que el uso de Firebug es completamente opcional.
Actualizado (diciembre 5, 2014): ahora Firefox no necesita Firebug, pues la consola que incluye por defecto es igual o mejor. Una característica nueva es la posibilidad de ver el sitio web con distintas resoluciones, para los que intentan crear un sitio web responsive.
- Opera: presionen Control + Shift + i.
- Safari: existe el plugin Firebug Lite. Es casi igual que las demás herramientas.
- Internet Explorer 8 (no estoy seguro) y 9 (seguro que sí): F12 (igual que en Google Chrome).
Ahora que tienen la consola activa podrán ver que esta consola tiene varias pestañas (de hecho, una de ellas se llama console). Por si acaso, para que la consola sirva de algo, deben abrir alguna página web, pues de lo contrario estará vacía :P.
Las pestañas más importantes son (no nombraré las pestañas de IE porque no estoy usando Windows :P, pero es igual):
Elements (Google Chrome), Documents (Opera) y HTML (Firefox Firebug): En esta pestaña verán todo el código fuente de manera más ordenada en comparación a si se utiliza la opción de "Ver el código fuente" o Control + U. Además de ver el código HTML (ya procesado, pues nunca podrán ver el código PHP, para ello existen otras alternativas), también podrán hacer cambios al código fuente de manera temporal. Si hacen clic sobre algún elemento (p, a, textarea, etc.), a la derecha podrán ver todos los estilos relacionados con esa etiqueta específica. Estos estilos también se pueden modificar temporalmente y pueden ver los cambios "en vivo", o sea, no tendrán que editar el código fuente, guardar el archivo y recargar la página; ¡Hagan la prueba :P! Seleccionen un elemento y cambien el tamaño de la fuente, el alto, bajo, etc. Editar también significa eliminar, por ende también podrán eliminar una etiqueta completa y podrán ver los resultados en vivo.
Console (en todos se llama igual): La consola es la que mostrará los errores de archivos no encontrados (como las imágenes; en este caso les mostrará un mensaje como 404 not found y el recurso que no se encontró; hagan la prueba e incluyan una imagen falsa y verán lo que les digo) y es especialmente útil cuando se trabaja con Javascript. Por ejemplo: en lugar de utilizar alert("blah blah blah"); podemos escribir console.log("blah blah blah"); y en lugar de que aparezca una ventana, aparecerá un simple mensaje en la pestaña Console.
Esas son las pestañas más útiles. El resto también lo son, pero para usuarios con más experiencia (los que entenderán lo que hacen con solo leer el nombre de la pestaña).
Espero que aprendan a utilizarla, pues les ahorrará mucho tiempo. Con esta herramienta podrían resolver el típico problema de "Mi sitio web se ve bien con Google Chrome, pero no en Firefox u Opera".
Saludos :).
Citar
