Esta herramienta es usada por miles de profesionales, permite realizar reconocimientos rápidos sobre una web y es ideal para diseñadores web y SEOs, de ahí su importancia por saber cómo usar Web Developer, una extensión que es de las más completas y útiles.
Tabla de Contenidos
¿Qué es Web Developer?
Web Developer es una extensión realizada por Chris Pederik que ayuda en gran medida a realizar y revisar tareas de diseño web y SEO principalmente. Está distribuida como GNU “General Public License” que la convierte en una herramienta totalmente gratuita y de Open Source.
Para entender qué es Web Developer y su funcionamiento, esta captura realizada de la propia extensión de Google Chrome nos resume en gran medida su función.
Cómo usar Web Developer, tutorial en Español
Esta herramienta dispone de 10 pestañas que nos hacen la vida mucho más fácil. Las pestañas que existen actualmente y que serán explicadas a lo largo de este artículo están divididos en los siguientes grupos.
Deshabilitar
Cuando buscamos fallos o mejoras en una web, la pestaña deshabilitar de Web Development puede servirnos de gran ayuda. Una de esas opciones más funcionales las podemos encontrar con el «Disable JavaScript» que nos hará saber todo lo que necesitamos sobre el JavaScript que está implantado en un sitio web.
La opción de Disable JavaScript está formada por:
Disable JavaScript – Desactivar JavaScript
Disable Notifications – Desactivar Notificaciones
Disable Plugins – Desactivar Plugins
Disable Popups – Desactivar Popups
Reset Disable Features – Resetear
Vista de la ubicación de Disable JavaScript
Cookies
Aunque pocas personas le dan importancia a esta pestaña, puede servir de gran utilidad para saber si nuestra competencia o nuestra propia web está correctamente en funcionamiento y coordinada con otras herramientas de recopilación de datos como Analytics, eliminando las cookies que tienes existentes o añadiendo una Cookie tú mismo.
Disable Cookies – Desactivar Cookies
Delete Domain Cookies – Desactivar Cookies de Dominio
Delete Patch Cookies – Desactivar Cookies Patch
Delete Sessions Cookies – Desactivar Cookies de Sesión
View Cookie Information – Ver Información de las Cookies
Pero espera, eso no termina aquí, como dije, puedes ver todas las cookies que obtienen de ti como os muestro a continuación. Un ejemplo de ello es la captura de cómo recogen mis datos en el sitio web. Aparece un listado completo de todas las cookies que están recogiendo una detrás de otra con esta estructura.
Ajustes en Web Developer sobre Cookies
Vista de Cookies que recoge el sitio web
CSS
Saber cómo usar Web Developer puede quitarle el poder al estilo de la página web y adentrarse en un aspecto inimaginable, ¿Qué haríamos sin el CSS? Un ejemplo de ello es lo que vais a ver a continuación con nuestra propia y maravillosa home donde promocionamos nuestros servicios como agencia de marketing digital en Zaragoza.
CSS Antes de usar Web Developer
Ajustes en Web Developer sobre CSS
CSS después de usar Web Developer
Bueno, aun así tiene un estilo Vintage como los comienzos de Google, usar Web Developer puede ser divertido, lo acabamos de ver. Por otro lado todas las utilidades de esta pestaña CSS de Web Developer son:
Disable All Styles – Deshabilitar todos los estilos
Disable Browser Default Styles – Deshabilitar los estilos predeterminados del navegador
Disable Embedded Styles – Deshabilitar estilos incrustados
Disable Inline Styles – Deshabilitar estilos en línea
Disable Linked Style Sheets – Deshabilitar hojas de estilo vinculadas
Disable Print Styles – Desactivar estilos de impresión
Display Handheld Styles – Mostrar estilos de dispositivos portátiles
Display Print Styles – Mostrar estilos de impresión
Edit CSS – Editar CSS
Reload Linked Style Sheets – Recargar hojas de estilo vinculadas
Use Border Box Model – Usar modelo de cuadro de borde
View CSS – Ver CSS
Formularios
Si no sabes cómo está estructurado un formulario puedes adentrarte con esta extensión aplicando ajustes que te desvelarán el secreto de todo lo que pueda esconder una página de contacto.
No es la función más interesante de todas pero es una función a tener en cuenta, además de poder ver toda la información se puede realizar un vistazo rápido a cualquier formulario con la opción «Display Form Details»
Ajustes en Web Developer sobre formulario
Vista del formulario
Como hemos visto podemos ver toda la estructura de un formulario con bastante facilidad. Aunque esas no sean todas las opciones que tiene esta herramienta es verdaderamente útil en algunos casos.
Las opciones que tiene esta pestaña de la extensión de Google Chrome Web Developer son las siguientes.
Check All Checkboxes – Marque todas las casillas de verificación
Uncheck All Checkboxes – Desmarque todas las casillas de verificación
Clear Form Fields – Campos de formulario claros
Clear Radio Buttons – Botones de radio claros
Convert Form GETs To POSTs – Convertir formularios GET en POST
Convert Form POSTs To GETs – Convertir formularios POST en GET
Convert Select Elements To Text Inputs – Convertir elementos seleccionados en entradas de texto
Convert Text Inputs To Textareas – Convertir entradas de texto en áreas de texto
Display Form Details – Mostrar detalles del formulario
Display Passwords – Mostrar contraseñas
Enable Auto Completion – Habilitar la finalización automática
Enable Form Fields – Habilitar campos de formulario
Expand Select Elements – Expandir Seleccionar elementos
Make Form Fields Writable – Hacer que los campos de formulario se puedan escribir
Outline Form Fields Without Label – Campos de formulario de esquema sin etiqueta
Populate Form Fields – Rellenar campos de formulario
Remove Form Validation – Eliminar validación de formulario
Remove Maximum Lengths – Eliminar longitudes máximas
View Form Information – Ver información del formulario
Imágenes
Aquí hay opciones muy muy interesantes, dejando de lado otras extensiones donde también te muestran datos de imágenes en sitios web, saber cómo usar Web Developer te permite realizar lo mismo en un tiempo récord para tareas de SEO y diseño web.
Para ello vamos a realizar este ejemplo muy simple mostrando la URL de la imagen y su dimensión respecto al tamaño, si quieres saber como reducir el peso de una imagen no dudes en averiguarlo ¡impresionante!
Ajustes de imágenes en Web Developer
Vista con ajustes en imágenes por Web Developer
Es de gran utilidad, estas opciones permiten una revisión rápida y completa sobre las imágenes que estás viendo en la página web e incluso se podría añadir que nos mostrará el «alt» de las imágenes entre otras muchas opciones como las que muestro a continuación.
Disable Images – Desactivar imágenes
Display Alt Attributes – Mostrar atributos alternativos
Display Image Dimensions – Dimensiones de la imagen de visualización
Display Image Paths – Mostrar rutas de imagen
Find Broken Images – Encontrar imágenes rotas
Hide Background Images – Ocultar imágenes de fondo
Hide Images – Ocultar imágenes
Make Images Full Size – Hacer imágenes a tamaño completo
Make Images Invisible – Hacer que las imágenes sean invisibles
Outline All Images – Esquema de todas las imágenes
Outline Background Images – Esquema de imágenes de fondo
Outline Images With Adjusted Dimensions – Imágenes de contorno con dimensiones ajustadas
Outline Images With Empty Alt Attribute – Imágenes de contorno con atributo Alt vacío
Outline Images With Oversized Dimensions – Imágenes de contorno con dimensiones de gran tamaño
Outline Images Without Alt Attributes – Imágenes de contorno sin atributos Alt
Outline Images Without Dimensions – Imágenes de contorno sin dimensiones
Reload Images – Recargar imágenes
Replace Images With Alt Attributes – Reemplazar imágenes con atributos Alt
View Image Information – Ver información de la imagen
Información General
Saber cómo usar Web Developer en esta sección puede ayudarte en muchas tareas SEO. Se trata de una de mis preferidas y que uso diariamente para analizar a la competencia y romper así los esquemas de posicionamiento SEO logrando superarles con una correcta estructura de encabezados <H>.
Ajustes en Web Developer para mostrar <H>
Vista de la estructura web
Simplemente rápido y eficaz para analizar esas web en las que quieres saber cómo han estructurado su contenido en una página o artículo que rankea una KW en Google, simplemente maravilloso y ahorra mucho tiempo.
Display Abbreviations – Mostrar abreviaturas
Display Access Keys – Teclas de acceso a la pantalla
Display Anchors – Anclas de visualización
Display ARIA Roles – Mostrar roles ARIA
Display Div Dimensions – Mostrar dimensiones div
Display Div Order – Mostrar orden div
Display Element Information – Mostrar información del elemento
Display Id & Class Details – ID de pantalla y detalles de la clase
Display Link Details – Mostrar detalles del enlace
Display Objet Information – Mostrar información de objeto
Display Stack Levels – Mostrar niveles de pila
Display Tab Index – Índice de la pestaña de visualización
Display Table Depth – Profundidad de la mesa de visualización
Display Table Information – Mostrar información de la tabla
Display Title Atributes – Mostrar atributos de título
Display Topographic Information – Mostrar información topográfica
Find Duplicate Ids – Encontrar ID duplicadas
View Anchor Information – Ver información del ancla
View Color Information – Ver información de color
View Document Outline – Ver esquema del documento
View JavaScript – Ver JavaScript
View Link Information – Ver información del enlace
Vire Meta Tag Information – Información de la metaetiqueta de Vire
View Response Headers – Ver encabezados de respuesta
Existen miles de extensiones para Google Chrome, algunas de ellas te muestran el color por el que pasa el ratón o sirven como regla para ver las dimensiones y poder ajustar perfectamente una imagen. Para lo primero Web Developer está un poco incompleto pero que decirte, medir mide de maravilla y os lo vamos a enseñar.
Diverso
Como bien dice el nombre de esta pestaña, saber cómo usar Web Developer nos permite ahorrar más extensiones de las que tendríamos de forma habitual, un ejemplo de ello es el uso de la regla de esta extensión de Chrome como en el ejemplo que os pongo con las capturas de Web Developer.
Ajustes en contorno de Web Developer
Midiéndome en la web con Web Developer
Contorno
No es de extrañar que algunas extensiones tengan limitaciones, en esta por ejemplo algunos fallos son el de lograr obtener un color y otro de ellos no mostrar los enlaces que son dofollow o unfollow o al menos no lo tengo sabido, pero aun con todo eso, si nos ayuda a detectarlos.
Ajustes de contorno en web developer
Enlaces salientes de nuestra web
Las opciones dentro de contorno en Web Developer en Español son:
Outline Absolute Positioned Elements – Esquema de elementos posicionados absolutos
Outline Block Level Elements – Elementos de nivel de bloque de línea
Outline Deprecated Elements – Esquema de elementos obsoletos
Outline External Links – Enlaces externos de fuera
Outline Fixed Positioned Elements – Esquema de elementos de posición fija
Outline Floated Elements – Esquema de elementos flotantes
Outline Frames – Marcos de contorno
Outline Headings – Encabezados de esquema
Outline Non-Secure Elements – Esquema de elementos no seguros
Outline Relative Positioned Elements – Esquema de elementos de posición relativa
Outline Table Captions – Leyendas de la tabla de esquema
Outline Table Cells – Esquema de celdas de la tabla
Outline Table – Tabla de esquema
Show Element Tag Names – Mostrar nombres de etiquetas de elementos
Redimensión
El famoso «responsive» es una tarea obligatoria que debe estar operativa en el sitio web. Web Developer nos permite saber en qué dimensiones estamos trabajando y nos puede mostrar cómo se verá en los diferentes dispositivos con sus medidas.
Ajustes responsive en Web Developer
En Birdcom lo hemos comprobado y tenemos a la perfección cada una de las medidas, te invitamos a que lo compruebes con nuestra web y veas cómo se ven.
No olvides que puedes usarlo con tu sitio web y mejorar tu apariencia web. ¿Tienes una llamada a la acción? Asegúrate que se ve en cualquier dispositivo, el usuario que lo visite lo agradecerá.
Opciones en redimensión de Web Developer traducido al Español
Display Window Size – Tamaño de la ventana de visualización
Resize Window – Cambiar el tamaño de la ventana
1024×768
Edit Resize Dimensions – Editar dimensiones de cambio de tamaño
View Responsive Layouts – Ver diseños adaptables
Herramientas
Aunque lo que voy a recomendar a continuación sale totalmente de Web Developer si es verdad que es de gran utilidad para los datos estructurados. Desde Web Developer puedes acceder directamente a la herramienta de Google sobre datos estructurados, un puntazo por parte de esta extensión.
Opciones
Llegamos al tramo final de cómo usar Web Developer con todas sus funciones en español y aunque te guste, esto termina aquí, en esta última pestaña podrás resetear todos los ajustes anteriormente realizados para volver a la normalidad.
Mejores utilidades para saber usar Web Developer
Cómo ver CSS con Web Developer
Accede a la pestaña de CSS > View CSS para encontrar todo el existente en esa página web, poder mejorar, depurar y lograr mejores puntuaciones de rendimiento en el momento de aumentar la velocidad web o WPO de tu sitio web.
Cómo ver anchor text con Web Developer
Sabemos que todo suma para el SEO y los anchor text de las imágenes no se escapan, controla y revisalo rápidamente dirigiéndote a Information > Display Anchors
Como ver los encabezados de una pagina web
Aún con la cantidad de profesionales que existen en el mundo SEO y el diseño web sigo viendo errores que no deberían ocurrir en el momento de asignar encabezados dentro del contenido de forma lógica y controlada, ¡revisa tu web y mejórala! Puedes hacerlo en Information > View Document Outline
Descargar Web Developer
Actualmente está disponible para descargar Web Developer Toolbar en Chrome, Firefox y Ópera, un gran abanico de compatibilidades que nos permite usar esta herramienta sin ningún problema. Os dejamos los enlaces directos de Chrome y Firefox:
Web Developer para Google Chrome
Descarga la versión de Chrome para comenzar a utilizar esta estupenda extesión.
Web Developer para Firefox
Descarga la versión de Firefox, la interfaz puede aparecer diferente a esta guía de Web Developer en español pero seguro que te sirve igual.