Get best of the week

Extensiones de navegador requeridas por cada desarrollador web

Los navegadores modernos no son solo excelentes aplicaciones de navegaci贸n web.

Los navegadores tambi茅n son plataformas que ofrecen a los desarrolladores web una tonelada de herramientas 煤tiles para ayudarlos a crear sitios excelentes. A disposici贸n del desarrollador, adem谩s de las herramientas integradas, hay una gran cantidad de extensiones de navegador. El autor del art铆culo, cuya traducci贸n publicamos hoy, ha seleccionado las mejores extensiones, en su opini贸n, que est谩n dise帽adas para ayudar a los programadores a resolver una variedad de tareas que enfrentan. Estas son principalmente extensiones para Google Chrome.



Herramientas de desarrollo para React / Redux y Vue.js


React y Vue.js son herramientas de desarrollo front-end bien conocidas. Para trabajar con ellos de la manera m谩s eficiente posible, vale la pena instalar las extensiones de navegador apropiadas.

La extensi贸n React Developer Tools mejora las capacidades de las herramientas de desarrollador. Utiliz谩ndolo, puede examinar Reaccionar componentes, propiedades pasadas a componentes y el estado de los componentes. Puede aportar beneficios reales a un desarrollador de React.


Reaccionar herramientas de desarrollador

Si encuentra alg煤n problema mientras trabaja con el estado de la aplicaci贸n, la extensi贸n Redux DevTools puede ayudarlo . Se puede usar para trabajar con estados que est谩n organizados de diferentes maneras; funciona especialmente bien cuando se usa con Redux. Por cierto, aqu铆 hay un consejo para ti. Instale esta extensi贸n y visite un sitio como airbnb.com. Utiliza React / Redux, por lo que, con la ayuda de Redux DevTools, podr谩 descubrir c贸mo funciona la gesti贸n del estado de las p谩ginas de este sitio. Para m铆, es muy informativo.

Vue.js devtools es lo mismo que React Developer Tools, pero para Vue.js. Esta extensi贸n es muy conveniente para depurar componentes de Vue y es 煤til para todos los que usan este marco.


Vue.js devtools

Jsonview


驴Alguna vez te has dado cuenta de que en los navegadores de otros programadores los datos JSON se ven claros y precisos, pero no en los tuyos? Quiz谩s el punto es que otros usan la extensi贸n JSONView . Esta extensi贸n formatea de forma r谩pida y precisa los datos JSON. JSONView es definitivamente una de mis extensiones de navegador favoritas.


Jsonview

Sniffer de biblioteca


Library Sniffer es una gran herramienta para cualquiera que quiera descubrir r谩pidamente qu茅 herramientas, bibliotecas o marcos se usaron para crear las p谩ginas que visualizan. Por ejemplo, con la ayuda de Library Sniffer, puede averiguar con qu茅 se cre贸 un sitio: WordPress, Drupal, React, Vue.js, AngularJS ...


Sniffer de biblioteca

CSS Scan 2.0


CSS Scan 2.0 es una extensi贸n 煤til que permite a un desarrollador explorar y copiar CSS simplemente pasando el cursor sobre los elementos de la p谩gina. Es cierto que tiene un menos. El hecho es que para trabajar con 茅l necesitas comprar una licencia.


CSS Scan 2.0

Esta extensi贸n tiene una alternativa gratuita: CSS Peeper . Est谩 dise帽ado principalmente para dise帽adores, y no para aquellos que escriben c贸digo.

desarrollador web


La extensi贸n Web Developer le permite equipar su navegador con un panel que contiene muchas herramientas diferentes. Con su ayuda, por ejemplo, puede desactivar JavaScript en las p谩ginas, controlar la ubicaci贸n de la p谩gina y trabajar con im谩genes. Esta extensi贸n est谩 disponible para Chrome y Firefox. 


desarrollador web

Whatfont


WhatFont es una extensi贸n bastante peque帽a que le permite identificar las fuentes utilizadas en las p谩ginas web. Para saber para qu茅 fuente est谩 dise帽ado el fragmento de texto, es suficiente habilitar la extensi贸n y mover el puntero del mouse sobre este fragmento. Trabajar con 茅l, como puede ver, es extremadamente simple. Al igual que la extensi贸n anterior, puede ser utilizado por aquellos que trabajan en Chrome y aquellos que trabajan en Firefox.


Whatfont

Colorzilla


La extensi贸n ColorZilla se puede usar tanto en Chrome como en Firefox. Le da al desarrollador una herramienta para tomar pruebas de color, una herramienta para elegir colores, un generador de gradiente y otras herramientas 煤tiles para trabajar con color. Por ejemplo, puede usarlo para averiguar qu茅 color tiene un p铆xel en una p谩gina web. Almacena el historial de trabajo con color y contiene una herramienta para ver paletas.


Colorzilla

Espectro


La accesibilidad al contenido es un aspecto importante del desarrollo web moderno. El hecho es que muchas personas tienen una capacidad limitada para interactuar con p谩ginas web. Una de esas limitaciones es la deficiencia de la visi贸n del color (CVD). Afecta la capacidad de una persona para distinguir ciertos colores. La extensi贸n Spectrum le permite investigar sitios para determinar su idoneidad para personas con diversos tipos de ECV.


Espectro

Paleta del sitio


La extensi贸n de la paleta del sitio le permite extraer los colores utilizados en el sitio del sitio y organizarlos como una paleta de colores. Admite varias formas de generar paletas, le permite emitir paletas emitiendo un enlace especial, admite la capacidad de imprimir paletas y puede convertirlas en archivos PDF. Y esto no se limita a la paleta del sitio.


Paleta del sitio

Toby


La extensi贸n Toby est谩 dise帽ada para organizar las pesta帽as del navegador de tal manera que en el curso del trabajo no tenga que mantener abiertas una gran cantidad de pesta帽as. Este es un tipo de panel de control de pesta帽as que es f谩cil de usar con el mouse. Esta extensi贸n puede afectar positivamente la productividad del desarrollador web.


Toby

Talend API Tester


Talend API Tester es una gran extensi贸n que te permite trabajar desde un navegador con varias API. Estas pueden ser API basadas en tecnolog铆as REST, SOAP y HTTP. Esto es similar, por ejemplo, a Postman. La versi贸n gratuita de la extensi贸n admite la ejecuci贸n de todo tipo de solicitudes HTTP, intercambio seguro de datos, autenticaci贸n.


Talend API Tester

Captura de pantalla de p谩gina completa


驴Alguna vez ha querido tomar una captura de pantalla completa de la p谩gina que est谩 viendo sin movimientos innecesarios? Si es as铆, la extensi贸n de captura de pantalla de p谩gina completa puede ser 煤til . Con 茅l, puede obtener capturas de pantalla de todo el contenido de las p谩ginas en formato PDF o como una imagen. Incluso puede funcionar con elementos que admiten desplazamiento y con elementos iframe.


Captura de pantalla de p谩gina completa

Resumen


Revisamos alrededor de una docena de extensiones de navegador para desarrolladores web. Esperamos que encuentre algo entre ellos que le sea 煤til.

隆Queridos lectores! 驴Qu茅 extensiones de navegador utilizas para el desarrollo web?

More articles:


All Articles