Usando navegadores para desarrollo y solución de problemas

15 Marzo 2016 by 0 Comment Estilo de vida 27 Views

En este artículo vamos a ver cómo utilizar el navegador de forma más eficiente para modificar tu sitio web y para encontrar errores. En este ejemplo lo haremos con Chrome pero es similar en los otros navegadores.


Supongamos que vemos un espacio en blanco donde deberíamos ver un slider, o vemos el slider pero no funciona:

Presiona F12 en la página, donde se ve el error.

Haz clic en la pestaña Consola y actualiza la página.

Se escribirá el error y la ruta, o el código que te puede dar una pista de porqué se está causando, y así poder eliminar la extensión o plugin de tu sitio web.

Averigua qué código forma parte de tu sitio web


Saber cómo mirar el código de tu sitio web es útil por muchas razones.

1. Haz clic derecho en la parte de tu web que quieres inspeccionar y elige "Inspeccionar elemento".

2. En la parte inferior se abrirá una ventana donde puedes ver el código HTML de tu web.

3. Si pasas el cursor sobre el código, puedes ver los elementos resaltados en tu navegador. Puedes abrir el código y encontrar las partes de cada posición.

4. Para hacer la búsqueda más fácil podemos encontrar la parte de código bajo esa posición también.

5. Una vez identificado el problema, debes descargar los archivos de tu plantilla por FTP.

6. Luego utiliza un programa de búsqueda para buscar las partes de código dentro de una carpeta. Puedes hacerlo por ejemplo con Total Commander pulsando Alt + F7.

También puedes usar Notepad++ para esto, simplemente presiona Ctrl + Shift + F.

7. Si lo encuentras, el código podría ser un poco diferente de lo que viste en el HTML real, por ello no debes buscar toda la línea, podría haber variables procedentes de la configuración backend. Busca también el código de inicio y cierra el código superior (el código del paso 3) y el de inicio del código inferior (el código del paso 4).

8. El último paso debe hacerse en tu plantilla, en el ejemplo vamos a introducir una llamada a un slider.


A veces las plantillas no están correctamente codificadas, o tal vez un código CSS incorrectamente personalizado está afectando a alguna parte de la web. No es tan difícil averiguar de dónde viene ese código, si sabes cómo comprobarlo.

Para demostrarlo, vamos a seguir con el ejemplo del slider. Supongamos que el slider debe verse así:

Pero se ve así, el primer texto es rojo y el segundo es demasiado grande:

1. Haz clic derecho en la parte donde se encuentra el problema y elige "Inspeccionar elemento".

2. El código puede no estar al principio del elemento si hay algo invisible sobre él, o si has hecho clic un poco fuera de sus bordes. Abre el código hasta llegar a ese texto o al elemento que estás buscando. Puedes ver que he buscado "Chicken drumsticks", y que está en la parte más baja del código. El código CSS puede estar en los elementos superiores también, en los containers de esa parte, así que si no puedes encontrarlo, solo sube un nivel más alto y mira alrededor.

3. Después de hacer clic en esa parte HTML, a la derecha verás el código CSS que se aplica a esa parte.

4. El orden comienza desde la parte superior, la misma o menor prioridad, los mismos códigos de propiedad de CSS aparecen tachados. Esto ayuda a saber cual es el nombre de la propiedad CSS que estás buscando, en mi caso estoy buscando por color, pero puedes desmarcar los códigos CSS uno por uno y quedarte en esa parte en la que estás haciendo el cambio.

5. Cuando lo encuentres, debes comprobar de donde viene el archivo. Si es de un simple archivo CSS, entonces es fácil encontrarlo, puedes ver la ruta de acceso a ese archivo si pasas el cursor sobre su nombre, puedes hacer clic derecho sobre su nombre y elegir Copiar ubicación.

6. Si procede de un archivo de caché

Valora este artículo
(0 votos)

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

« Mayo 2017 »
Lun Mar Mier Jue Vie Sáb Dom
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

¿Quieres explorar más plantillas?