👶🏼 👩🏽‍🍳 🍎 Extensões de navegador exigidas por todo desenvolvedor web 📑 🤛🏿 👨‍👧‍👧

Navegadores modernos não são apenas ótimos aplicativos de navegação na web.

Os navegadores também são plataformas que oferecem aos desenvolvedores da Web uma tonelada de ferramentas úteis para ajudá-los a criar ótimos sites. À disposição do desenvolvedor, além das ferramentas internas, há um grande número de extensões de navegador. O autor do artigo, cuja tradução estamos publicando hoje, selecionou as melhores, em sua opinião, extensões projetadas para ajudar os programadores a resolver uma variedade de tarefas que enfrentam. Estas são principalmente extensões para o Google Chrome.

Ferramentas de desenvolvimento para React / Redux e Vue.js

React e Vue.js são ferramentas de desenvolvimento de front-end conhecidas. Para trabalhar com eles da maneira mais eficiente possível, vale a pena instalar as extensões de navegador apropriadas.

A extensão React Developer Tools aprimora os recursos das ferramentas do desenvolvedor. Utilizando-o, você pode examinar os componentes React, as propriedades passadas para os componentes e o estado dos componentes. Pode trazer benefícios reais para um desenvolvedor do React.

React Developer Tools

Se você encontrar algum problema ao trabalhar com o estado do aplicativo, a extensão Redux DevTools pode ajudá-lo . Ele pode ser usado para trabalhar com estados organizados de maneiras diferentes; funciona especialmente bem quando usado com o Redux. A propósito, aqui está uma dica para você. Instale esta extensão e visite um site como airbnb.com. Ele usa React / Redux, para que você, com a ajuda do Redux DevTools, possa descobrir como é organizado o gerenciamento do estado das páginas neste site. Para mim - por isso é muito informativo.

O Vue.js devtools é o mesmo que o React Developer Tools, mas o Vue.js. Essa extensão é muito conveniente para depurar componentes do Vue e é útil para todos que usam essa estrutura.

Vue.js devtools

Jsonview

Você já teve a ideia de que, nos navegadores de outros programadores, os dados JSON parecem claros e precisos, mas não os seus? Talvez o ponto principal seja que outras pessoas usem a extensão JSONView . Essa extensão formata com rapidez e precisão os dados JSON. O JSONView é definitivamente uma das minhas extensões de navegador favoritas.

Jsonview

Sniffer de biblioteca

O Library Sniffer é uma ótima ferramenta para quem deseja descobrir rapidamente quais ferramentas, bibliotecas ou estruturas foram usadas para criar as páginas exibidas. Por exemplo, com a ajuda do Library Sniffer, você pode descobrir com o que um site foi criado: WordPress, Drupal, React, Vue.js, AngularJS ...

Sniffer de biblioteca

CSS Scan 2.0

CSS Scan 2.0 é uma extensão útil que permite que um desenvolvedor explore e copie CSS simplesmente passando o mouse sobre os elementos da página. É verdade que ele tem um menos. O fato é que, para trabalhar com isso, você precisa comprar uma licença.

CSS Scan 2.0

Esta extensão possui uma alternativa gratuita - CSS Peeper . Ele foi desenvolvido principalmente para designers, e não para quem escreve código.

Desenvolvedor Web

A extensão Web Developer permite equipar seu navegador com um painel que contém muitas ferramentas diferentes. Com a ajuda deles, por exemplo, você pode desativar o JavaScript nas páginas, controlar o local da página e trabalhar com imagens. Esta extensão está disponível para Chrome e Firefox.

Desenvolvedor Web

Whatfont

O WhatFont é uma extensão muito pequena que permite identificar as fontes usadas nas páginas da web. Para descobrir para qual fonte o fragmento de texto foi projetado, basta ativar a extensão e mover o ponteiro do mouse sobre esse fragmento. Trabalhar com ele, como você vê, é extremamente simples. Como a extensão anterior, ele pode ser usado por quem trabalha no Chrome e por quem trabalha no Firefox.

Whatfont

Colorzilla

A extensão ColorZilla pode ser usada no Chrome e no Firefox. Ele fornece ao desenvolvedor uma ferramenta para obter provas de cores, uma ferramenta para escolher cores, um gerador de gradiente e outras ferramentas úteis para trabalhar com cores. Por exemplo, você pode usá-lo para descobrir a cor de qualquer pixel em uma página da web. Ele armazena o histórico de trabalho com cores e contém uma ferramenta para visualizar paletas.

Colorzilla

Espectro

A acessibilidade ao conteúdo é um aspecto importante do desenvolvimento moderno da web. O fato é que muitas pessoas têm capacidade limitada de interagir com páginas da web. Uma dessas limitações é a deficiência de visão colorida (DCV). Afeta a capacidade de uma pessoa de distinguir certas cores. A extensão Spectrum permite pesquisar sites quanto à sua adequação para pessoas com vários tipos de DCV.

Espectro

Paleta do site

A extensão da paleta do site permite extrair as cores usadas no site e organizá-las como uma paleta de cores. Ele suporta várias maneiras de gerar paletas, permite emitir paletas emitindo um link especial, suporta a capacidade de imprimir paletas e é capaz de convertê-las em arquivos PDF. E isso não se limita à Paleta do site.

Paleta do site

Toby

A extensão Toby foi projetada para organizar as guias do navegador de tal maneira que, no decorrer do trabalho, você não precisaria manter um grande número de guias abertas. Esse é um tipo de painel de controle de guias fácil de usar com o mouse. Essa extensão pode afetar positivamente a produtividade do desenvolvedor da web.

Toby

Talend API Tester

O Talend API Tester é uma excelente extensão que permite trabalhar a partir de um navegador com várias APIs. Podem ser APIs baseadas nas tecnologias REST, SOAP e HTTP. Isso é semelhante, por exemplo, ao Postman. A versão gratuita da extensão suporta a execução de todos os tipos de solicitações HTTP, troca segura de dados, autenticação.

Talend API Tester

Captura de tela de página inteira

Alguma vez você já quis tirar uma captura de tela completa da página que está visualizando rapidamente e sem movimentos desnecessários? Nesse caso, a extensão de captura de tela em tela cheia pode ser útil . Com ele, você pode obter capturas de tela de todo o conteúdo das páginas em formato PDF ou como imagem. Pode até trabalhar com elementos que suportam rolagem e com elementos iframe.

Captura de tela de página inteira

Sumário

Analisamos cerca de uma dúzia de extensões de navegador para desenvolvedores da web. Esperamos que você encontre algo útil entre eles.

Queridos leitores! Quais extensões de navegador você usa para desenvolvimento web?

Extensões de navegador exigidas por todo desenvolvedor web