Estamos deseando que nos conozcas, pero tú eres lo primero

Utilizamos cookies propias y de terceros para mejorar nuestros servicios mediante el análisis de sus hábitos de navegación. Pulse el botón correspondiente para aceptar su uso, cambiar la configuración o rechazar las cookies. Obtenga más información Aquí.

¿Cómo usar Web Developer? ¡Tutorial en Español!

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.

¿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.

como usar web developer tutorial

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

como-usar-web-developer-en-deshabilitar

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

como usar web developer

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

cookies al usar web developer

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

deshabilitar css con web developer

Ajustes en Web Developer sobre CSS

web developer como usar deshabilitar 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

ajustes css web developer como usar

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

imagenes web developer ajustes

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 web developer medidas

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

Comprueba si es tu web responsive

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.

herramientas en web developer

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.