15 Las mejores extensiones de navegador para desarrolladores (2019)

El cambio más grande para 2018 ha sido la revisión principal de FireFox, y con ello la forma en que funcionan los complementos en ese navegador. Como resultado, muchos complementos populares ya no se mantienen o no están disponibles.

La mayoría de los complementos para Firefox también están disponibles como extensiones para Google Chrome. En este artículo, intentaremos dar preferencia a los complementos / extensiones de navegador, que en este contexto significa que funcionarán en Firefox, Chrome y Chromium. También le daremos preferencia a las extensiones gratuitas que no se sabe que transmitan su información a terceros y que no son compatibles con los ingresos por publicidad. Nos centraremos más en las extensiones que no lo limitan a una tecnología de desarrollo en particular.

Pocos desarrolladores verían alguna ventaja en el uso de Microsoft Edge como navegador de desarrollo, pero está bien para las pruebas posteriores al desarrollo. Solo se puede esperar que un poco más de 4 en todos los visitantes del sitio 100 lo use, aunque se puede esperar que ese número aumente ligeramente a medida que más usuarios abandonan Internet Explorer.

Aunque hay muchos más usuarios de Chrome que usuarios de Firefox, aquellos en la multitud de TI tienden a preferir Firefox, por lo que hay más y mejores extensiones dirigidas a los desarrolladores en Firefox.

Ahora echemos un vistazo a las mejores extensiones de navegador para desarrolladores y por qué es posible que desee agregarlas a su navegador.

1. Construido con

Cuando te encuentres en un sitio realmente bien hecho y quieras saber cómo lo hicieron, esta extensión te ahorrará mucho tiempo y esfuerzo en buscar en el código fuente. Descargar enlaces: Cromo / cromo, Firefox

2. hacha

Esta es una herramienta de auditoría de accesibilidad. Siempre es mejor intentar hacer que sus páginas sean lo más accesibles posible, y ax le ayudará a evitar la exclusión accidental de un segmento de usuarios de su sitio. Descargar enlaces: Cromo / cromo, Firefox

3. ColorZilla

Una extensión antigua pero aún así, esta extensión le permite muestrear colores directamente desde una página, recuperar códigos de colores, generar gradientes y más. Descargar enlaces: Cromo / cromo, Firefox

4. Desarrollador web

Agrega algunos extras útiles a su navegador para el control de CSS, formularios, imágenes e información. Una de las extensiones más populares jamás hechas. Descargar enlaces: Cromo / cromo, Firefox

5. Rango Woo

Analizar cualquier página web para los datos de SEO. Proporciona un informe potente que muestra todos los aspectos internos de SEO, incluido un puntaje general de SEO, sugerencias de mejora, nube de palabras clave y mucho más. Descargar enlaces: Cromo / cromo, Firefox

6. Tab2QR

Genere un código QR de la página en la que se encuentra y puede visitar la página con su teléfono simplemente escaneando el código QR. Bueno para probar sitios de respuesta, incluso si no los ha creado. Descargar enlaces: Cromo / cromo, Firefox

7. Fabricante de solicitudes HTTP

Esto puede ser muy útil para probar las respuestas de formularios de PHP donde realmente no desea enviar el formulario (lo que podría desencadenar un procesamiento adicional que no necesita probar). Con esta herramienta puedes falsificar solicitudes HTTP sin esfuerzo. Tenga en cuenta que aunque las extensiones de Chrome y Firefox tienen el mismo nombre y hacen las mismas cosas, están hechas por diferentes desarrolladores y no son exactamente iguales. Descargar enlaces: Cromo / cromo, Firefox

8. Prueba de rendimiento de la página

Obtenga rápidamente un informe sobre el rendimiento de su página en diferentes etapas de su viaje a su navegador. Es como una versión más avanzada de tracert. Este solo está disponible en Firefox por ahora. Existen extensiones similares para Chrome y Chromium, pero no son tan ricas en características como esta. Descargar enlaces: Firefox

9. Herramienta de conteo de palabras

Esto realmente puede hacer más de lo que el nombre implica, ya que también le dirá cuántos caracteres y cuántas oraciones hay dentro de un bloque de texto seleccionado (o toda la página). Descargar enlaces: Cromo / cromo, Firefox

10. Lista de verificación del desarrollador web

Asegúrese de estar siguiendo las mejores pautas de práctica de desarrollo web con esta herramienta que mostrará dónde se han deslizado sus estándares. Descargar enlaces: Cromo / cromo, Firefox

11. Editor de mapa de imagen

Una de las tres excelentes extensiones del desarrollador alemán Heinz-Jürgen Boms, esta hace exactamente lo que el nombre dice que hace. Puede generar un mapa de imagen directamente en el navegador simplemente trazando las áreas de la imagen que desea asignar. Descargar enlaces: Firefox

12. Editor de cuadros avanzado

Otra extensión de Heinz-Jürgen Boms, esta es realmente una herramienta de estilo CSS donde puedes construir un marco directamente en el navegador especificando sus atributos. Vale la pena echarle un vistazo a la documentación Antes de empezar a utilizarlo. Descargar enlaces: Firefox

13. Bootstrap Responsive Helper

Esta es una pequeña extensión muy simple que le ayuda a ver rápidamente si sus puntos de interrupción están funcionando correctamente y en qué nivel de arranque es el modo actual. Por supuesto, solo necesitarás esta extensión si realmente trabajas en Bootstrap. La versión de Chrome es desarrollada por Jonathan Defraiteur, y la versión de Firefox es desarrollada por Kevin Bon. Descargar enlaces: Cromo / cromo, Firefox

14. Pruébalo tú mismo HTML5 Editor

Si prefiere mantener las cosas simples y hacer todo su trabajo desde un solo lugar, esta extensión es para usted. Rico en funciones, este editor sensible al contexto funciona directamente en el navegador y admite HTML, CSS y JavaScript. Está lejos de ser perfecto, pero para una edición rápida y sucia sin la molestia de abrir una aplicación separada, hace el trabajo. Descargar enlaces: Firefox

15. Gafas de rayos X

Técnicamente, esta no es una extensión, en realidad es un bookmarklet. Pero funciona tan bien, no pudimos dejarlo fuera de la lista. Aunque está hecho por Mozilla, funciona igual de bien en Chrome porque ambos navegadores son totalmente compatibles con los estándares. Para usarlo, deberás hacer visible tu barra de marcadores. Luego visite la página de descarga, a la que puede acceder a través de los enlaces a continuación, y arrastre el botón Gafas X-Ray a la barra de marcadores. Luego simplemente visite cualquier sitio, active su marcador de Gafas X-Ray, seleccione un elemento en la página y podrá editar el código para ello. Descargar enlaces: Cromo / cromo, Firefox

imagen del encabezado cortesía de

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.