Como inspecionar páginas com o Chrome DevTools no Iphone
As vezes precisamos inspecionar páginas usando o DevTools em dispositivos móveis, isso é necessário para que possamos depurar erros no código ou acompanhar os eventos na console. Neste tutorial estou falando especificamente sobre como fazer isso usando o Chrome no Iphone.
Essa tarefa é muito simples quando usamos um desktop para o desenvolvimento, mas se torna mais difícil quando precisamos fazer isso em smartphones.
Mas isso é possível, vou te mostrar nas telas a seguir como fazer.
Para este exemplo vou estar utilizando um código simples em html e um pequeno script JS.
Crie um arquivo html chamado (index.html) com este código.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta content="Página de teste" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Página de teste</title>
</head>
<body>
<h1>Está tudo certo!</h1>
<p>A página foi carregada com sucesso.</p>
</body>
<script src="script.js?1750628108"></script>
</html>
Agora crie um arquivo JavaScript chamado (script.js) com este código.
console.log('INF: Iniciando o script JS');
console.log('INF: Carregando o script JS');
document.addEventListener('DOMContentLoaded', function(){
console.log('INF: Script JS carregado com sucesso');
});
O resultado será uma página bem simples apenas com o necessário.
Agora abra uma nova aba em seu navegador móvel e acesse a seguinte URL:
Na página de inspeção, clique no botão Iniciar registro.
Agora abra a página que você criou ou a página que você deseja inspecionar.
Ao voltar a página de inspeção você poderá depurar e acompanhar os eventos do seu código.
Uma observação importante: Durante os testes eu percebi que o cache pode atrapalhar na inspeção.
Uma dica é sempre atualizar a versão de referência do arquivo JavaScritp.
<script src="script.js?1750628108"></script>