Para acessar o site pelo lado do PC, podemos pressionar F12 para abrir a ferramenta de depuração pelo navegador e visualizar logs de saída, requisições de rede, elementos da página web, cookies e outras informações.
No entanto, quando estamos desenvolvendo programas e aplicativos móveis ou mini, há um problema anormal, e não podemos visualizar diretamente as informações anormais. Este artigo recomenda dois painéis de depuração para desenvolvedores front-end.
Primeiro, faça o upload do código-fonte:
vConsole
Um painel leve e escalável para depuração de desenvolvedores front-end para páginas web móveis.
- Verifique os registros do console
- Ver solicitações de rede
- Veja a estrutura dos elementos da página
- Confira Cookies, localStorage e SessionStorage
- Executar manualmente a linha de comando JS
- Plugins personalizados
Endereço:O login do hiperlink está visível.
eruda
Eruda é um painel de depuração projetado para a interface de páginas móveis, semelhante a uma versão mini do DevTools, com funções-chave como: captura de logs de console, verificação do status dos elementos, captura de requisições XHR, exibição de informações locais de armazenamento e cookies, entre outras.
Arrastar e soltar botões, configuração de tamanho da transparência do painel.
- Painel de console: captura logs de console, suporte log, erro, informação, aviso, diretor, tempo/tempoFim, limpar, contagem, assert, tabela; suporte para marcadores de posição, incluindo saída no estilo personalizado %c; Suporte à filtragem por tipo de log e expressão regular; A execução de scripts em JavaScript é suportada.
- Painel de Elements: Ver conteúdo e propriedades da tag; Veja como seu app se estila no DOM; Suporte para destacar elementos de página; Suporte a seleção direta de cliques na tela; Veja os tipos de eventos vinculados no DOM.
- Painel de rede: Capturar solicitações e visualizar informações como dados enviados, cabeçalhos de retorno e conteúdo retornado.
- Painel de recursos: Visualize e limpe localStorage, sessionStorage e cookies. Visualizar scripts de carregamento de página e arquivos de estilo; Veja imagens de carregamento da página.
- Painel de fontes: Veja o código-fonte da página; Formate dados HTML, CSS, JS e JSON.
- Painel de informações: URL de saída e Agente de Usuário; Suporte conteúdo de saída personalizado.
- Painel de trechos: adicionar bordas aos elementos da página; Adicione um carimbo de data para atualizar a página; Trechos de código personalizados são suportados.
Endereço:O login do hiperlink está visível. |
Publicado em 29/06/2020 15:36:20
|
|
|
|
Senhorio