Cada vez mais dispositivos diferentes acessam a web. Celulares, tablets, notebooks, geladeiras, carros, desktops, TVs. A lista continua apenas crescendo.

Como construtores deste ambiente, é nossa responsabilidade ter certeza que nosso site funciona independentemente de onde nossos visitantes o estão acessando.

O BrowserSync é uma ferramenta Open Source capaz de otimizar todo o processo de teste cross-browser, já que ele possibilita a sincronização da navegação entre diversos navegadores e dispositivos.

Ele mudou totalmente a forma como encaro testes em muitos navegadores/dispositivos. Se sincronizar a navegação já não bastasse, o BrowserSync também atualiza automaticamente o CSS e imagens quando você as altera no projeto, assim como atualiza a página caso você modifique um .js, .html, .php e muitos outros tipos de arquivos.

O BrowserSync mudou totalmente a forma como encaro testes multi-plataforma

O ghostMode √© grupo de op√ß√Ķes de sincroniza√ß√£o do BrowserSync que est√° por tr√°s de toda essa m√°gica. Com ele podemos sincronizar:

  • a posi√ß√£o da rolagem;
  • o preenchimento e envio de formul√°rios;
  • cliques em links;
  • e a localiza√ß√£o do usu√°rio no site

ghostMode do BrowserSync em ação

Isto √© extremamente √ļtil quando voc√™ est√° desenvolvendo um site com diversas p√°ginas. Um dos meus √ļltimos projetos conta com mais de 40 p√°ginas, e testar a intera√ß√£o e a consist√™ncia do layout s√≥ foi uma tarefa r√°pida pois eu tinha o BrowserSync para me ajudar. Antes eu teria que verificar em cada dispositivo/browser, um a um.

Para quem est√° desenvolvendo sites responsivos, com ele agora voc√™ poder√° manter alguns dispositivos ao seu redor e j√° receber feedback imediato das suas modifica√ß√Ķes.

Na nova vers√£o do BrowserSync, a 1.0, tamb√©m √© poss√≠vel utilizar o BrowserStack (servi√ßo de virtualiza√ß√£o de browsers online) para testar seu site local em dezenas de combina√ß√Ķes diferentes de sistema operacional e vers√Ķes de navegadores.

Exemplo do uso do BrowserSync com o BrowserStack

A versão 1.0 também trouxe uma outra novidade interessante: integração com localtunnel. Apenas definindo a opção tunnel: true, você vai criar uma url para acessar seu site local de qualquer lugar. Eu certamente usarei esta opção para testar a performance dos meus sites em dispositivos móveis utilizando 3G.

Instalar e usar o BrowserSync é algo muito simples. Ele funciona tanto no Windows quanto no Linux e OS X. Basta executar o seguinte comando:

npm install --global browser-sync

# caso seja preciso, rode o comando com sudo
# $ sudo npm install --global browser-sync

Dê uma olhada na documentação oficial para aprender a utilizá-lo e aproveitar todas as funcionalidades. O BrowserSync também conta com plugins para Grunt e Gulp.

Aliás, se você planeja utilizá-lo com o Grunt, recomendo que você leia um ótimo artigo escrito pelo Vitor Britto sobre como utilizar o BrowserSync com o Grunt. O Gruntfile.js deste site pode servir, também, como inspiração.