Anuncio
Realizo bastante desarrollo web, y Google Chrome es mi navegador principal en estos días. Chrome es bastante amigable para el desarrollador, y también puedes configurarlo Firebug en Chrome Cómo instalar Firebug en IE, Safari, Chrome y Opera Lee mas . Pero hoy quería mostrarte una extensión de Chrome diferente llamada Pendule. Pendule complementa la función incorporada de 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 no?
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 usando una herramienta PHP llamada
Minify, así 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 alternativo, Pendule le permite auditarlo fácilmente en la página, utilizando el "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 Signos que Apple está desplazando a Microsoft para convertirse en el imperio del mal, pero el punto aquí es el pequeño fragmento "alt =" sobre la imagen. Parece una información sobre herramientas, pero no tiene que pasar el mouse sobre ella para que se muestre. Con "Mostrar texto alternativo", Puedes desplazarte por tu 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 una sola página web dividida en secciones, una sección para cada secuencia de comandos que contiene la página actual. Al igual que el "Ver CSS"Opción con la que comenzamos, 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"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 correctamente alineados, por ejemplo.
