O problema

O Chrome não me permite dimensionar a janela do meu navegador abaixo de X pixels de largura !!! 1 #omg #wtf #bbq “

Tenho sido atormentado pela aparente incapacidade do Google Chrome de escalar abaixo de uma certa largura (~ 400px para mim; YMMV) há algum tempo. A natureza do problema está, na verdade, relacionada à forma como o Chrome trata os ícones de extensão: conforme você reduz a janela do navegador horizontalmente, o Chrome redimensiona a barra de endereço, mas garantirá que suas extensões ainda estejam acessíveis.

Obviamente, soluções iniciais, como desativar suas extensões, são proibidas para mim, porque quem quer fazer isso? É demorado e super bruto; Sempre acreditei que havia uma solução mais elegante. Nem preciso dizer que encontrei o que procurava.

• Isenção de responsabilidade : não tenho 100% de certeza de como isso se manifestará em seu caso específico. Com minha configuração, tenho sete ícones visíveis em largura total. Quando eu redimensiono para a largura mais baixa possível, os dois ícones mais à direita (independentemente de como eu os organizo) e parte do terceiro ficam obscurecidos. Depois disso, a janela não diminuirá mais. Não tenho certeza de qual é o “protocolo” real do Chrome para esse comportamento.

<br> <br>

A Solução: “Dock to Right”

O inspetor da web do Chrome vem com a opção “Dock to Right”, que o move da posição padrão na janela de estar na parte inferior, para (surpresa!) No lado direito.

A razão disso ser tão incrível é a localização do inspetor: dentro da janela do navegador, mas fora da janela de visualização. Isso permite que você redimensione a janela de visualização para que seu conteúdo se ajuste (se você estiver trabalhando com um design responsivo, por exemplo), mas a janela do seu navegador permanece do mesmo tamanho, evitando assim o problema de “extensionz be crampin ‘m’style”.

Para fazer isso, basta abrir o inspetor e clicar e segurar o ícone “encaixar na janela principal” / “desencaixar em janela separada” no canto inferior esquerdo. Isso me deixou confuso no início, pois como muitos de vocês provavelmente sabem, o inspetor costumava ter uma opção do tipo caixa de seleção para isso no painel de preferências do inspetor (o ícone de engrenagem no canto inferior direito).

Por que a substituição da “Resolução da tela” não funciona

Bem, pelo menos para mim. Se você abrir a janela de preferências do inspetor e clicar na guia “Substituições”, poderá marcar a caixa ao lado de “Métricas do dispositivo” e definir uma resolução de tela específica. Desnecessário dizer que isso é ridiculamente complicado e simplesmente impraticável, a menos que você precise definir uma largura específica. Não uso essa opção porque entro na rotina de casos de uso com muita facilidade e não percebo que estou desenvolvendo há horas sem verificar se há problemas com outras larguras de janela. Isso, junto com o fato de que eu costumo usar <a href=” https://gist.github.com/4622360 “target=”_blank”> esse carinha </a> para mostrar a largura atual da janela de visualização, torna esta opção é praticamente inútil para mim. Sinta-se à vontade para compartilhar se você gostar dessa abordagem.

Conclusão

De qualquer forma, espero que isso ajude vocês tanto quanto me ajudou. Mesmo no pouco tempo que tenho feito isso, meu fluxo de trabalho melhorou muito. Sinta-se à vontade para comentar com melhorias / insights / receitas de salada de batata / etc. Obrigado por ler!