Problemas de HTML y CSS Depuración realmente puede arruinar su impulso creativo, pero son inevitables en la construcción de casi cualquier proyecto web. Es muy molesto cuando se está diseñando una página y de repente te das cuenta de que algo no está bien alineado a la derecha o de color correctamente.

Si usted sabe cómo hacer frente a problemas de representación directa y resolverlos rápidamente, la construcción de sitios web se hace mucho más agradable. Cada número se encuentra va a ser único a su manera, pero la mayoría se pueden resolver mediante la adhesión a unos pocos «chequeos» básicas que pueden ayudarle a trabajar con su código, en lugar de luchar contra ella.

Los pasos que se indican a continuación están en ningún orden en particular. La depuración es parte técnica y la forma de arte intuitivo parte que sólo ha aprendido con la práctica. A medida que construye más proyectos, los métodos de depuración que debe tratar en diferentes situaciones se harán más evidentes.

Compruebe Si Hay Errores De Sintaxis

La mayoria de veces, un simple error puede hacer que nos demoremos en el desarrollo de un proyecto. ¿Me he perdido un punto y coma? ¿Se me ha olvidado cerrar una etiqueta HTML?. No importa qué tan experimentado seas, muchas veces estos pequeños errores se nos pasa por alto. A veces puede simplemente regresar con su editor de texto, mirar la última cosa que usted modifico, y solucionar el problema.

Sin embargo, si usted está trabajando en un proyecto grande, puede ser útil usar una herramienta de validación. El servicio de validación de etiquetas que ofrece W3C y el validador de CSS de W3C son perfectas para esto, aunque sus mensajes de depuracion son muy tecnicos 🙁 Una alternativa, es utilizar una herramienta como CSS Lint, que puede realizar un análisis de su código y ayudarle a encontrar errores.

Desactive Estilos Con La Herramienta De Desarrolladores De Chrome

Si se pregunta cómo su CSS está afectando a un elemento particular de la página, la herramienta de desarrolladores de Chrome hacen que sea fácil desactivar cada atributo. En el navegador web de Google Chrome, simplemente haga clic derecho y seleccione Inspeccionar Elemento en el menú contextual. Con ello se abre la Chrome DevTools.

En el lado derecho del panel Elementos, debería ver una pestaña llamada Estilos ó Styles con un poco de CSS dentro de ella. Puede desactivar de forma individual los estilos que crea que afectan algun elemento. Esto puede parecer un poco tedioso al principio, pero en realidad es uno de los métodos más rápidos para la detección de errores de estilo que son incompatibles con la CSS que has escrito (o por lo menos la CSS crees que has escrito).

Use La Pestaña «computed» De Chrome

En el panel Elementos de la Chrome DevTools, justo al lado de la pestaña Styles encontrarás otra pestaña llamada computed. Esta es una seccion bastante importante, ya que ayuda a conocer el tamaño exacto de los elementos dentro de la pagina. Esta es una representación del modelo de caja y te muestra cuánto espacio ocupa un elemento en píxeles.

Más específicamente, se rompe el espacio de un elemento en el contenido, padding, margin y border. Cuando los elementos no están separados del todo bien, esto puede ser muy útil, ya que puede, literalmente «hacer los calculos» y averiguar qué elemento es un problema. Por ejemplo, si tiene tres elementos que todos deben estar en la misma línea flota, y el último elemento está en su lugar saltando a la siguiente línea, puede inspeccionar el ancho del contenedor primario y luego comparar su valor para el ancho de la tres elementos.