Como posso simular dispositivos móveis e depurar no navegador Firefox? [em espera]
Estou à procura de uma ferramenta, que mostra o meu site num modo de dispositivo móvel. Também quero depurar o meu site com ferramentas como Firebug ou ... ainda melhor Posso usar Firebug. O que é uma solução estabelecida para fazer isso?
8 answers
Você pode usar ferramentas próprias navegador (Firefox, ou seja, Chrome...) para depurar o seu JavaScript.
Quanto ao redimensionamento, o Firefox / Chrome dispõe de recursos próprios acessíveis através de Ctrl + Shift + I ou F12 . Indo a página " editor de estilo "e clicando no ícone" design adaptativo/responsivo".Versões antigas do Firefox
Novo Firefox/Firebug
Cromado
*Outra maneira é instalar um addon como " Web Desenvolvimento "
Utilize a Ferramenta de desenho sensível usando Ctrl + Shift + m .
A maioria das aplicações web detecta dispositivos móveis com base nos cabeçalhos HTTP.
Se o seu site também usar cabeçalhos HTTP para identificar o dispositivo móvel, pode fazer o seguinte:
- Adicionar modificar os cabeçalhos ao seu navegador Firefox ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ )
- usando 'plugin' modificar os cabeçalhos:
- seleccione a página cabeçalhos - > seleccione a acção 'adicionar'
- para simular, por exemplo, iPhone adicione um cabeçalho com nome
User-Agent
e valor:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
- carregue no botão 'Adicionar'
- Depois disso você deve ser capaz de ver mobile versão da sua aplicação web no Firefox e usar o plugin Firebug.
Podes usar o dispositivo de adição do Firefox . Com este add-on Você pode usar qualquer agente de usuário que você quiser, por exemplo:
Firefox 28/Android: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/24.0 Firefox/28.0
Se o seu site detectar dispositivos móveis através do agente de utilizador, então você pode testar o seu layout desta forma.
Actualizar Nov ' 17:
Devido à libertação do Firefox 57 e à introdução da extensão da web este add-on infelizmente já não está disponível. Em alternativa, poderá editar a preferência do Firefox general.useragent.override
no seu configuração:
- no tipo de barra de endereços
about:config
- procura por
general.useragent.override
- se a preferência não existir, carregue com o botão direito na página Acerca:configuração, carregue em Novo e seleccione o texto
- diga o novo general de preferência.agente de consumo.anular
- Defina o valor para o agente de utilizador que deseja
Eu usaria a" área de Design sensível " disponível em Ferramentas -> Desenvolvimento Web -> área de Design sensível. Ele vai permitir que você teste o seu CSS contra diferentes tamanhos de tela.
Pode usar o já mencionado incorporado no Modo de desenho sensível (através de ferramentas dev) para definir os tamanhos personalizados do ecrã, em conjunto com o 'plugin' Random Agent Spoofer para modificar os seus cabeçalhos para simular que está a usar um Tablet móvel, etc. Muitos sites especificam o seu conteúdo de acordo com estes cabeçalhos identificados.
Como ferramentas dev, poderá usar as ferramentas de desenvolvimento incorporadas ( Ctrl + Shift + I ou Cmd + Shift + I para o Mac) que já se tornaram bastante semelhantes às ferramentas cromadas dev.