Tanto si eres un principiante como un profesional, la solución de problemas de HTML y CSS puede ser una verdadera molestia si no estás equipado adecuadamente. Hoy veremos algunas herramientas para ayudarlo a forzar el envío de esa molesta página web.
Las herramientas predeterminadas del navegador
Antes de lanzar herramientas, aplicaciones y extensiones de terceros, debe consultar las herramientas disponibles en su navegador. La mayoría de los navegadores modernos tienen algunas herramientas de desarrollador integradas en la interfaz.
Echemos un vistazo rápido a algunas de las herramientas que Safari proporciona a los desarrolladores desde el primer momento.
Depuración en Safari
Las herramientas de desarrollo predeterminadas de Safari son mucho más fuertes de lo que la mayoría de las personas les dan crédito. Para habilitarlos, vaya a las preferencias de Safari y marque la casilla debajo de? Avanzado? pestaña que dice "Mostrar menú de desarrollo en la barra de menú". Ahora, en el menú Desarrollar, vaya a "Mostrar inspector web".
Esto debería mostrar un menú en la parte inferior de la ventana que contiene toneladas de excelentes opciones para inspeccionar y depurar páginas web. Hoy nos centraremos en dos áreas clave que contienen herramientas para su proceso de depuración: Recursos y Elementos.
Bajo la pestaña de recursos puede ver todos los archivos que conforman el sitio web. Estos incluyen scripts, imágenes, html, css, etc. También puede ver cuánto tarda en cargarse cada elemento y si se produce algún error durante el proceso de carga.
Debajo de la pestaña Elementos verás un esquema expandible de tu HTML:
Aquí puede desplazarse sobre partes del código y verlas resaltadas en el sitio anterior. También puede hacer clic en la lupa en la parte inferior para seleccionar directamente cualquier cosa que vea en la página web para su inspección. La parte resaltada en la vista previa de la página le permite ver el relleno y los márgenes que afectan a ese elemento.
Al hacer doble clic en cualquier parte del HTML, puede cambiar lo que desee. Tenga en cuenta que estos son cambios seguros y no permanentes que solo previsualizan las diferencias sin afectar realmente su archivo original.
Una vez que selecciona una sección u objeto, puede ver los estilos asociados con ese objeto en el extremo derecho de la ventana.
Al igual que con el HTML, puede realizar una depuración y experimentar editando sus estilos aquí (doble clic). Por ejemplo, si desea cambiar el color del texto del encabezado a amarillo, simplemente haga doble clic en "blanco". y escriba un nuevo valor. También puede usar las casillas de verificación pequeñas para deshabilitar partes del código para una mayor flexibilidad de depuración.
Finalmente, haciendo clic en la pequeña forma de señal de stop con una? X? en la parte inferior derecha de la pantalla, puede ver los errores que se producen cuando la página se está cargando (como se mencionó anteriormente, también puede verlos en Recursos).
Como puede ver, Safari es una excelente herramienta de depuración de HTML / CSS por sí misma. Puede ver todos los archivos asociados y ver cómo / si se están cargando, inspeccionar elementos individuales de cerca, editar HTML y CSS directamente en la ventana del navegador y evaluar errores.
Depuración en otros navegadores
Consulte estos artículos para obtener más información sobre cómo utilizar las herramientas de desarrollador predeterminadas en otros navegadores:
- Desarrollo Web Con Firefox
- Descubriendo las herramientas de desarrollo de Internet Explorer
- Herramientas de desarrollo de ópera
Firebug
Simplemente no puede discutir las herramientas de depuración sin abrir Firebug. Es ampliamente considerado como la mejor opción para ajustar tu CSS dentro del navegador.
Firebug es un complemento gratuito para Firefox y contiene toneladas de funciones potentes y fáciles de usar para desarrolladores web. Haga clic en la imagen de abajo para ver el sitio y descargar el complemento.
Una vez que instale y active Firebug, verá una ventana muy similar a la que vimos en Safari emergente en la parte inferior de la pantalla. Al igual que con Safari, hay un buen resumen de su archivo HTML con partes seleccionables y resaltado inteligente en la vista previa. Aquí, Firebug triunfa sobre Safari a través de la codificación por colores de los márgenes y el relleno en la vista previa del sitio web para una referencia visual fácil.
Al hacer clic en una sección, aparecerá el CSS asociado en el lado derecho.
Alternativamente, puede hacer clic en la pestaña CSS y ver su archivo CSS completo en una vista completamente editable. Al igual que con Safari, los cambios que realiza aquí no representan cambios reales en el archivo, simplemente le brindan cierta flexibilidad para la depuración y la experimentación.
Esto simplemente araña la superficie de lo que Firebug puede hacer. Hay muchas características más avanzadas para profesionales nuevos y experimentados por igual. Tanto si eres un usuario dedicado de Firefox como si no, deberías probar Firebug por ti mismo.
Firebug Lite
Con suerte, con el nuevo y mejorado sistema de extensión Safari 5, pronto veremos un complemento oficial de Firebug u otro equivalente de terceros. Sin embargo, mientras tanto, si está en cualquier otro navegador, puede usar Firebug Lite, un bookmarklet con muchas (aunque definitivamente no todas) las mismas características que Firebug.
Alcance de xyle
Código cultivado, los desarrolladores de la asombrosa aplicación de productividad 'Things ,? creó una pequeña aplicación impresionante para depurar y ajustar sus páginas web. Xyle Scope solía costar $ 20, pero recientemente se ha convertido en una descarga gratuita.
No encontrará un enlace a él en la página de inicio de Cultured Code, por lo que me imagino que han dejado de desarrollarse para Xyle Scope debido al gran éxito de Things. Aquí hay un enlace directo a la página de descarga.
Xyle Scope tiene una bonita vista de panel dividido con la vista previa del sitio web a la izquierda y todas sus herramientas a la derecha. Puede seleccionar elementos directamente en la revisión y ver todos sus atributos asociados. Hay un montón de información para examinar aquí, incluido el orden en cascada, los estilos aplicados, los selectores, la jerarquía de páginas y más. Al igual que con Firebug, Xyle Scope le permite diferenciar visualmente entre los márgenes y el relleno aplicado a un elemento.
Puede ajustar cualquier estilo que desee e incluso elegir guardar los cambios. Xyle Scope es una herramienta sumamente útil y poco apreciada para ajustar su HTML y CSS. Es realmente desafortunado que no veamos ninguna otra actualización para el soporte de CSS3 y HTML 5. Si alguien sabe diferente, házmelo saber!
Fragmento de depuración de CSS
La última herramienta de depuración que veremos es un pequeño truco inteligente que puede aplicar a su CSS de inmediato para examinar las capas de elementos en la página. No estoy seguro de quién lo pensó primero, pero he visto el fragmento en varios sitios de la web (originalmente lo encontré aquí).
Chris Page describe la funcionalidad de los fragmentos de código de la siguiente manera:? Uso el siguiente bit de CSS para ayudar a visualizar la estructura de un documento XHTML (o HTML) al colocar un contorno de color alrededor del borde de cada elemento. En cada nivel de la jerarquía, el color cambia para que pueda ver cuándo? ¿Profundidad? cambios.
La página resultante debe parecerse a la imagen de abajo:
También hay una versión ligeramente diferente que aplica un elemento flotante a cada línea para que solo veas las líneas punteadas cuando pasas el cursor sobre una parte específica. De lo contrario, la página aparece normal.
Pensamientos de cierre
Además de las herramientas anteriores, siempre debe validar tanto su CSS como HTML. Al hacerlo, lo ayudará a evitar innumerables problemas y le proporcionará información directa sobre cómo codificar mejor sus páginas.
Espero que las herramientas anteriores le resulten útiles en su búsqueda del diseño y diseño del sitio de píxeles perfectos. ¡Haznos saber en la sección de comentarios a continuación qué herramientas utilizas para depurar y modificar tu HTML y CSS!