Uso de las herramientas de desarrollo del navegador

¿Sientes el poder?

Todos los principales navegadores de Internet que utilizas cuentan con lo que se conoce como un conjunto de herramientas de desarrollo. Entre ellos se incluyen Google Chrome, Safari, Firefox e Internet Explorer. Así pues, con todas estas opciones, resulta muy fácil utilizar un conjunto de herramientas de desarrollo para hacer cosas realmente interesantes. En esta página voy a utilizar las herramientas de desarrollo de Google Chrome, a las que se accede haciendo clic con el botón derecho del ratón y seleccionando «Inspeccionar» (para obtener una breve descripción general de las herramientas de desarrollo de Chrome, haz clic en aquí). A continuación se indican algunos aspectos básicos sobre lo que puedes hacer con las herramientas de desarrollo de tu navegador y en qué situaciones pueden resultarte útiles.

Compruebe los errores de la consola para averiguar por qué algo puede no estar funcionando correctamente en su sitio.

Si observas que el contenido de tu página no se carga correctamente o que algo parece ‘raro’, es fundamental poder comprobar los posibles errores locales que puedan producirse al cargar una página. Para empezar, abre las Herramientas de desarrollador de tu navegador y ve a la pestaña “Consola”. Una vez allí, activa la opción «Conservar registro», situada en la parte superior, debajo de las pestañas principales, y pulsa «Actualizar» si no aparece ninguna información.

Una vez hecho esto, aparecerán los mensajes de error. Si no estás seguro de qué significa un mensaje de error o de cómo solucionarlo, te recomendamos que leas este artículo. aquí. Si aún no tienes claro cómo proceder, envíanos una captura de pantalla de lo que ves, junto con una breve explicación de qué es lo que no funciona, en un ticket de asistencia.

Ajusta o edita el estilo CSS y comprueba cómo afectará a tu sitio web antes de guardar los cambios en tu tema o plugin.

Si no te gusta cómo se muestra el estilo CSS de tu tema o de MemberPress, o Si no se muestra correctamente, WordPress te permite editarlo fácilmente con un plugin de terceros. Te recomendamos que utilices el Plugin CSS personalizado sencillopero también hay otras opciones si se hace un simple busque en para plugins de WordPress con CSS personalizado. La idea de este tipo de plugins es que puedas crear cualquier código CSS personalizado, pegarlo en el plugin y que se aplique. Si puedes limitar el CSS a tu tema, la mayoría de los temas tienen un lugar donde puedes añadir CSS personalizado, así que pregúntale al desarrollador de tu tema si no estás seguro de dónde encontrarlo.

Para este ejemplo, supongamos que me gustaría que los títulos de los campos de mi formulario de registro MemberPress fueran un poco más grandes de lo que son aquí:

La forma más sencilla de hacerlo es hacer clic con el botón derecho del ratón directamente sobre el elemento que desea editar. Así que si hago clic derecho en uno de esos títulos y luego haga clic en inspeccionar elemento que se verá así:

Verás que, al hacerlo, la sección resaltada en gris en las herramientas de desarrollo es la que está directamente relacionada con esa etiqueta del formulario. Aquí buscamos la clase «div», que nos indicará cuál es la clase CSS que se está invocando y utilizando para mostrar el texto. Al pasar el cursor por encima de la clase «div», se resaltará en azul el elemento concreto al que afecta, por lo que esta es una buena forma de comprobar que estás seleccionando la clase correcta. La clase correspondiente es mp-form-label Y aunque en este artículo no vamos a entrar en demasiados detalles sobre cómo funciona el CSS (pero si quieres saber más sobre el CSS, aquí es un buen lugar para empezar), sólo sé que para este ejemplo para hacer el texto más grande que tendría que introducir esto en el CSS Custom Manager Plugin:

Hay un par de aspectos clave que debes tener en cuenta: debes asegurarte de comenzar cada clase con un “.” (punto), encerrar el estilo entre “{}” (llaves) y siempre es una buena práctica incluir un Importante variable. La razón por la que puede ser necesario incluir la variable Importante La razón por la que se utiliza una variable es que, en la mayoría de los casos, al añadir CSS personalizado, se sobrescribirá el CSS ya existente, lo que debería garantizar que se muestre tu CSS personalizado en su lugar. Así es como quedaría esa modificación:

Comprueba desde qué servidor se está cargando tu contenido cuando no se carga correctamente.

A veces te darás cuenta de que una parte concreta de tu sitio web no se carga correctamente, como los archivos protegidos con reglas URI personalizadas. Esto suele deberse a que el contenido lo carga un servidor distinto de Apache, como NGINX, que suele ser una causa habitual de este problema. Para comprobarlo, lo que tienes que hacer es abrir las Herramientas de desarrollador y, a continuación, ir a la pestaña «Red». Si no ves nada, es posible que tengas que actualizar la página; de lo contrario, verás una lista de todas las ubicaciones de los archivos que se han utilizado para cargar la página. Desplázate hacia abajo hasta encontrar la ubicación del archivo que está recuperando el contenido que no se carga correctamente (normalmente sabrás cuál es porque tendrá algún tipo de código de error (en el estado) y haz clic en el enlace. De este modo aparecerá diversa información, incluido el código de estado, pero en este caso te interesará fijarte en el apartado “Encabezados de respuesta”, tal y como se puede ver aquí:

Aquí verás que el contenido se ha cargado a través de Apache, pero, de nuevo, si se trata de otra cosa y tienes algún problema, tendrás que realizar un cambio. En concreto, debes ponerte en contacto con tu proveedor de alojamiento y preguntar si pueden reenviar las solicitudes de esos tipos de archivos a Apache para que las gestione, en lugar de a NGINX.