Pendule - plugin de cromo aseado para un desarrollador web

Hago un poco de desarrollo web, y Google Chrome es el navegador principal en estos días. Chrome es bastante amistoso con el desarrollador como es, y también se puede configurar Firebug en Chrome. Pero hoy quería mostrarle una extensión de Chrome diferente llamado Pendule. suplementos Pendule incorporada de Chrome función Inspeccionar Elemento con algunos extras interesantes.Cómo instalar Firebug en IE, Safari, Chrome & ÓperaCómo instalar Firebug en IE, Safari, Chrome & ÓperaLee mas

Vídeo: Masterclass: Unity Multiplataforma

El menú Pendule

botón de la barra de pendule se sale un menú mancha de aspecto, dividido en seis áreas principales. En primer lugar, la Las hojas de estilo sección. los Ver CSS opción puede parecer redundante - después de todo, Chrome ya nos permite vista CSS ... ¿o no?

Muchos sitios web utilizan CSS comprimido, con un poco de comprimirlo hasta el punto de ilegibilidad. Si usted es el único desarrollador web en su sitio, es posible que pueda decidir por sí mismo la cantidad que desea comprimir el CSS. Para mí, no hay tal suerte. Uno de los sitios web que trabajo comprime el CSS usando una herramienta llamada PHP Minify, por lo que la inspección de la CSS con herramientas integradas de Chrome muestra algo como esto:

No es exactamente el formato más legible imaginables. Con Pendule, puedo fácilmente embellecer el CSS de mi lado. Me basta con hacer clic en el botón y haga clic en Pendule Ver CSS. Entonces consigo algo como esto:

Todavía no es muy legible. Sin embargo, haga clic en el embellecer CSS botón y ver la magia suceda:

¡Ahora estamos hablando! Aunque no se puede cambiar nada en la vista de CSS, esto 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:

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

Esto es muy útil ya que le permite desplazarse por todas las imágenes una por una y auditar de forma individual. Por ejemplo, algunos sitios web sirven contenido desde un servidor y las imágenes relacionadas de otro servidor (para hacer las cosas más rápido). Con este punto de vista, se puede ver exactamente donde cada imagen viene y fácilmente localizar a los que no se sirven de la fuente correcta.

También puede leer el texto alternativo para cada imagen, que puede ser clave para las ofertas de SEO. Sin embargo, si sólo está interesado en el texto Alt, Pendule permite auditar fácilmente que en la página, utilizando el “Mostrar texto alt" opción. Cuando está activado, las imágenes en su página siguiente aspecto:

Éste pasa a ser de un post titulado preciosa 3 Signos de Apple está desplazando a Microsoft para convertirse en el Imperio del Mal, pero el punto aquí es el pequeño “alt =” fragmento anterior de la imagen. Se parece a una pista, pero no tiene que colocar el ratón sobre ella para hacer que se muestre. Con "Mostrar texto alt”, Sólo puede desplazarse a través de su página web y ver exactamente lo que las imágenes han perdido o Alts incorrecta.

Varios Utilidades

Varios menú Utilidades de paquetes de pendule unos extras interesantes. los Ver javascript productos de una sola página web dividida en secciones, una sección para cada script de la página actual contiene. Al igual que el “Ver CSS”Opción que eligió, Ver javascript le permite embellecer el código para que sea legible. javascript es casi siempre comprimido (incluso más que CSS), por lo que esta es una opción muy útil si te gusta la lectura de códigos de averiguar cómo funcionan las cosas.

Los "pantalla gobernante”Opción se atenúa la página y lo recubre con un marco de tamaño variable, que pueden arrastrarse con una pequeña etiqueta que muestra sus dimensiones en un momento dado. Esto es muy útil para comprobar para ver si los elementos están alineados correctamente, por ejemplo.

Vídeo: Week 9, continued

Pensamientos finales

Si eres un desarrollador web usando Chrome, la primera cosa que debe hacer es conseguir absolutamente cómodo con las propias herramientas de desarrollo integradas de Chrome. Sin embargo, una vez que hayas hecho esto, que probablemente no será capaz de encontrar al menos una o dos herramientas dentro Pendule que complementan muy bien el flujo de trabajo.