Basados en motor Blink

Google Chrome

Incluye DevTools, extensiones como Lighthouse, WhatFont o ColorZilla.

Cuota de mercado: aproximadamente 65% del mercado global de navegadores (2025).
Herramientas de desarrollador integradas (DevTools): inspección de elementos, consola, red, rendimiento, etc.
Motor utilizado: Blink (basado en WebKit).

Microsoft Edge

Basado en Chromium, con integración de herramientas de desarrollo similares a Chrome.

Cuota de mercado: aproximadamente 5% del mercado global de navegadores (2025).
Compatibilidad con extensiones de Chrome, DevTools integradas.
Motor utilizado: Blink.

Opera

Incluye bloqueador de anuncios, VPN gratuita y mensajería integrada.

Cuota de mercado: alrededor del 2% del mercado global.
Herramientas de desarrollador integradas: DevTools al estilo de Chrome, acceso rápido a recursos y red.
Motor utilizado: Blink (Chromium).

Brave

Enfocado en la privacidad, bloquea rastreadores y anuncios por defecto.

Cuota de mercado: cerca del 1% del mercado global y creciendo.
Herramientas de desarrollador integradas: similares a Chrome (DevTools), con añadidos de privacidad.
Motor utilizado: Blink (Chromium).

Vivaldi

Extremadamente personalizable, con herramientas integradas como notas, capturas y correo.

Cuota de mercado: menos del 1%, orientado a usuarios avanzados.
Herramientas de desarrollador integradas: DevTools de Chromium, con múltiples paneles y accesos personalizados.
Motor utilizado: Blink (Chromium).

Samsung Internet

Navegador móvil basado en Chromium, optimizado para dispositivos Samsung Galaxy.

Cuota de mercado: ~5% en navegación móvil, especialmente popular en Asia y Medio Oriente.
Herramientas de desarrollador integradas: DevTools accesibles mediante depuración remota desde Chrome.
Motor utilizado: Blink (Chromium).

Basados en motor Webkit

Safari

El navegador de Apple con buenas herramientas para depuración en dispositivos iOS/macOS.

Cuota de mercado: aproximadamente 18% (en plataformas Apple).
Inspección de elementos, perfiles de red, depuración móvil.
Motor utilizado: WebKit.

Basados en motor Gecko

Mozilla Firefox

Herramientas potentes para inspección, y visualización de layouts CSS.

Cuota de mercado: aproximadamente 3% del mercado global de navegadores (2025).
Herramientas de desarrollador integradas (DevTools):Inspector de accesibilidad, visualización de CSS Grid y Flexbox.
Motor utilizado: Gecko.

Firefox Developer Edition

Versión avanzada de Firefox con herramientas para desarrolladores web.

Cuota de mercado: Firefox general ~3%, Developer Edition es minoritaria pero influyente.
Herramientas de desarrollador integradas: CSS Grid inspector, herramientas para fuentes, animaciones, almacenamiento, etc.
Motor utilizado: Gecko.

Editores de código

Visual Studio Code

Editor ligero con soporte para extensiones como Live Server, Prettier o Emmet.

Desarrollado por Microsoft, gratuito y de código abierto.
Soporte integrado para Git, depuración, terminal, y más.
Extensiones específicas para HTML, CSS, JavaScript, frameworks, etc.

Sublime Text

Editor muy rápido y minimalista, ideal para usuarios avanzados.

Disponible para Windows, Mac y Linux.
Gran rendimiento con archivos grandes.
Plugins gestionados mediante Package Control.

Brackets

Editor pensado específicamente para diseño web, con previsualización en vivo.

Popularidad: en declive, pero aún útil para principiantes en HTML/CSS.
Características: vista previa en tiempo real, edición rápida de estilos.
Motor: basado en Electron (anteriormente Adobe).

Documentación y ayuda

MDN Web Docs

Documentación oficial y completa sobre HTML, CSS, JavaScript y APIs web.

Mantenido por Mozilla y contribuido por la comunidad.
Contenido claro, actualizado y con ejemplos.
Ideal para consultar sintaxis, propiedades, métodos y compatibilidad.

W3Schools

Sitio de aprendizaje con ejemplos prácticos, editores online y certificaciones.

Tutoriales paso a paso para principiantes.
Editores en línea para probar código.
Recursos para HTML, CSS, JavaScript, SQL, Python y más.

Google Developers

Recursos oficiales para herramientas como Lighthouse, PageSpeed Insights y más.

