O Responsive Inspector for Chrome é uma ótima ferramenta de aprendizado para o design responsivo

O Chrome não é muito grande em ferramentas de desenvolvedor, e esse é um dos motivos pelos quais o Firefox é o navegador obrigatório para a maioria dos desenvolvedores. No entanto, para aqueles que usam o Chrome, existem muitas extensões disponíveis para ajudá-los nesse sentido. Inspetor Responsivo é uma extensão do Chrome que pode rivalizar corretamente com o Responsive Design View que a Mozilla introduziu no Firefox 15. Inspetor responsivo é uma ferramenta dois em um; mostra os tamanhos de tela para os quais um site é otimizado e permite que você alterne rapidamente para outro diferente do pop-up. Além disso, pode fazer capturas de tela de uma página da web ajustada para qualquer um desses tamanhos. Para sites já otimizados para determinados tamanhos de tela, é possível visualizar o código CSS responsável por isso, tornando-o uma ótima ferramenta de aprendizado para desenvolvedores de design responsivos.

O Responsive Inspector adiciona um botão quadrado ao lado da barra de URL que abre um pop-up. A extensão mostra todos os tamanhos de tela para os quais o site carregado no momento é otimizado por meio de barras. O tamanho da tela é gravado no final de cada barra e uma escala de pixels na parte superior mostra diferentes tamanhos de tela. Mova o mouse sobre a balança e, para cada linha de calibração, um pop aparecerá para mostrar o tamanho da tela que ele representa. Nesse mesmo pop-up, há um botão de redimensionamento e um botão de câmera. Clicar no primeiro redimensionará automaticamente a janela do navegador para essa largura. Você pode clicar no botão da câmera para tirar uma captura de tela, se quiser. A captura de tela pode ser salva na unidade local ou carregada no Behance.net. Se você sentir a necessidade de uma escala de pixels mais fina, clique no botão Mais zoom para ampliá-la.

Para visualizar o CSS usado para codificar as opções de exibição, passe o mouse sobre uma das barras que representam um tamanho de tela para o qual o site foi otimizado e você verá um botão {} aparecer no final. Clique nele para visualizar o código CSS em uma nova guia. O código não é diretamente editável, mas você pode copiá-lo ou usar a ferramenta de inspeção para fazer alterações. O Responsive Inspector imita o Responsive Design View no Firefox bastante bem; na verdade, não seria incorreto dizer que a extensão é um corte acima da ferramenta. Onde o Firefox fornece predefinições de tamanho de tela, o Responsive Inspector fornece uma escala inteira e muita liberdade, além da ferramenta de captura de tela. As predefinições tornariam o Responsive Inspector muito mais útil e deveriam ser adicionadas. Embora mesmo sem esses, a extensão funciona excepcionalmente bem.

Instalar o Responsive Inspector na Chrome Web Store