Dev Browser

Você pode

• Digite um endereço ou uma pesquisa em Pesquisar ou digitar URL e toque na tecla Ir do teclado; o X (Cancelar) para de editar.
• Recarregue com Recarregar; enquanto uma página carrega, o mesmo botão vira Parar.
• Abra ou feche o painel DevTools com o botão </> (Ferramentas de desenvolvimento). Um selo vermelho conta os erros do console e para de contar em 99+.
• Abra o Menu do navegador (⋮).

Você não pode, e por quê

• Carregar endereços file://, content://, data:, javascript:, intent:, mailto: ou tel:: digitados na barra, viram uma pesquisa no Google.De propósito
• Escolher outro buscador: o texto que não é um endereço é sempre pesquisado no Google.De propósito
• Abrir endereços http:// simples da sua rede local (por exemplo http://192.168.1.20): a política de rede do app só permite HTTP sem criptografia para localhost, 127.0.0.1 e 10.0.2.2. Use HTTPS ou um túnel.Precisa de rede

Você pode

• Digite o texto em Localizar na página: ele busca enquanto você digita, marca as ocorrências na página e mostra quantas há.
• Pule para a próxima ou a anterior com Próxima e Anterior; a tecla Pesquisar do teclado também vai para a próxima.
• Feche com Fechar; isso limpa a busca.

Você não pode, e por quê

—

Você pode

• Use a página como de costume: role, toque, digite e dê zoom com os dedos.
• Escolha arquivos para um campo de envio de arquivo com o seletor de arquivos do sistema.
• Veja as caixas alert e confirm da própria página.
• Leia os erros de carregamento em um aviso vermelho que você pode copiar: a mensagem do próprio WebView, HTTP <código> <motivo> quando a própria página responde com 400 ou mais, ou WebView render process crashed. Reload the page. Uma falha do processo de renderização da página não fecha o PocketCode.

Você não pode, e por quê

• Seguir links com outros esquemas (tel:, mailto:, intent:, file:…): são ignorados, sem nenhuma mensagem.De propósito
• Carregar conteúdo HTTP dentro de uma página HTTPS (conteúdo misto).De propósito
• Continuar com um certificado TLS inválido, entrar com autenticação HTTP básica ou apresentar um certificado de cliente: a requisição é cancelada. Só as autoridades certificadoras do sistema são confiáveis.De propósito
• Deixar uma página usar a câmera, o microfone ou sua localização: são sempre negados, e o Console mostra um aviso (Warning).De propósito
• Baixar arquivos dentro do app: um link de download abre no navegador do sistema.De propósito
• Abrir janelas pop-up.De propósito

Você pode

• Filtre por nível com os quatro chips (erro, aviso, info, depuração). Cada um mostra sua contagem; toque de novo para remover o filtro. Não há chip para um console.log simples: você os vê quando nenhum filtro está ativo. O número à direita é quantas mensagens estão listadas.
• Esvazie o console com o ícone de lixeira (Limpar).
• Execute JavaScript no frame principal da página: digite em Avaliar JavaScript… e toque em Executar. O comando e seu resultado (cortado em 2.000 caracteres) são adicionados como mensagens comuns, então os filtros se aplicam a eles.
• Traga de volta comandos anteriores com Comando anterior: ele percorre os comandos em ciclo e nunca repete o mesmo comando duas vezes seguidas.
• Copie uma mensagem mantendo o texto dela pressionado.
• As mensagens novas rolam para a vista só se você já estava no fim da lista.

Você não pode, e por quê

• Ver mais do que as últimas 1.000 mensagens: as mais antigas são descartadas. Navegar não esvazia o console, mas abrir o Dev Browser em outro endereço, sim.De propósito

Você pode

• Filtre por tipo com os chips All, Doc, CSS, JS, XHR (inclui fetch) e Img. Essas palavras ficam sempre em inglês.
• Toque em uma requisição para abrir o detalhe dela abaixo da lista, com três abas: Geral (url, method, status, size, time, duration e error), Cabeçalhos da solicitação (os cabeçalhos que o WebView entrega) e Cabeçalhos da resposta.
• Esvazie a lista com o ícone de lixeira (Limpar).

