Como simular a visualização responsiva no celular com esta extensão no Chrome

Testar a responsividade de sites é essencial para desenvolvedores e designers. Em vez de alternar entre múltiplos dispositivos físicos, você pode usar uma extensão do Chrome para simular diferentes tamanhos de tela diretamente no navegador. Este guia mostra como instalar e usar a extensão Mobile simulator - responsive testing tool.

Passo 1: Acesse a página de extensões do Chrome

1. Abra o Google Chrome.
2. Clique nos três pontinhos verticais (⋮) no canto superior direito da barra de endereços.
3. No menu suspenso, selecione More tools → Extensions.
4. Alternativamente, digite chrome://extensions/ diretamente na barra de endereços e pressione Enter.

Passo 2: Abra a Chrome Web Store

Na página de extensões (chrome://extensions/), procure pelo menu de navegação no canto superior esquerdo (três linhas horizontais ou ☰) e clique nele. Em seguida, escolha a opção Open Chrome Web Store.

Você também pode acessar diretamente a loja através deste link: Chrome Web Store.

Passo 3: Procure pela extensão

Na Chrome Web Store, localize a barra de pesquisa no topo da página. Digite exatamente:

Mobile simulator - responsive testing tool

e pressione Enter. A extensão desejada aparecerá como o primeiro resultado da busca.

Passo 4: Instale a extensão

1. Clique no cartão ou título da extensão Mobile simulator - responsive testing tool para abrir sua página de detalhes.
2. Na página da extensão, clique no botão azul Add to Chrome.
3. Uma caixa de diálogo de confirmação aparecerá; clique em Add extension para concluir a instalação.

Após a instalação, o ícone da extensão (que se parece com um smartphone) será exibido ao lado da barra de endereços do Chrome.

Passo 5: Use o simulador para testar sites

1. Navegue até o site que você deseja testar pela responsividade.
2. Clique no ícone da extensão Mobile simulator - responsive testing tool na barra de ferramentas do Chrome.
3. Um painel será aberto com várias opções de dispositivos pré-definidos (como iPhone X, Pixel 2, iPad, etc.) e um campo para inserir dimensões personalizadas.
4. Selecione um dispositivo ou digite uma largura e altura específicas (em pixels).
5. A página será redimensionada automaticamente para simular a tela selecionada, permitindo que você visualize como o site aparece naquele formato.

Dicas para uso avançado

• Modo retrato/paisagem: Muitos simuladores incluem um botão de rotação para alternar entre orientações.
• Teste de múltiplos breakpoints: Mantenha o painel da extensão aberto enquanto desenvolve para alternar rapidamente entre tamanhos de tela.
• User-Agent personalizado: Para testes mais avançados, combine esta extensão com as ferramentas de modo de dispositivo do Chrome DevTools para modificar o User-Agent.
• Atalhos de teclado: Verifique se a extensão oferece atalhos para acelerar seu fluxo de trabalho (geralmente acessíveis em chrome://extensions/shortcuts).

Considerações finais

A extensão Mobile simulator - responsive testing tool oferece uma maneira rápida e eficiente de validar a responsividade de sites sem sair do Chrome. Ao seguir estes simples passos, você pode integrar testes de tela variados ao seu ciclo de desenvolvimento, economizando tempo e garantindo uma melhor experiência do usuário em todos os dispositivos. Experimente hoje mesmo e aprimore seu fluxo de trabalho de design e desenvolvimento web!

Link direto para a extensão (exemplo - verifique a ID atual na Chrome Web Store): Mobile simulator - responsive testing tool

Feito!

Restaurando a Stock ROM no smartphone Motorola/Lenovo (qualquer modelo)

Se essa imagem é similar para você no seu smartphone Motorola/Lenovo, então leia atentamente esse post e escolha um método para fazer a restauração da Stock ROM.

ALERTA:

O Mundo da Computação Integral não se responsabiliza por quaisquer danos causados nos dispositivos.

A responsabilidade é inteiramente do usuário.

Para o SO Windows precisa instalar primeiro os drivers da Motorola no site oficial

Por questão de ser Windows, é bom reiniciar o sistema, por conta novos drivers que instalou no sistema operacional Windows.

Método 1: Software Smart Assistant da Lenovo

Após ter feito o download e a instalação dos drivers da Motorola, o segundo passo é instalar o software Smart Assistant da Lenovo

Procedimento de instalação é padrão Windows, Next>Next>Install>Finish

Ao instalar o software Smart Assistant da Lenovo, abre e entra com a sua conta do Google ou Facebook ou criar uma conta da Lenovo.

Conecte o seu smartphone Motorola no cabo USB do computador, deixe no modo Fastboot, tecle simultaneamente as teclas volume - e power por 5 segundos.

Vai no meu Rescue>Phone será solicitado que informe o IMEI do seu dispositivo conectado e clica no botão pesquisar, irá exibir uma notificação para confirmar se é a versão e modelo correto do dispositivo, conforme se estiver certo. Irá iniciar o download da ROM da versão e modelo do dispositivo após clicar no botão "Download".

Ao concluir o download da ROM, irá exibir o botão "Start Rescue", clique para iniciar o processo de restauração.

Aguarde o processo.

Por fim, o seu dispositivo Motorola/Lenovo irá reiniciar e estará restaurado e zerado como novo novamente.

Método 2: RSD Lite

É pré-requisito instalar os drivers da Motorola antes para o SO Windows no site oficial

Outro software que pode ser utilizado para restaurar o seu smartphone Motorola/Lenovo é RSD Lite

Após instalar o RSD Lite, faça o download da ROM conforme o modelo do seu Motorola

Ao concluir o download da ROM do modelo de seu Motorola/Lenovo, extraia o arquivo da ROM.

Conecte o seu smartphone Motorola/Lenovo no cabo USB do computador, deixe no modo Fastboot, tecle simultaneamente as teclas volume - e power por 5 segundos.

Com o software RSD Lite, no campo Filename ao lado tem um botão com 3 pontos, clica e selecione o diretório onde salvou a ROM, selecione o arquivo flashfile.xml.

Exibindo no campo File Properties os dados correspondente e na coluna Status da tabela o seu dispositivo, clique no botão "Start".

Aguarde o processo.

Por fim, o seu dispositivo Motorola/Lenovo irá reiniciar e estará restaurado e zerado como novo novamente.

Método 3: Sem software, modo manual pelo ADB e Fastboot

Nesse método pode ser utilizado no Windows ou Linux (qualquer distro). No entando no Windows irá precisar instalar os drivers da Motorola no site oficial

OBS: Para funcionar nesse método, é necessário que bootloader do seu dispositivo esteja desbloqueado. Verifique na tela no modo Fastboot, se exibir "oem_locked", significa que está com bootloader bloqueado, nesse irá precisar de uma Box para fazer o desbloqueio do bootloader.

ADB e Fastboot são utilitários essenciais para quem quer gerenciar dispositivos Android no computador.

O ADB significa Android Debug Bridge. É um utilitário de linha de comando que permite que você controle o seu dispositivo Android conectado na porta USB do computador, transferir arquivos entre computador e dispositivo Android.

O Fastboot é uma ferramenta de linha de comando para fazer flashing de dispositivo Android, inicializar um dispositivo Android para o modo de inicialização rápida, etc.

Faça o download SDK Plataform-Tools conforme o sistema operacional que estiver utilizando no momento.

Ao concluir o download do SDK Plataform-Tools, extrair em um diretório e recomenda adicionar o diretório no PATH do SO para facilitar executar os comandos adb e fastboot no terminal, sem precisar acessar o diretório que extraiu.

Use o comando fastboot getvar all para descobrir a versão que precisa pesquisar a ROM do modelo de seu Motorola / Lenovo.

Pesquise o modelo da ROM firmware do seu Motorola/Lenovo

Conecte o seu smartphone Motorola/Lenovo no cabo USB do computador, deixe no modo Fastboot, tecle simultaneamente as teclas volume - e power por 5 segundos.

Execute o script flasfile.sh (Linux) OU flasfile.bat (Windows) no diretório que extraiu a ROM firmware do seu Motorola

Aguarde o processo.

Por fim, o seu dispositivo Motorola/Lenovo irá reiniciar e estará restaurado e zerado como novo novamente.

Método 4: Com bootloader bloqueado (oem_locked)

Nesse método pode ser utilizado se o bootloader estiver bloqueado no smartphone Motorola/Lenovo (qualquer modelo). Verifique os itens necessários antes de prosseguir.

1. Cartão SD de 32GB ou 64GB classe 4 ou classe 10.
2. Adaptador USB para cartão SD.
3. Download da imagem mmcblk0.img

Tendo o cartão SD de 32GB ou 64GB classe 4 ou classe 10 e feito o download da imagem mmcblk0.img, segue os demais procedimentos:

1. Gravar a imagem mmcblk0.img no Rufus se estiver no Windows ou no Etcher se estiver no Linux (qualquer distro).
2. Após gravar a imagem mmcblk0.img no cartão SD de 32GB ou 64GB pelo Rufus ou Etcher, retire o cartão SD do adaptador USB que está no computador e coloca o cartão SD no smartphone Motorola/Lenovo.
3. Conecte o seu smartphone Motorola/Lenovo no cabo USB do computador, deixe no modo Fastboot, tecle simultaneamente as teclas volume - e power por 5 segundos.
4. Siga os procedimentos do método 3.

Dica sobre o Rufus

Caso for utilizar o Rufus para gravar a imagem mmcblk0.img, precisa seguir esses procedimentos.

Em tipo de partição e do sistema de destino deixe selecionado Partição MBR para BIOS ou UEFI.

Sistema de arquivos: Fat32 (Default).

Tamanho do cluster: 16 kilobytes (Default)

Em opções de formatação, deixe marcado as seguintes opções:

Formatação rápida

Criar disco bootável com: Imagem DD

Criar nomes estendidos e ícones

Selecione o arquivo mmcblk0.img

Clique em Iniciar para iniciar o processo.

Aguarde o processo.

Após ter completado todo o processo, feche o programa Rufus e retire o cartão de memória do computador.

Considerações finais

Caso não funcione em nenhum dos métodos explicado, então o problema está na placa do seu dispositivo. Verifique no vídeo seguinte:

Escreva o seu comentário o método com a versão e modelo do seu dispositivo Motorola/Lenovo, que utilizou como feedback.

Feito!

Instalando aplicativos Android no Linux

Nesse howto é apresentado a ferramenta Anbox que permite instalar aplicativos Android no Linux (qualquer distro).

O que é Anbox ?

Anbox é uma ferramenta gratuita e de código aberto que visa permitir que aplicativos para Android sejam executados em distribuições Linux.

Nesse howto é explicado a instalação do Anbox de duas formas, via Snap e via APT (em distros derivados do Debian). Escolhe uma que desejar instalar o Anbox e segue os procedimentos seguintes:

Instalação do Anbox

via Snap

$ sudo snap install anbox

via APT

$ sudo add-apt-repository -y ppa:morphis/anbox-support

$ sudo apt update

$ sudo apt install anbox-modules-dkms

Instalar aplicativos Android no Anbox

Para instalar um aplicativo Android no Linux com o Anbox, digite no terminal

$ adb install $HOME/diretorio-onde-salvou/aplicativo.apk

E para desinstalar um aplicativo Android ?

$ adb uninstall nome-aplicativo

Encontrar aplicativos Android (APK) de código aberto no F-Froid Conhecendo o F-Droid

Desinstalação do Anbox

via Snap

$ sudo snap remove anbox

via APT

$ sudo apt install ppa-purge
$ sudo ppa-purge ppa:morphis/anbox-support

Feito!

Conhecendo o F-Droid

O que é F-Droid?

F-Droid é um repositório de software para Android, servindo uma função semelhante à da Google Play Store. O repositório principal, hospedado pelo projeto, contém apenas aplicativos gratuitos e de código aberto.

Instale o aplicativo F-Droid, acessando o https://f-droid.org no seu smartphone e ao abrir o F-Droid, pesquise o aplicativo gratuito e de código aberto que deseja instalar.

É necessário conceder permissão para instalar aplicativos de terceiros (fora do Google Play Store) no seu smartphone.

As funcionalidades do F-Droid é semelhante ao serviço do Google Play Store.

Feito!

Solucionar erro ao iniciar Emulador Android

Esse post, mostra a solução do erro ao iniciar o emulador Android na IDE Android Studio, que eu e um amigo estávamos com esse erro.

Erro: Cannot launch AVD in emulator
Output:
libGL error: unable to load driver: radeonsi_dri.so
libGL error: driver pointer missing
libGL error: failed to load driver: radeonsi

Solucao:
Se seu sistema for x64, procure o diretório Sdk/tools/lib64/libstdc++/
Geralmente encontra-se em: /home/seuUsuario/Android/Sdk/tools/lib64/libstdc++/ , esse é o caminho default, verifique o caminho onde salvou o Android_SDK para encontrar os diretórios tools/lib64/libstdc++.

Renomeie o arquivo libstdc++.so.6 para libstdc++.so.6.bak
#mv libstdc++.so.6 libstdc++.so.6.bak

Procure o diretório /usr/lib64, se não existir, crie como conforme abaixo:
#mkdir /usr/lib64
Agora execute o comando que faz o link simbólico
OBS: Lembrando de usar o caminho correto onde salvou o Android_SDK
#ln -s /usr/lib64/libstdc++.so.6 /home/seuUsuario/Android/Sdk/tools/lib64/libstdc++
Feche a IDE Android Studio, abre novamente e inicie o emulador.
Feito!