Depuração
Depurar é descobrir por que o programa faz a coisa errada. Esta página tem um pedido, { drink: "tea", size: "regular" }, e um nome de propriedade errado. O bug lê order.cup. O registo partido é tea / undefined. Depois da correção, a linha da página é fixed / tea / regular.
Não é a lição das classes
A página anterior construiu Drink e SpecialDrink. A linha dela era tea / regular / mint. Ali nada estava partido de propósito.
Aqui os dados já estão corretos. O bug lê order.cup, mas o objeto tem size, não cup. A propriedade real é size.
Lê o valor antes de reescrever a função
console.log mostra um valor e não para o script. console.warn marca um aviso. console.error marca uma falha. Nenhum repara os dados. Só tornam o valor errado visível.
O nome da propriedade está errado
label junta order.drink e order.cup. drink existe, por isso a primeira palavra é tea. cup não existe, por isso a segunda palavra é undefined.
const order = { drink: "tea", size: "regular" };
function label(order) {
return order.drink + " / " + order.cup;
}
console.log(label(order));
O registo é tea / undefined. O objeto ainda tem size. A função nunca o leu.
Marca a falha
Quando size falta, chama console.error("missing size"). Este trecho passa um pedido sem tamanho para o caminho de erro correr. console.error("missing size") não lança.
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
console.log(label({ drink: "tea" }));
A consola mostra o erro missing size, e o texto devolvido é tea / missing size. Um pedido vazio de size devolve tea / missing size. Uma cadeia vazia também conta como ausente, porque !"" é verdadeiro.
Pausa de propósito
A instrução debugger pede ao navegador para pausar só quando as ferramentas de programador estão abertas. Se estiverem fechadas, a instrução não faz nada e a linha seguinte corre.
const order = { drink: "tea", size: "regular" };
debugger;
console.log(order.size);
Com as ferramentas abertas, a execução para em debugger e podes inspecionar order. Com as ferramentas fechadas, o registo seguinte é regular. debugger não é um erro e não muda order.
A lista de chamadas
Se label chama format e format lança, a consola lista os dois nomes. Começa no topo da lista: é a linha que falhou. Depois volta a quem chamou. O bug desta página não lança nada. undefined é um valor, por isso a lista fica em silêncio até registares.
Muda um só nome
Substitui order.cup por order.size. Não acrescentes uma propriedade cup só para calar undefined. O objeto já estava certo. A propriedade real é size.
A linha depois da correção
A página lê size, verifica-o e escreve um estado curto antes do rótulo.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { drink: "tea", size: "regular" };
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
document.getElementById("line").textContent = "fixed / " + label(order);
</script>
</body>
</html>
A linha lê-se fixed / tea / regular. A palavra fixed é só um estado. A bebida e o tamanho vêm do objeto. tea / undefined era a função partida.
No balcão
- Regista
label(order)enquanto lêorder.cup. O registo é tea / undefined. - Passa
{ drink: "tea" }e lê o erro. O texto devolvido é tea / missing size. - Deixa
debuggerno script. Com as ferramentas fechadas, o registo seguinte continua regular. - Lê a linha da página: fixed / tea / regular.
Erros comuns
- Mudar o objeto porque o registo diz undefined
- Tratar
console.logcomo uma pausa;console.lognão para o script - Esperar que
debuggerpare a página com as ferramentas fechadas - Ler
tea / regular / mintda página das classes - Chamar
console.error("missing size")e achar que lança
Fica com isto
console.logmostra um valor e o script continua- A leitura partida é
order.cup; a propriedade real ésize console.error("missing size")marca a falha e não lançadebuggerpausa só enquanto as ferramentas de programador estão abertas- A linha da página lê-se fixed / tea / regular
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo