Ferramentas do Chrome para desenvolvimento responsivo

Um dos problemas que encontro no fluxo de trabalho para implementar site responsivo é testar em várias resoluções. A WebStore do Google possui várias extensões que te ajudam nisto (em parte), como exemplo é o Responsive Inspector, entretanto todas as ferramentas possui um problema, quando você redimensiona a tela na sua resolução desejada, o console do desenvolvedor também se reduz.

Por exemplo, você quer testar o seu site no iPhone  (Portrait – 320 px X 480 px ) assim reduz o browser até chegar em 320px, nesse instante você percebe que sua ferramenta de trabalho ficou com pouco espaço para você navegar em seu código e alterar:

1

 

Para melhorar isto, o próprio Chrome possui um ótimo recurso, que fica escondido. Na engrenagem no canto inferior direito, clique nela, em seguida vá em “Overrides“:

2

3

Neste espaço você pode simular vários tipos de browsers, até eventos como giroscópio, geolocalização e toque. Você clica em “device metrics” e você coloca a resolução que precisa e pronto! O seu console permanecerá nas mesmas dimensões, assim você trabalha com mais espaço …

4

5

 

Se você quer aprender mais sobre as ferramentas para desenvolvedor do Chrome  recomendo muito assistir essas vídeo aulas da CodeSchool, gratuitas. Acredito que a mesma substituí qualquer outra ferramenta ou extensão existente. O Chrome é foda! =]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s