Modo responsivo do Chrome ou Breakpane: quando cada um basta

O modo de dispositivo do Chrome DevTools (o «modo responsivo», Ctrl+Shift+M ou ⌘⇧M) é grátis e resolve muita coisa. O Breakpane usa o mesmo motor, o Chromium, e muda onde e como o aparelho aparece.

Conferido em

A versão curta

  • Fique com o modo responsivo do Chrome se você confere o layout de vez em quando, trabalha numa tela só com o navegador aberto ao lado, ou precisa do resto do DevTools (rede, desempenho, Lighthouse) na mesma janela. Ele é grátis e já está instalado.
  • Use o Breakpane se você quer o aparelho sempre na frente do editor enquanto programa, com moldura, barra do Safari ou do Chrome, safe areas de cada iPhone e o modo de app instalado, sem abrir o DevTools a cada vez.

Lado a lado

Dados da documentação oficial e do repositório de cada produto, conferidos em 21 de outubro de 2026.

Breakpane Modo de dispositivo do Chrome DevTools
Plataformas macOS 13 ou mais recente e Windows 10 e 11 Onde o Chrome roda (Windows, macOS, Linux, ChromeOS)
Preço US$ 9 por mês ou US$ 79 por ano (no Brasil, R$ 29 ou R$ 249), com 14 dias grátis sem cartão Grátis
Onde aparece Janela própria, flutuando sobre a área de trabalho e sempre na frente Dentro da aba do Chrome, com o DevTools aberto
Aparelhos com moldura Sim: 41 aparelhos com moldura (iPhone, Android, dobráveis, tablets, notebooks e monitores) e um personalizado Opcional («Show device frame»), só nos aparelhos que têm a arte da moldura
Barra do navegador Barra do Safari ou do Chrome desenhada, ocupando a altura que ocupa no aparelho Não mencionada na documentação
Safe area (entalhe, barra de início) Sim, com as medidas de cada aparelho Não mencionada na documentação do modo de dispositivo
Modo PWA instalado Sim: modo App (standalone) e Tela de início com o ícone do app Não no modo de dispositivo; o Chrome instala o PWA como janela de desktop
Localhost ao vivo Sim: abre o dev server direto e acha os projetos da sua pasta Sim: é a aba em que o seu dev server já está aberto
Agentes de código (MCP) Sim, em Beta: servidor MCP local que abre aparelhos com moldura, toca, rola e audita Sim: o Chrome DevTools MCP emula viewport, toque e user agent, e muito mais (rede, desempenho, Lighthouse)
Ferramentas de depuração Diagnóstico do PWA e auditoria pelos agentes; para o resto, o DevTools O DevTools inteiro: elementos, console, rede, desempenho, Lighthouse
Safari de verdade Não: o motor é o Chromium Não: o motor é o Chromium

Onde o modo responsivo do Chrome é melhor

  • É grátis e já está aí. Não instala nada, não paga nada e funciona em qualquer sistema que rode o Chrome, inclusive Linux e ChromeOS.
  • O DevTools inteiro na mesma janela. Inspecionar elementos, ver a rede, medir desempenho, rodar o Lighthouse e limitar CPU e rede sem sair do aparelho emulado.
  • O MCP do DevTools vai além do layout. O Chrome DevTools MCP dá ao agente rede, console, desempenho, memória e Lighthouse, além de emulação de viewport.

Onde o Breakpane é diferente

  • O aparelho fica na frente, não numa aba. O modo responsivo vive dentro do navegador: quando você volta para o editor, ele some atrás. O Breakpane flutua sobre o editor, sempre visível, e atualiza a cada arquivo salvo.
  • O aparelho inteiro, com as medidas dele. Moldura, safe areas, densidade de pixels e a barra do Safari ou do Chrome ocupando a altura que ocupa no celular. A lista de aparelhos mostra viewport e resolução de cada um.
  • O app instalado. No modo App, o site abre como PWA instalado (display-mode: standalone), com o tamanho do celular, e a Tela de início mostra o ícone do manifesto.
  • Vários aparelhos ao mesmo tempo. Um iPhone, um Android e um notebook abertos lado a lado, cada um na sua janela.

Como decidir

Se você olha o celular uma vez por dia, o modo responsivo do Chrome basta. Se você passa o dia ajustando layout para o celular, teste o Breakpane por 14 dias: o ganho está em não precisar abrir nada para ver o resultado. Os dois usam o Chromium, então nenhum substitui o Safari do iPhone; o guia Como ver o site no modo celular no PC e no Mac mostra o modo responsivo passo a passo, e Como testar o site no iPhone usando Windows explica como chegar ao Safari de verdade.

Fontes

Outras comparações

Google Chrome e Chrome DevTools são marcas de seus respectivos donos. O Breakpane não é afiliado a nenhuma delas. Informações conferidas em 21 de out. de 2026; podem ter mudado.