Depuração de páginas web com o console do navegador

RKA11C Uma das habilidades mais úteis que você pode ter como desenvolvedor é a capacidade de depuração de suas páginas web, utilizando as ferramentas disponíveis para você no navegador. Cada navegador tem um conjunto de ferramentas disponíveis. Seria bom saber qual deles oferece o melhor pacote de ferramentas para lhe ajudar a desenvolver para a web. Ok, eu vou abrir as ferramentas aqui no Chrome. Existem várias formas de fazer isso, mas eu prefiro usar as teclas de atalho. Aqui, no meu sistema, as teclas que uso são "command-option-i". Então, depois que eu uso essas teclas, aparecem as ferramentas para mim. Uma outra maneira de fazer isso é clicar com o botão direito em "inspecionar elemento". Nesse caso, ele abriu as ferramentas e o console html. Repare aqui que eu posso clicar em qualquer elemento na página, e ele destaca o código html para mim. Finalmente, a terceira maneira de fazer isso é usar o menu do navegador. Então, eu vou clicar aqui no "menu", e depois clicar em "ferramentas de desenvolvimento" e pronto. Abriu as ferramentas da mesma maneira. Mas eu recomendo usar mesmo os atalhos do teclado. Bom, repare que eu tenho aqui uma série de recursos para utilizar, mas, por enquanto, vou usar o console javascript. Esse console mostra todos os avisos e erros relacionados com pedidos http, arquivo css, e também pode mostrar qualquer coisa que eu logar aqui. Neste caso, vai ser isso que eu vou mostrar. Eu vou usar o console.log para mostrar uma mensagem. Repare que, enquanto eu digito aqui no código, ele está mostrando uma série de erros de sintaxe, como, por exemplo, "console não está definido". Isso acontece porque ele valida o código de acordo com que eu digito aqui. Então, enquanto eu não terminar de digitar a palavra corretamente, esses erros vão aparecer. Bom, terminei de digitar e espero que não aconteça mais nenhum erro. Finalmente, sem nenhum erro, olha que legal, a minha mensagem foi exibida corretamente! Bom, existe uma série de ferramentas que você pode utilizar e, definitivamente, você deve explorar todas elas. Mas usar o console.log pode lhe ajudar bastante quando precisar depurar algum código no navegador!