CSS Peeper es una extensión de navegador que es un visor de CSS y está diseñado para diseñadores. Al usar esto, los diseñadores pueden concentrarse en el diseño y dedicar el menor tiempo posible a profundizar en el código. ¿Cuál es la altura de la línea, el botón o el tamaño de fuente en un sitio web? Todas estas preguntas se responden usando CSS peeper. Le permite inspeccionar el código de la manera más fácil posible. Uno puede extraer CSS y puede construir hermosas guías de estilo.
ventajas:
- De fácil acceso.
- Proporciona controles intuitivos.
- Adaptación y multiplataforma para cualquier navegador.
- Da integración de su funcionalidad en aquellos productos donde no se tiene acceso al kernel.
- Combine el almacenamiento en la nube y el sistema en un solo espacio de trabajo.
Desventajas:
- Se requiere actualización constante.
- Los distintos navegadores necesitan su versión adaptada del programa.
- A menudo requieren la capacidad de leer e incluso cambiar todo en las páginas web que uno visita, lo que en algunos casos puede provocar accidentes de violaciones de datos, capturar las contraseñas, rastrear la navegación, etc.
Instalación:
Instalar CSS peeper es como instalar cualquier otra extensión de navegador e implica solo dos pasos:
Paso 1: Visite CSS peeper en Chrome Web Store o Firefox Add-Ons y haga clic en agregar a Chrome.
Paso 2: Haga clic en Agregar extensión.
Voila, ya tienes tu CSS mirón instalado. Después de una instalación exitosa, puede ver en la esquina superior derecha que la extensión se agregará a su navegador.
Uso:
Uno puede usar esta extensión simplemente yendo a la página web cuyo CSS desea conocer y simplemente haciendo clic en él.
Ejemplo 1: GeeksforGeeks
General:
En la pestaña general, solo se muestra cierta información sobre los encabezados, el CUERPO, el tamaño del archivo CSS y el tiempo de carga.
Colores:
En la pestaña de colores, podemos ver todos los colores utilizados en la página web con su código de color y color. También podemos copiar el código de color desde allí a nuestro portapapeles usando el botón resaltado a continuación.
Activos:
En la pestaña de activos, podemos ver todos los activos utilizados en la página web e incluso exportarlos todos o algunos si es necesario haciendo clic en exportar todo en la parte superior.
Elementos individuales:
Incluso podemos inspeccionar elementos individuales como botones y obtener todo el CSS necesario para hacer ese botón, texto exactamente como el que se muestra en la página web. Para esto, simplemente debe hacer clic en el elemento que desea inspeccionar y el observador CSS mostrará sus propiedades. Aparece un borde rojo en el elemento cuando hace clic en el área que desea inspeccionar, al igual que en «Cursos en GeeksforGeeks».
A continuación se muestra otro ejemplo, aquí hemos inspeccionado otro elemento en esta página. La flecha se utiliza para mostrar el área resaltada.
Ejemplo 2: Youtube
General:
En la pestaña general, solo se muestra información sobre las fuentes, como encabezados, CUERPO, tamaño del archivo CSS y tiempo de carga.
Colores:
En la pestaña de colores, podemos ver todos los colores utilizados en la página web con su código de color y color. También podemos copiar el código de color desde allí a nuestro portapapeles usando el botón resaltado a continuación.
Activos:
En la pestaña de activos, podemos ver todos los activos utilizados en la página web e incluso exportarlos todos o algunos si es necesario haciendo clic en exportar todo en la parte superior.
Elementos individuales:
Incluso podemos inspeccionar elementos individuales como botones y obtener todo el CSS necesario para hacer ese botón, texto exactamente como el que se muestra en la página web. Para esto, simplemente debe hacer clic en el elemento que desea inspeccionar y el observador CSS mostrará sus propiedades. Aparece un borde rojo en el elemento cuando hace clic en el área que desea inspeccionar, al igual que en «Explorar».
A continuación se muestra otro ejemplo, aquí hemos inspeccionado otro elemento en esta página. La flecha se utiliza para mostrar el área resaltada.
En conclusión, CSS peeper es una extensión muy útil para los diseñadores web que quieren echar un vistazo a alguna página web y quieren saber el CSS de la misma. Pero uno debe tener mucho cuidado al usar esta extensión, ya que a menudo requieren la capacidad de leer e incluso cambiar todo en las páginas web que visita, lo que en algunos casos puede provocar accidentes de violaciones de datos, captura de contraseñas, rastreo de navegación, etc.
Publicación traducida automáticamente
Artículo escrito por mtalhahussain y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA