☰

Como posso digitar uma largura específica para meu navegador? Estou usando o Chrome e as ferramentas de desenvolvimento do Chrome

tag-icon • tag-icon google-chrome google-chrome-devtools
Como posso digitar uma largura específica para meu navegador? Estou usando o Chrome e as ferramentas de desenvolvimento do Chrome

Gostaria de digitar um valor de largura para o tamanho da tela para poder criar pontos de interrupção adequados. Muitas vezes me pego tentando aumentar um pixel de cada vez, de um tamanho para outro. Isso nem sempre funciona no Chrome, pois às vezes passo dois pixels por vez. Existe uma maneira de tornar a largura uma largura específica digitada?

Estou usando o Mac OS X. Esta questão tem a ver com ferramentas de desenvolvimento porque estou perguntando como posso usá-las para definir a largura da janela do navegador usando o teclado. Se eu ajustar a largura entre a tela de desenvolvimento e a página com o mouse, um número aparecerá informando a largura e a altura da janela. Isso é útil ao usar pontos de interrupção para criar sites responsivos. Gostaria de saber como fazer isso com meu teclado para não precisar usar o mouse para obter precisão ponto a ponto.

Responder1

Nas Ferramentas do desenvolvedor do Chrome, abra Console e selecione a guia Emulação. Aqui você encontrará "Dispositivo" para selecionar em uma lista de dispositivos comuns (como um iPhone; isso também alterará o agente do usuário enviado ao servidor) e encontrará "Tela" para definir as dimensões manualmente.

Veja tambémEmulação móvelna ajuda do Chrome.

Responder2

No Chrome existe uma extensão chamada "Web Developer Tools". Essa extensão possui um recurso onde você pode redimensionar o navegador para um HxW específico. Você pode até configurar seus próprios tamanhos.

(Não tenho certeza se tenho permissão para postar links, então evitarei fazê-lo).

Editar:

Obrigado Will!

Aqui está o link para o autor da extensão:http://chrispederick.com/work/web-developer/

Responder3

Há também outra extensão chamada Window Resizer (https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh), que faz o mesmo que o mencionado pelo @Marcelo. Isso pode ser útil para qualquer pessoa que use uma versão mais antiga do Chrome.

Responder4

Abordagem alternativa que não requer plug-ins.

  1. Abra as ferramentas integradas para desenvolvedores do Chrome ( F12ou Ctrl + Shift + I)
  2. Selecione a Consoleguia
  3. Digite o seguinte para abrir uma nova janela com o URL atual (a próxima etapa funciona apenas em janelas abertas explicitamente como redimensionáveis) 
    let w = window.open(window.location, "dev resize", "resizable");

Você pode então redimensionar a janela recém-aberta:

  1. Abra o Chrome DevTools na nova janela e digite 
    window.resizeTo(window.outerWidth - 1, window.outerHeight);
  2. Volte para a janela original e digite 
    w.resizeTo(w.outerWidth - 1, w.outerHeight);

Repita o resizeTocomando quantas vezes quiser para diminuir a largura em 1 pixel de cada vez.

Também funciona no Firefox (e provavelmente no Edge, mas não testei)

Testado em:

  • Versão do Chrome111.0.5563.65
  • Versão do Firefox 111.0 (acho que é apenas uma coincidência que os números das versões correspondam entre o Firefox e o Chrome)

informação relacionada