Web developer options - Conjunto de herramientas muy útiles para programadores y diseñadores webs. ( Funciona como plugin desde Chrome )

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Esta es una herramienta que puede llegar a ser muy útil en ciertas ocasiones a diseñadores de páginas webs, programadores y webmasters.

Con esta utilidad es posible realizar muchas tareas relacionadas al trabajo de depuración y testeo de sitios, entre ellas: realizar validaciones del código fuente, trabajo con formularos webs, ver mucha información y también manipular los elementos que componen una página: imágenes, tablas, etc .., ocultar o remarcar elementos concretos para encontrarlos fácilmente, por ejemplo headers o títulos, los marcos, links externos y muchos otros.

Mas información sobre el programa.

Indice del contenido:

  1. Instalación.
  2. Opciones de Web Developer.
    1. Hojas de estilo ( CSS. )
    2. Imágenes y gráficos. ( images )
    3. Información de elementos HTML ( Information ).
    4. Formularios ( Forms ).
    5. Validar y comprobar CSS, HTML, enlaces y FEEDS.
  3. Otras opciones.

 

1 - Instalación.

Web developer options, no es un software o programa que se instala en la PC, si no mas bien un complemento o addon para Chrome. Este complemento fue creado para el navegador FireFox, y esta nueva versión como se mencionó es sólo para el navegador web de Google. ( Desarrolado por la misma persona)

Este plugin es muy simple de instalar ( mas sencillo que un programa normal de windows ) y además es completamente gratuito y de libre uso ( Es software libre).

Para instalarlo, simplemente descarga el archivo XPI con tu navegador Chrome y listo, ya podrás acceder a las opciones (desde el ícono o botón en la parte superior derecha como se muestra en la siguiente captura de pantalla)

2 - Opciones de Web Developer.

Al presionar en el ícono se desplegará una ventana contextual con las opciones divididas en varias categorías o secciones: CSS, herramientas varias, Formularios etc ..

A continuación se describen algunos de los apartados del plugin junto a capturas de pantalla.

2.1 - Hojas de estilo ( CSS. )

Desde esta opción, se pueden realizar varias acciones sobre los estilos de una página web. Es muy útil para testear, probar, ver como se comporta la página y también como se visualiza entre otros usos.

Desde aquí podrás realizar lo siguiente:

  • Deshabilitar todos los estilos.
  • Deshabilitar los css que se encuentren definidos únicamente en archivos de hoja de estilo externas.
  • Deshabilitar sólo los estilos definidos en el código fuente.
  • Deshabilitar los que se encuentren definidos inline.
  • Otros: Los de impresión, handheld ( para móviles ).

Simplemente para desactivar el que desees, haz clic en la opción y no será necesario recargar nuevamente la página para visualizarla con los cambios.

También, las últimas tres opciones permiten, ver los css organizados, y editar el archivo CSS ( Edit CSS ).

Nota: Los archivos CSS que se pueden editar, sólo son válidos para páginas online, es decir no archivos de páginas webs locales ( Cargadas desde el disco duro).

2.2 - Imágenes. ( images )

Este apartado permite trabajar con las imágenes en la página web. Es útil para varios casos, por ejemplo:

Seleccionado la opción Display Image with empty Alt Attributes, se podrán obtener y visualizar todas las imágenes que no tengan el texto o atributo ALT definidos, muy útil para realizar correcciones y arreglos.

Todas las imágenes que no tengan dicho atributo definido, se remarcarán mediante un recuadro en color rojo.

Desde las opciones Make images invisible, hide image, y hide image backgrounds, se podrán ocultar y remover todas las imágenes y gráficos, inclusive los gráficos de fondo.

Otra opción útil para obtener información sobre los gráficos, es desde View informations, donde se abrirá una página ( nueva pestaña de Chrome), y en ella se listarán todos las imágenes, y junto a cada una tres campos para: visualizar el enlace URL, el ancho y alto de la misma.

