O Chrome não é muito grande em ferramentas de desenvolvedor, eesse é 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 com aDesign Responsivo Veja que o Mozilla introduziu no Firefox 15. O Responsive Inspector é 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 dea 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 de zoom para ampliá-la.
Para visualizar o CSS usado para codificar as opções de visualizaçã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 bastante bem o Responsive Design View no Firefox; 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 e, em seguida, existe a 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.
Instale o Responsive Inspector na Chrome Web Store
Comentários