Documentación de APIs, guías y herramientas de optimización.
Acceso a prácticas recomendadas en rendimiento, accesibilidad y SEO.
Vinculado al ecosistema de productos Google.

Herramientas

Can I Use

Consulta la compatibilidad de tecnologías web en diferentes navegadores.

Contenido: tablas de soporte para HTML, CSS, JS, APIs.
Ideal para: decidir qué tecnologías usar en producción.
Autor: Alexis Deveria.

CodePen

Editor online para crear, probar y compartir código HTML, CSS y JavaScript.

Uso: prototipado rápido, comunidad activa.
Funcionalidad: ver resultados en tiempo real.
Editor: CodePen.io

Google Fonts

Biblioteca gratuita de tipografías optimizadas para la web.

Características: vista previa, descarga, integración vía CSS.
Estilos: serif, sans-serif, display, handwriting, monospace.
Editor: Google.

Figma

Diseño UI/UX y prototipado colaborativo en la nube.

Interfaz intuitiva para diseño vectorial y prototipos interactivos.
Colaboración en tiempo real con comentarios y versiones.
Integración con plugins y herramientas de desarrollo.

Adobe XD

Diseño UI/UX y prototipado con integración en Creative Cloud.

Prototipos interactivos con animaciones y transiciones.
Colaboración y revisión con equipos a través de la nube.
Compatible con otras herramientas Adobe y plugins.

Coolors

Generador rápido y fácil de paletas de colores para diseño.

Explora, crea y exporta combinaciones de colores personalizadas.
Herramientas para ajustar tono, saturación y luminosidad.
Exportación a formatos CSS, PNG y PDF.

Color Hunt

Galería gratuita de paletas de colores modernas y elegantes.

Paletas seleccionadas diariamente por la comunidad.
Filtrado por popularidad y colores predominantes.
Fácil de usar para inspiración rápida en proyectos.

Font Awesome

Biblioteca de iconos escalables para diseño web.

Más de 7,000 iconos gratuitos y premium.
Soporte para SVG, CSS y JavaScript.
Personalización fácil con clases CSS.
Integración sencilla en proyectos web.

✅ Validadores y conformadores de código

W3C HTML Validator

Valida documentos HTML conforme a los estándares del W3C.

Función: Detecta errores y malas prácticas en el marcado.
Tipo: Validador web.

W3C CSS Validator

Comprueba la validez de tus hojas de estilo CSS.

Función: Detecta errores de sintaxis y compatibilidad en CSS.
Tipo: Validador web.

HTML Tidy

Formatea y corrige HTML automáticamente.

Función: Limpieza y estandarización de código HTML.
Tipo: Formateador CLI / Online.

Prettier

Conformador de código para múltiples lenguajes web, ideal para equipos.

Función: Formatea automáticamente HTML, CSS, JS, JSON, etc.
Tipo: CLI / Plugin para editores.

♿ Herramientas para accesibilidad

WAVE

Analiza la accesibilidad de sitios web mostrando errores visualmente.

Función: Verificación de contrastes, etiquetas, ARIA y estructura.
Tipo: Herramienta online y extensión.

axe DevTools

Extensión que integra verificación de accesibilidad en las DevTools del navegador.

Función: Detección automática de errores a11y.
Tipo: Extensión para Chrome/Firefox.

Lighthouse

Auditoría integrada en Chrome que evalúa accesibilidad, rendimiento y SEO.

Función: Evaluación de accesibilidad y buenas prácticas.
Tipo: Herramienta integrada en DevTools.

🎨 Herramientas de color, contraste y tipografía

ColorZilla

Extensión que permite tomar el color exacto de cualquier parte de una página web.

Función: Cuentagotas, analizador de gradientes, historial de colores.
Tipo: Extensión para navegador.

Contrast Checker

Evalúa el contraste entre texto y fondo según criterios WCAG 2.1.

Función: Validación de contraste AA y AAA.
Tipo: Herramienta online.

WhatFont

Extensión que permite identificar fácilmente las fuentes usadas en una web.

Función: Muestra nombre de fuente, tamaño, peso, etc.
Tipo: Extensión para navegador.

⚙️ Otras herramientas útiles

Responsively App

Permite visualizar tu sitio en múltiples resoluciones simultáneamente.

Función: Testing visual responsive.
Tipo: Aplicación de escritorio.

web.dev

Auditoría integral de tu sitio: accesibilidad, rendimiento, SEO y más.

Función: Evaluación y guía de mejora web.
Tipo: Plataforma educativa de Google.