Você não pode, e por quê

• Ver corpos de requisição ou de resposta, cabeçalhos de resposta ou o tipo MIME: a aba Cabeçalhos da resposta sempre mostra Nenhuma, porque nada preenche esses campos ainda.Ainda não
• Dividir uma requisição em fases de DNS, TLS e espera: cada requisição tem uma só barra, porque o WebView não fornece esses tempos.Dispositivo
• Manter a lista de uma página para a outra: ela é esvaziada a cada navegação da página principal (só o novo documento permanece) e guarda no máximo 1.000 requisições.De propósito
• Contar com um status em toda requisição bem-sucedida: ele vem dos dados de Resource Timing da página, e quando o WebView não o informa a coluna mostra um traço. Os status de erro (400 e acima) sempre aparecem.Dispositivo

Você pode

• Toque em uma linha para abrir a chave e o valor completos no detalhe abaixo da lista.
• Toque em Copiar para copiar o valor (Copiado para a área de transferência confirma).
• Toque em Excluir para remover só aquela chave.
• Esvazie uma seção inteira com o ícone vermelho de limpar ao lado do título dela (Limpar).
• Quando a página não tem nada, o painel diz Sem dados de armazenamento e sugere experimentar um site como google.com.

Você não pode, e por quê

• Ver cookies HttpOnly nem os atributos de um cookie (domínio, validade, Secure, SameSite): o painel lê document.cookie, que os esconde dos scripts da página.De propósito
• Excluir um cookie definido para outro caminho ou domínio: excluir um cookie o faz expirar com path=/.De propósito

Você pode

• Toque no ícone de seletor (Selecionar um elemento na página) e depois toque em qualquer coisa da página. O cabeçalho diz Toca num elemento na página; seu próximo toque escolhe o elemento sem ativá-lo (nenhum link é seguido e nenhum formulário é enviado), a árvore abre nesse elemento, destaca-o na página e abre o detalhe dele abaixo da lista. Se o elemento estiver mais fundo do que o instantâneo alcança, escolhe-se o ancestral mais profundo que estiver lá.
• Leia o instantâneo de novo com Atualizar DOM.
• Abra o detalhe de um nó com o ícone (i) dele (Detalhes da entrada): o <tag>, o seletor CSS e o id, a class, os atributos e o text.
• Toque em Copiar seletor para copiar um seletor posicional como html > :nth-child(2) > :nth-child(1); ele usa posições, não ids nem classes.
• Toque em Destacar na página para contornar o elemento em laranja e rolá-lo até o centro. O contorno fica até você destacar outro nó ou recarregar.
• Quando nada está carregado, o painel diz Sem árvore DOM e Carregue uma página e toque em atualizar.

Você não pode, e por quê

• Ver o DOM inteiro: o instantâneo para na profundidade 10, com 100 filhos por nó (um nó … +N more representa o resto), 20 atributos por elemento, 500 caracteres de texto e 200 caracteres por valor de atributo. Só contém elementos (sem comentários) e não olha dentro de iframes nem de Shadow DOM.De propósito

Você pode

• Escreva CSS no editor (Editor) e toque em Aplicar CSS: ele cria, ou atualiza, um elemento <style> com o id pocket-css-inject na página.
• Remova o que você aplicou com Remover (só fica ativo enquanto há algo aplicado).
• O último CSS que você aplicou é aplicado de novo depois de cada carregamento, recarga e navegação, até para outro site, até você tocar em Remover. Ele se perde quando você abre o Dev Browser em outro endereço.
• Passe para Regras (n) para ler as regras da página: o seletor, o número de propriedades, as três primeiras e de onde vem (o endereço da folha de estilo ou inline). Toque em uma regra para copiar as declarações dela para o editor; aplicá-las então sobrescreve a original em vez de editá-la no lugar.
• Quando não há nada para listar, o painel diz Nenhuma regra CSS detectada.

Você não pode, e por quê

• Ver mais de 200 regras, regras dentro de @media, @supports ou @keyframes, ou folhas de estilo que o navegador não deixa uma página ler: só as regras de nível superior são listadas, e as folhas ilegíveis são puladas sem mensagem.De propósito

Você pode

• Leia os cartões em CORE WEB VITALS: Primeira pintura (FP), Primeira pintura com conteúdo (FCP), DOM carregado (DCL) e Carregamento da página sempre; Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Tempo de Bloqueio Total (TBT) quando o valor deles é maior que zero. Cada cartão é colorido como bom, precisa melhorar ou ruim segundo limites fixos (por exemplo, LCP 2.500 e 4.000 ms, CLS 0,1 e 0,25, TBT 200 e 600 ms).
• Leia ESTATÍSTICAS DA PÁGINA: Nós DOM, Recursos e, quando o WebView os expõe, Heap JS e Transferido.
• Leia a CASCATA DE RECURSOS (n): até 50 recursos com o tipo, os últimos 30 caracteres do nome e a duração.
• Toque em Gravar: ele lê as métricas de novo a cada 1,5 segundo até você tocar em Parar. Não grava um trace; é uma atualização ao vivo.

Você não pode, e por quê

• Ver os cartões de LCP, CLS e TBT quando o WebView não os informa: eles só aparecem quando o valor é maior que zero. O heap JS e o tamanho transferido também dependem do que o WebView expõe.Dispositivo

Você pode

• Toque em Executar auditoria (enquanto executa, lê Auditando…). A auditoria só executa quando você toca no botão. Antes da primeira execução, o painel diz Execute uma auditoria para analisar a qualidade da página e Analisa Desempenho, Acessibilidade, Boas Práticas, SEO e PWA.
• Leia cinco medidores de 0 a 100 (Perf, A11y, BP, SEO e PWA; verde a partir de 90, laranja a partir de 50), o endereço auditado e quanto a auditoria levou, em milissegundos.
• Leia o resumo (N passed, N warnings, N failed) e filtre com os chips Todas (n), passed, warnings e failed. Uma verificação passa com 0,9 ou mais, é um aviso de 0,5 até menos de 0,9 e falha abaixo de 0,5.
• Recolha as categorias e abra uma verificação para ler o detalhe dela (até 8 linhas).
• Toque de novo no botão, agora na barra superior, para medir outra vez.

Você não pode, e por quê

• Obter notas comparáveis às do Lighthouse ou do PageSpeed Insights: são estimativas do próprio PocketCode, e algumas verificações olham só uma amostra da página (a profundidade do DOM lê os primeiros 150 elementos, o tamanho da fonte 100 e as áreas de toque 50).De propósito
• Inspecionar um service worker: a verificação só detecta se algum controla a página.De propósito

Você pode

• Alterne entre as abas Histórico e Favoritos.
• Toque em uma entrada para abrir o endereço dela (segue as mesmas regras da barra de endereço) e fechar a caixa de diálogo.
• Exclua um favorito com o ícone de lixeira (Excluir).
• Exclua o histórico inteiro com o ícone vermelho de vassoura (Limpar), mostrado só na aba do histórico quando há entradas. Não pede confirmação.
• Quando uma lista está vazia, ela diz Ainda não há histórico. Navegue por algumas páginas. ou Ainda não há favoritos. Adicione um pelo menu.

Você não pode, e por quê

• Guardar mais de 100 entradas de histórico ou 200 favoritos.De propósito

Você pode

• Edite Título, preenchido com o título da página (ou o endereço dela), e URL, preenchida com o endereço atual.
• Toque em Salvar, que fica desativado enquanto um dos campos está vazio, ou em Cancelar. Favorito adicionado aparece mesmo que o endereço já estivesse salvo; ele não é salvo duas vezes.

Você não pode, e por quê

—

Você pode

• Toque em Confirmar ou Cancelar.
• Ao confirmar, ele limpa o cache HTTP do WebView; o localStorage, o sessionStorage, os cookies visíveis ao JavaScript e os bancos IndexedDB do site da página aberta; e todos os cookies do WebView do app, não só os deste site. Depois o painel Armazenamento é atualizado e aparece Dados do site limpos.
• Ele mantém seu histórico de navegação: nem o histórico de voltar e avançar da página nem a lista Histórico são limpos.

Você não pode, e por quê

• Limpar os dados de um só site: a limpeza de cookies abrange todos os sites que o WebView do app conhece.De propósito