Joseph Goodman
0 
3447
614
Realizo bastante desarrollo web, y Google Chrome es mi navegador principal en estos días. Chrome es bastante amigable para los desarrolladores, 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. Pero hoy quería mostrarte una extensión de Chrome diferente llamada Pendule. Pendule complementa la función incorporada Inspect Element de Chrome con algunos extras interesantes.
El menú Pendule
El botón de la barra de herramientas de Pendule muestra un menú elegante, dividido en seis áreas principales. Primero, 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 usan CSS comprimido, y algunos lo comprimen hasta el punto de ser ilegible. Si es el único desarrollador web en su sitio, puede decidir por sí mismo cuánto desea comprimir el CSS. Para mí, no hay tanta suerte. Uno de los sitios web para los que trabajo comprime el CSS utilizando una herramienta PHP llamada Minify, por lo que inspeccionar el CSS con las herramientas integradas de Chrome 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 Ver CSS. Entonces obtengo algo como esto:
Todavía no es muy legible. Pero haga clic en el Embellecer CSS abotone y vea la magia suceder:
¡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 imágenes
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 a través de todas las imágenes una por una y auditarlas individualmente. Por ejemplo, algunos sitios web sirven 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 localizar 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, utilizando “Mostrar texto alternativo” opción. Cuando está habilitado, las imágenes en su página se ven así:
Este es de una hermosa publicación titulada 3 señales de que Apple está desplazando a Microsoft para convertirse en el imperio del mal, pero el punto aquí es el pequeño “alt =” fragmento sobre la imagen. Parece una información sobre herramientas, pero no tiene que pasar el mouse sobre él para que se muestre. Con “Mostrar texto alternativo”, simplemente puede desplazarse por su página web y ver exactamente qué imágenes tienen Alts faltantes o incorrectas.
Utilidades varias
El menú de Utilidades varias de Pendule contiene algunas cosas interesantes. los Ver JavaScript productos de una sola página web dividida en secciones, una sección para cada secuencia de comandos que contiene la página actual. Como el “Ver CSS” opción comenzamos 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 le 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 redimensionable y arrastrable 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.
