Uma espécie de ambiente para simulação de testes de aplicações em diferentes navegadores e responsividades
-
É possível simular as ações de scrolls, clicks e input de dados em formulários;
-
Os navegadores são atualizados automaticamente à medida que arquivos alterados são salvos;
-
Facilita o teste de determinadas mesmas funcionalidades em todos os ambientes, facilitando e agilizando o mesmo;
-
Em formulários, por exemplo, enquanto os dados estão sendo preenchidos em um navegador, em todos os outros navegadores e plataformas, que estão ligados à ferramenta, os mesmos dados são adicionados automaticamente. Através disso, é possível verificar o comportamento das páginas ao mesmo tempo da iteração, aumentando a agilidade no ambiente de trabalho;
Necessário Node.js instalado
$ sudo npm install -g browser-sync
- O -g é para uma instalação do pacote globalmente, acessível em todas as pastas;
Na pasta do projeto:
Para páginas estáticas:
$ browser-sync start -f . --server
Para páginas dinâmicas:
$ browser-sync start -f . --proxy
- o -f é para que a aplicação assista as mudanças nos arquivos e faça com que a cada mudança salva a página atualize automaticamente;
- O ponto é para indicar a pasta atual como a que será "startada";
http://localhost:3000 em qualquer navegador para acessar o servidor local
http://localhost:3001 acesso à interface de usuário para, por exemplo, gerenciamento das instâncias abertas
-
Arquivos HTML devem estar nomeados como index.html para serem visualizados na aplicação, se não o navegador retorna o erro Cannot GET /;
-
Abrindo um link que leva a outra página html, que esteja dentro da mesma pasta, mesmo não possuindo o nome index, é aberto sem problemas;
-
Ctrl + c para encerrar o processo;
Browsersync: A ferramenta que veio para acabar com as desculpas!