Si necesitamos desplegar en la página, el texto de todas las etiquetas ALT de las imágenes, lo podemos hacer pinchando en la opción Display alt attributes. Hecho esto, aparecerá un recuadro de color amarillo junto a cada gráfico y el texto asociado a la etiqueta, como se puede ver en la siguiente captura. (Esto permite corregir y solucionar etiquetas mal escritas de forma fácil y rápida.)

En alguna situación, puede llegar a ser útil echar un vistazo rápido a las dimensiones de cada gráfico ( anchura y altura). Haciendo clic en Display image dimensions se podrá imprimir en la misma página, (junto a cada imagen), el valor de los atributos Height y Width.

2.3 - Información de elementos HTML ( Information )

Esta pestaña contiene opciones para obtener información de forma rápida sobre los elementos HTML que componen la página, por ejemplo:

  • Los metas
  • Los títulos
  • Las capas y DIVS
  • Los atributos
  • Las fuentes
  • Las clases
  • Los anchors
  • Código Javascript
  • Las cabeceras de información devueltas por el servidor web.
  • Entre otras.

Haciendo clic en Display element information, se activará un cursor para el mouse donde permitirá seleccionar el área de la página al cual queremos obtener información. Selecciondo el elemento, se desplegará una ventana con la información, como muestra la siguiente captura.

Nota: los elementos html que puedes seleccionar son cualquier parte de la página: Elementos de formulario, imágenes, tablas, capas, enlaces, texto, etc ..

Visualizar y remarcar anchors.

Remarcar de color amarillo, donde se encuentran definidos los id, divs, clases.

Desplegar el contenido definido en las etiquetas Title

Si hacemos clic en la opción Link information, se abrirá una nueva pestaña en Google Chrome que nos mostrará la cantidad de enlaces externos e internos de la página, y también el listado con todos ellos.

Otra opción es la de poder obtener el detalle completo sobre los metatags, desplegando el nombre del Tag en una columna y en otra columna su valor.

2.4 - Formularios ( Forms )

Desde la ficha Forms se pueden trabajar con los formularios webs. Entre las opciones que incluye tenemos la posibilidad de convertir formularios GET a POST o viceversa.

Otra opción que puede llegar a ser útil es la de visualizar información de los mismos. Desde View Form information, se abrirá una nueva pestaña del navegador, con una tabla que mostrará el detalle con todos los formularios incrustados en la página.

La tabla contiene las siguientes columnas: EL ID del formulario, el nombre, el tipo ( Submit, input), el valor y el tamaño entre otros. También muestra la cantidad de formularios que contiene.

Otras opción para visualizar rápidamente el valor de cada form en la página ( remarcado de color amarillo )

2.5 - Validar y comprobar CSS, HTML, enlaces y FEEDS.

La opción Tools, contiene un conjunto de herramientas para comprobar y realizar validaciones de varios elementos:

  • Las hojas de estilo.
  • El código fuente.
  • Los links externos
  • Accesibilidad ( sección 508)
  • Validar css y html en modo local.

Por ejemplo al hacer clic en la opción Validate Links, se podrá comprobar mediante dicho servicio, y luego de terminado el proceso de validación, visualizar un sumario con los posibles errores dentro de enlaces y anchors rotos. Entre otras opciones, también realizar comprobaciones de enlaces de forma recursiva, indicando el nivel o profundidad de los directorios ( ).

Nota: Para este caso, la validación se realiza utilizando el servicio web del sitio http://validator.w3.org

3 - Otras opciones

  • Desplegar fácilmente un color picker para obtener un valor concreto de color de algún elemento de la página actual ( Pestaña Misceláneos).
  • Redimensionar la ventana del navegador para probar distintas resoluciones ( Opción Resize).
  • Visualizar elementos ocultos de la página.
  • Validar WCAG.
  • Otros.

Requerimientos de instalación y uso.

Navegador Google Chrome 4.0 o superior

Videos tutoriales.

No hay mas vistas previas.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Software patrocinado.


Detalles y descargar

Web:
https://chrome.google.com
Licencia:
Gratis
Versión:
1.0
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: