Browser-sync, indispensável para desenvolver sites em vários dispositivos

O mundo front-end é inundado de novas ferramentas todos os dias. Mas poucas realmente se destacam. O Browser-sync é uma delas. Uma ferramenta que é absolutamente indispensável no meu dia a dia desenvolvendo pra Web em vários dispositivos.

Ele resolve um problema bem chato. Você está desenvolvendo e precisa testar a página no navegador. Abre lá no seu navegador preferido no Desktop e vai fazendo. Mas daqui a pouco você precisa abrir no IE, no Opera, Safari, Firefox, Edge. Precisa testar em vários browsers. No mundo mobile responsivo então, vai abrir no seu celular, vai abrir no emulador que tiver na máquina, vai testar no seu iPad, pegar o celular emprestado da esposa pra ver também, e aproveitar pra ver na smart TV da sala.

No fim, você tem um cenário de dezenas de browsers e aparelhos pra testar. Acha um bug no CSS, edita o arquivo e precisa ver se arrumou em todos os lugares. Vai dar um F5 em cada um dos 25 aparelhos que está usando. E assim para cada mudança que fizer no seu código.

Resolve testar se a página interna do site funciona? Vai ter que abri-la nos vários browsers de novo. Quer ver se o formulário de contato funciona? Tem que digitar o email e a mensagem nos 25 aparelhos pra ter certeza. É de ficar louco.

O browser-sync sincroniza o código e as ações de vários navegadores simultaneamente. Teste um, teste em todos.

Ele é uma evolução de uma ideia de live reload que surgiu um tempo atrás. Você edita seu código – CSS, HTML, JS, imagens etc – e o navegador é automaticamente atualizado com o novo código. Sem F5. Está usando 25 navegadores de testes? Ele atualiza o código em todos automaticamente sem intervenção. O browser-sync faz live reload pra você.

Mas a beleza do browser-sync é não parar aí. Ele sincroniza outras ações também. Você clica num item do menu no seu browser principal e ele propaga esse clique em todos os dispositivos conectados. Você dá scroll na página em um browser, e ele dá scroll em todos. Você digita algo no formulário de contato e ele preenche o formulário em todos os aparelhos.

É quase mágico. E facilita muito o desenvolvimento.

Usando Browser-sync

Ele é uma ferramenta em Node.JS. Para instalá-lo, basta um npm install -g browser-sync. Você pode rodá-lo na linha de comando de forma bem simples. Ou, se preferir, há plugins para o Grunt, Gulp e outras ferramentas de build.

O browser-sync tem dois modos. Se estiver fazendo um site estático, ele sobe um servidor HTTP pra você na pasta que estiverem os arquivos. Ou se estiver num cenário mais comum que envolva back-end também (PHP, Java, .NET, qualquer coisa), ele roda em modo proxy.

Para o modo estático, abra o terminal, entre na pasta do projeto e rode:

browser-sync start --server

Ele vai executar seu projeto em http://localhost:3000. Basta abrir essa URL (ou seu IP na rede local) nos vários browsers. Ele vai sincronizar suas ações (cliques, scroll, formulários etc).

Para usar o recurso de livereload de arquivos modificados, passe pra ele que tipo de arquivo deve observar mudanças:

browser-sync start --server --files "css/*.css, *.html"

Agora, se mudar qualquer arquivo CSS ou HTML, ele será recarregado automaticamente em todos os navegadores.

A outra opção, proxy mode para sites dinâmicos, é bem simples também:

browser-sync start --proxy localhost:8080 --files "css/*.css, *.html"

Neste exemplo, ele vai proxyar um servidor rodando em http://localhost:8080. Você acessa ainda pela porta do browser-sync em http://localhost:3000 e ele delega para o servidor na 8080.

Mais uma facilidade bem interessante: rode com --tunnel no final e ele gera uma URL pública pelo serviço localtunnel.me. Muito útil pra usar no celular em 3G por exemplo, ou outros aparelhos fora da sua rede local.

A interface do browser-sync

Além de subir o servidor principal, você ainda pode acessar http://localhost:3001 para acessar uma interface com usuário com muitos recursos.

Screenshot 2015-05-22 14.57.14

Através dela, você pode:

  • Ver o histórico de URLs e reexecutá-las
  • Controlar que tipos de ações devem ser sincronizadas (cliques, scroll, formulários)
  • Debugar remotamente com weinre
  • Abrir uma nova aba em todos os navegadores
  • Forçar o reload de todos os navegadores
  • E outras opções

Uma bem interessante é o debug remoto. No desenvolvimento mobile, é bem comum você abrir o site no celular e debugá-lo no Desktop, usando Inspetor de elementos, Console de JavaScript etc. A maioria dos navegadores modernos possui um modo nativo de Debug Remoto bem simples de usar. Use o Chrome no Desktop pra debugar o Chrome Mobile só plugando um cabo USB. Use o Safari no Desktop pra debugar iOS, ou o Firefox Desktop pra debugar Firefox Mobile.

Mas muitos cenários ainda não tem uma solução simples e nativa. Não há como debugar remotamente o IE no Windows Phone, ou Android anterior a 4.4, ou browsers de smart TVs, video games e smart watches. Mesmo o iOS é possível só se você tiver um Mac. Não dá pra debugar seu iPhone no Windows por exemplo.

Para todos esses cenários, uma das soluções mais usadas é o weinre, um debugador remoto plugável em qualquer plataforma. Ele é baseado em JavaScript e resolve todos esses cenários citados.

Você pode usar o weinre independentemente, mas ele já vem integrado ao browser-sync. Vá até a aba Remote Debug na interface, clique um botão e comece a debugar todos os dispositivos conectados.

Existem vários outros recursos no browser-sync, que é uma ferramenta que melhora a cada versão. Existem alternativas pagas famosas, como o Adobe Edge Inspect ou o Ghostlab. Mas o browser-sync é open source, gratuito e bastante avançado.

Nos nossos cursos de Front-end, HTML, CSS e JavaScript, falamos de ferramentas que facilitam o desenvolvimento Web, como o Grunt, e uso de live reload.

E você, que outras dicas de ferramentas tem para ajuda no desenvolvimento Web?

18 Comentários

  1. Rafael Guerra 17/06/2015 at 17:17 #

    Muito legal esse post, não conhecia a ferramenta. Realmente ferramentas como essa ajudam muito na hora de desenvolver. Vou testar. Parabéns!!

  2. Hugo 17/06/2015 at 17:21 #

    Artigo muito útil. Não conhecia essa ferramenta. Parabéns!

  3. Felipe Chama 17/06/2015 at 20:24 #

    Muito boa a dica Sérgio, não conhecia e quebra um puta galho pra testar em N dispositivos. Abs

  4. Ricardo 17/06/2015 at 22:28 #

    Olá Sérgio, meu parabéns pelo post!

    Porém, ao executar o browsersync pelo terminal aparece a seguinte mensagem:

    :~/BrowserSync
    └──> $ sudo browser-sync start –server
    /usr/bin/env: node: Arquivo ou diretório não encontrado

    Preciso fazer alguma outra configuração?

    Grande abraço!

  5. Avelino 18/06/2015 at 09:00 #

    Muito show Lopes!!!

  6. Paulo 18/06/2015 at 22:38 #

    Também não conhecia a ferramenta, acabei de testa-lá com o grunt e funciona perfeitamente, parabéns pelo post, acredito que ajudará a muito assim como a mim.

    Aos interessados em usar com o grunt:
    http://www.browsersync.io/docs/grunt/

  7. Palmer 19/06/2015 at 10:29 #

    Como sempre o Sérgio trazendo informação totalmente relevante.

  8. Dênis Nunes 19/06/2015 at 14:03 #

    Cara, sensacional Sérgio, já tinha ouvido falar do Browser Sync, mas nunca tinha visto algo sobre ele, é muito simples de se utilizar, que ferramenta sensacional, vlw ótimo post.

  9. Frederick 19/06/2015 at 14:25 #

    Muito bom!

  10. Cesar Kamide 19/06/2015 at 15:44 #

    Show Sérgio, também não conhecia essa ferramenta, vou começar a utilizar. Acredito que vai me ajudar muito pois trabalho com desenvolvimento de apps híbridos. =]

  11. Tiago Celestino 22/06/2015 at 19:04 #

    Já usava com o Gulp e sempre achei uma ferramenta top! Antes de conhecer o Browser-sync, usava o liveReload (http://livereload.com/), só que na época precisava de usar uma extensão para o browser, não era tão “eficiente”.

    Fiquei surpreso com o “admin” do browser-sync. Como sempre usei dentro no grunt ou no gulp, nunca me toquei que a ferramenta vai além deles.

    Show de artigo Lopes.

  12. Henrique 29/06/2015 at 18:02 #

    Olá Sérgio muito bom post.

    Estou com um problema ao instalar o browser-sync, aparece está mensagem de erro…
    ( npm warn optional dep failed, continuing fsevents@0.3.6 ) alguém já teve este erro antes?

  13. Rafael de Castro 08/09/2015 at 13:35 #

    Ótimas dicas, vai ajudar muito mesmo! Vlw.

  14. Diogo Machado 16/09/2015 at 09:22 #

    Instalei direitinho, rodei o comando via proxy, o que não aconteceu comigo é o reload, não estou entendendo o que tá acontecendo, eu olho na linha de comando ele fala que alterou o arquivo, mas não faz o reload :\

  15. Rafael 12/10/2015 at 22:36 #

    Ola amigo, não consegui instalar, da o seguinte erro:
    RAGuerra:~ RAGuerra$ npm install -g browser-sync
    npm ERR! tar.unpack untar error /Users/RAGuerra/.npm/browser-sync/2.9.11/package.tgz
    npm ERR! Darwin 14.5.0
    npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “install” “-g” “browser-sync”
    npm ERR! node v4.2.0
    npm ERR! npm v2.14.7
    npm ERR! path /usr/local/lib/node_modules/browser-sync
    npm ERR! code EACCES
    npm ERR! errno -13
    npm ERR! syscall mkdir

    npm ERR! Error: EACCES: permission denied, mkdir ‘/usr/local/lib/node_modules/browser-sync’
    npm ERR! at Error (native)
    npm ERR! { [Error: EACCES: permission denied, mkdir ‘/usr/local/lib/node_modules/browser-sync’]
    npm ERR! errno: -13,
    npm ERR! code: ‘EACCES’,
    npm ERR! syscall: ‘mkdir’,
    npm ERR! path: ‘/usr/local/lib/node_modules/browser-sync’,
    npm ERR! fstream_type: ‘Directory’,
    npm ERR! fstream_path: ‘/usr/local/lib/node_modules/browser-sync’,
    npm ERR! fstream_class: ‘DirWriter’,
    npm ERR! fstream_stack:
    npm ERR! [ ‘/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25’,
    npm ERR! ‘/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53’,
    npm ERR! ‘FSReqWrap.oncomplete (fs.js:82:15)’ ] }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request:
    npm ERR! /Users/RAGuerra/npm-debug.log

  16. Michel Anderson Lutz Teixeira 19/01/2016 at 09:23 #

    Rafael siga esses passos aqui da documentação do NPM que resolve seu problema. https://docs.npmjs.com/getting-started/fixing-npm-permissions

    ——

    Eu tive problemas com charset iso-8859-1 alguém mais? estou acompanhando uma issue no github do projeto mas nada definitivo foi reportado.

  17. Paulo Homero 12/04/2016 at 11:35 #

    muito boa dica. Parabéns e obrigado. usei no diretorio corrente em que desenvolvia
    browser-sync –server –directory –files “*”

    Para quem se interessa mais: digite browser-sync –help para ver todas as opções de uso.

  18. Lidiane dos Santos Carvalho 28/07/2016 at 10:40 #

    Sergio consigo usar essa ferramenta em testes de homologação ou aceitação?

    obrigada

Deixe uma resposta