Pendule - Neat Chrome Plugin para un desarrollador web

Hago bastante desarrollo web, y Google Chrome es mi navegador principal en estos días. Chrome es bastante fácil de usar como desarrollador, y también puede configurar Firebug en Chrome Cómo instalar Firebug en IE, Safari, Chrome y Opera Cómo instalar Firebug en IE, Safari, Chrome y Opera Lea más. Pero hoy quería mostrarte una extensión de Chrome diferente llamada Pendule. Pendule complementa la función Inspect Element incorporada de Chrome con algunos extras interesantes.

El menú Pendule

El botón de la barra de herramientas de Pendule muestra un menú de aspecto elegante, dividido en seis áreas principales. En primer lugar, el Hojas de estilo sección. los Ver CSS La opción puede parecer redundante: después de todo, Chrome ya nos permite ver CSS ... o lo hace?

Muchos sitios web utilizan CSS comprimido, y algunos lo comprimen hasta el punto de la ilegibilidad. Si eres el único desarrollador web en tu sitio, puedes decidir por ti mismo cuánto quieres comprimir el CSS. Para mí, no hay tal suerte. Uno de los sitios web en los que trabajo para comprimir el CSS usando una herramienta de PHP llamada Minify, por lo que al inspeccionar el CSS con las herramientas integradas de Chrome se muestra algo como esto:

No es exactamente el formato más legible imaginable. Con Pendule, puedo embellecer fácilmente el CSS de mi lado. Simplemente hago clic en el botón Pendule y hago clic en Ver CSS. Entonces me sale algo como esto:

Todavía no es muy legible. Pero haga clic en el Embellecer CSS botón y ver la magia suceda:

¡Ahora estamos hablando! Si bien no puede cambiar nada en la vista CSS, esta es una gran mejora cuando se trata de CSS comprimido..

Manejo de imagenes

Pendule también ofrece algunas utilidades interesantes relacionadas con la imagen:

“Ver información de imágenes” lo lleva a una página web completamente nueva que contiene todas las imágenes de la página actual, cada una con una gran cantidad de información relacionada:

Esto es útil porque le permite desplazarse por todas las imágenes una por una y auditarlas individualmente. Por ejemplo, algunos sitios web ofrecen contenido de un servidor e imágenes relacionadas de otro servidor (para hacer las cosas más rápido). Con esta vista, puede ver exactamente de dónde proviene cada imagen y rastrear fácilmente las que no se muestran desde la fuente correcta.

También puede leer el texto Alt para cada imagen, que puede ser clave para las ofertas de SEO. Sin embargo, si solo está interesado en el texto Alt, Pendule le permite auditarlo fácilmente en la página, usando la “Mostrar texto alt” opción. Cuando está habilitado, las imágenes en tu página se ven así:

Resulta que este es de un post encantador titulado 3 Signos que Apple está desplazando a Microsoft para convertirse en el imperio del mal, pero el punto aquí es el pequeño “alt =” Fragmento por encima de la imagen. Parece una información sobre herramientas, pero no tienes que mover el mouse sobre ella para que se muestre. Con “Mostrar texto alt”, simplemente puede desplazarse a través de su página web y ver exactamente qué imágenes faltan o Alts incorrectas.

Utilidades Misceláneas

El menú de Utilidades misceláneas de Pendule incluye algunos artículos interesantes. los Ver JavaScript productos una única página web dividida en secciones, una sección para cada script que contiene la página actual. Como el “Ver CSS” opción que empezamos con, Ver JavaScript le permite embellecer el código para que sea legible. JavaScript casi siempre está comprimido (incluso más que CSS), por lo que esta es una opción muy útil si te gusta leer código para descubrir cómo funcionan las cosas.

los “Regla de visualización” la opción atenúa la página y la superpone con un marco que se puede arrastrar y redimensionable con una pequeña etiqueta que muestra sus dimensiones en un momento dado. Esto es muy útil para verificar si los elementos están alineados correctamente, por ejemplo.

Explore más acerca de: Google Chrome, diseño web, desarrollo web, herramientas para webmasters.