
o Uso de Dispositivo de Modo aproximado, como a sua página se parece e funciona em um dispositivo móvel.
modo de dispositivo é o nome para a colecção livre de funcionalidades no Google DevTools do Chrome que simula dispositivos móveis., Esses recursos incluem:
- Simulando um móvel visor
- de Otimização de rede
- Otimização de CPU
- Simulação de geolocalização
- orientação de Definição
Limitações
Acho que de Dispositivo do Modo como uma primeira ordem de aproximação de como yourpage olha e se sente em um dispositivo móvel. Com o Modo dispositivo você não executa o seu código de um dispositivo móvel. Você simula a experiência do usuário móvel do seu laptop ou desktop.
Existem alguns aspectos dos dispositivos móveis que os DevTools nunca serão capazes de simular., Por exemplo, a arquitetura de CPUs móveis é muito diferente da arquitetura de CPUs desktop laptopor. Quando em dúvida, sua melhor aposta é realmente executar sua página em um dispositivo móvel. Use a depuração remota para ver, alterar, depurar e analisar o código de uma página a partir do seu portátil ou desktop,enquanto ele realmente corre em um dispositivo móvel.
Simule um painel de visualização móvel
Carregue em comutar a barra de ferramentas do dispositivo para abrir o interface que lhe permite simular um painel de visualização móvel.

por omissão, a barra de ferramentas do dispositivo abre no modo de visualização sensível.
modo de visualização sensível
arraste as pegas para redimensionar a área de visualização para as dimensões que necessitar. Ou, indique valores específicos nas caixas de largura e altura. Na Figura 2, a largura é definida para 628
e a altura é definida para662
.

Mostrar consultas de mídia
Para mostrar consulta de mídia pontos de interrupção acima da janela de visualização, clique em Mais opções e, em seguida, seleccione Mostrar mediaqueries.

carregue num ponto de paragem para alterar a largura do ecrã, de modo a que o ponto de paragem seja despoletado.

Defina o tipo de dispositivo
Use a lista de tipos de dispositivo para simular um dispositivo móvel ou um dispositivo de secretária.

a tabela abaixo descreve as diferenças entre as opções. Methodrefers de renderização para saber se o Chrome torna a página num ecrã móvel ou desktop. Cursor iconrefers para que tipo de cursor você vê quando você passa por cima da página., Eventos disparados referem-se se a página dispara touch
ou click
eventos quando você interage com a página.,id=”b8e8c2fed7″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,

Rotate the viewport to landscape orientation
Click Rotate to rotate the viewport to landscape orientation.

Note that the Rotate button disappears if your Device Toolbar is narrow.

Ver também a orientação definida.
mostrar a moldura do dispositivo
ao simular as dimensões de um dispositivo móvel específico como um iPhone 6, Abra Mais opções e depois seleccione Mostrar a moldura do dispositivo para mostrar a moldura física do dispositivo em torno da janela.


Adicionar um personalizado dispositivo móvel
Para adicionar um dispositivo personalizado:
-
Clique na lista de Dispositivos e, em seguida, seleccione Editar.
Figura 11. Seleccionar editar -
Carregue em Adicionar um dispositivo personalizado.
-
Indique um nome, largura e altura para o dispositivo. Os campos de pixel do servidor, string de agente de usuário e tipo de dispositivo são opcionais. O campo do tipo de dispositivo é a lista que é configurada como móvel por padrão.,
Figure 12. Creating a custom device
Show rulers
Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.


Zoom a janela
Use a lista de ampliação para ampliar ou reduzir.

Throttle the network and CPU
To throttle the network and CPU, select Mid-tier mobile or Low-end mobil from the Throttle list.

mid-tier mobile simula fast 3G e acelera a sua CPU de modo que seja 4 vezes menor que o normal. O telemóvel low-end simula o 3G lento e acelera a sua CPU 6 vezes mais lenta do que o normal.Tenha em mente que o estrangulamento é relativo à capacidade normal de seu laptop ou desktop.
lembre-se que a lista de aceleração será escondida se a sua barra de ferramentas do dispositivo for estreita.

acelerar a CPU somente
Para acelerar a CPU e não apenas de rede, vá para o painel de Desempenho, clickCapture Configurações e, em seguida, select4x desaceleração ou 6x de desaceleração da CPU lista.

acelera a rede apenas
para acelerar a rede apenas e não a CPU, ir para o painel de rede e selectFast 3G ou Slow 3G a partir da lista de Aceleração.,

ou carregue em Comando+Shift+P (Mac) ou controlo+Shift+P (Windows, Linux, Chrome OS) para abrir o Menu de comandos, tipo 3G
, e seleccione Activar a aceleração rápida de 3G orEnable slow 3G.

Pode também definir a aceleração da rede a partir do painel de desempenho., Clickcapture Settings and thenselect Fast 3G or Slow 3G from the Network list.

Substituir geolocalização
Para abrir a geolocalização substituindo UI, clique em Personalizar e controlar o DevTools e, em seguida, selectMore ferramentas > Sensores.


seleccione uma das predefinições da lista de geolocalização, ou seleccione uma localização personalizada para indicar as suas próprias coordenadas, ou seleccione a localização indisponível para testar como a sua página se comporta quando a geolocalização está num estado de erro.

Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.


seleccione uma das predefinições da lista de orientação ou seleccione orientação personalizada para definir os seus próprios valores alfa, beta e gama.

Feedback
ver Join the DevTools community for other way to leave feedback.