Cómo solucionar problemas de desarrollo web

por Natalia Ventre el 10/05/2013 ・ podés leerlo en 4 minutos ・

Tanto los desarrolladores front-end principiantes como expertos cometen errores. Es frustrante que algo no te funcione como debería, pero si mantenés la calma, y seguís estos pasos, vas a poder resolver cualquier problema que se te presente. Los ejemplos son de HTML y CSS, pero los conceptos generales se pueden aplicar a cualquier problema de desarrollo web.

Paso 1: Tomar un descanso

El primer paso es alejarte de la computadora, tomáte un vaso de agua, da una vuelta a la manzana… Con suerte, cuando vuelvas, te vas a dar cuenta en qué te equivocaste.

Paso 2: Leer la documentación

En Mozilla Developer Network podés encontrar la documentación de HTML, CSS y JavaScript. W3Schools no es una fuente confiable.

Si estás usando un framework front-end, como por ej. Bootstrap, en su sitio web vas a encontrar la documentación. Si hay un demo disponible, compará el código con el tuyo y revisá si no te olvidaste de incluir algún archivo o algún otro error tonto. Para comparar archivos, podés usar Kaleidoscope.

Paso 3: Buscar la solución

Tratar de resolver el problema por tu cuenta o pedir ayuda depende principalmente de tu personalidad. No creo que preguntar sea el último recurso y tengas que desperdiciar horas en búsquedas y pruebas en vano para obtener el derecho a preguntar.

Opción A: Buscar la respuesta

Si elegís esta opción, las herramientas para desarrolladores de Chrome son tus nuevas mejores amigas. No son una varita mágica para arreglar código, pero te sirven para diagnosticar el problema y experimentar posibles soluciones directamente en el navegador. Discover DevTools es un curso gratuito de Code School patrocinado por Google. Para HTML y CSS tenés que saber usar bien la sección “Elements”.

Captura de pantalla de las herramientas para desarrolladores de Chrome
  1. Para abrir las herramientas para desarrolladores, presioná ⌥⌘I.
  2. Para seleccionar hacé click en la lupa y luego en un elemento de la página.
  3. En el panel derecho podés ver el estilo CSS generado. Un problema frecuente es que el estilo CSS no se está aplicando, acá podés ver una lista de todos los estilos coincidentes y cuáles de ellos están haciendo efecto. En “Styles” podés forzar los estados con el botón “Toggle element state”. En “Metrics” podés ver un diagrama del modelo de caja con los márgenes, padding, etc. aplicados.
  4. Podés editar temporalmente el HTML y CSS haciendo doble click.

Otros problemas:

  • Compatibiliadad: Si tenés problemas en otros navegadores, en Can I use1 hay tablas de soporte a HTML5, CSS3, SVG, etc. y problemas conocidos. Por ej. IE 8 no soporta la unidad rem, e IE 9 y 10 no soportan rems cuando se usa en la versión abreviada de la propiedad “font”, así que tendrías que declarar font-size aparte y aprovechar la cascada para ofrecer un valor alternativo en píxeles.
  • Técnica: Si no sabés cómo hacer algo concreto con CSS, por ej. centrar un elemento con posición absoluta, podés buscar si existe una técnica conocida, a veces el código es poco intuitivo.

Opción B: Hacer una pregunta

Cada comunidad online tiene sus reglas (¡deberías leerlas!)2. No se trata de complacer a los moderadores, si hacés una buena pregunta, vas a obtener mejores respuestas más rápido.

Consejo 1: Para preguntar sobre código, incluí el código que te está dando problemas3. CodePen y jsFiddle son servicios que te permiten pegar el código HTML en el panel HTML, el CSS en el panel CSS y el JavaScript en el panel JavaScript y ver el resultado. Presionando Save obtenés una URL pública que podés adjuntar a la pregunta. Con un Fiddle o un Pen le facilitás enormemente el trabajo a la persona que te quiere ayudar, porque puede ver el problema, modificar el código y darte la solución.

Consejo 2: Para preguntar cómo se hace tal cosa, en vez de describir vagamente qué es lo querés hacer, es mejor que muestres un ejemplo concreto: una captura de pantalla, un sitio web donde lo viste, etc.

Recomendaciones finales

  • Si te estás equivocando en conceptos básicos, podés profundizar tus conocimientos.
  • Si te estás equivocando en la sintaxis de HTML, CSS o JavaScript, podés usar Emmet o Haml, Sass o Stylus y CoffeScript. Si usás Sublime Text podés instalar SublimeLinter, un plugin que te resalta errores potenciales en JavaScript, PHP y otros lenguajes.
  • Si no te gusta trabajar solo y querés rodearte de personas para pedirles ayuda y colaborar, podés unirte4 a una comunidad online.

Por último, podés aprender de tus errores creando tu propia biblioteca de snippets (fragmentos de código) para futura referencia. Podés usar una aplicación como CodeBox o crear una cuenta en sitios como Snipplr.


  1. Browser Usage/Feature Statistics es una visualización de las características HTML5 y CSS3 soportadas por cada navegador/versión.

  2. Hay demasiadas reglas en la vuelta, son todas del estilo del nazi de la sopa de Seinfeld, en este artículo incluí sólo los 2 consejos que considero más importantes para obtener respuestas acertadas.

  3. En el proceso de aislar el código problemático y crear un caso de prueba reducido podés solucionar el problema.

  4. Con unirte a una comunidad, me refiero a que en vez de publicar la misma pregunta en 20 lugares diferentes cuando entrás en módo pánico, participes con frecuencia en la/s comunidad/es con más miembros y/o mejores respuestas.