No começo: na verdade, eu estava pensando em escrever isso antes, porque não é difícil, mas por que tantas pessoas perguntam, elas não estão perguntando como usar o console, mas não sabem o que o console pode fazer. Eles também sabem que existem console.log e outras coisas, mas não sabem por que usam uma string tão longa em vez de alerta para produzir informações. Aos olhos deles, alerta é suficiente. OK, admito que reclamei um pouco, mas só pretendo apresentar o conhecimento básico da depuração nesta série e não envolverá muito profundo, porque coisas profundas são combinadas com o conhecimento de JS. Se você não atingiu o mesmo nível de JS, mesmo que eu ensine como depurar bugs, quebrar alguns plug-ins, etc., você não sabe o que estou fazendo. Meu objetivo é informar o console e começar com a depuração. Você tem que caminhar pela estrada à frente.
Claro, por favor, flutue ou reclame. .
Diretório da série JS Debug:
De fato, as pessoas de desenvolvimento da Web sabem disso, seja o front-end ou o back-end, mas muitas pessoas se concentram apenas na visualização de HTML e na modificação do CSS, e não usaram o console.
Talvez alguns dos novatos não saibam que existe isso. .
Há muitas informações sobre isso online, mas não fala sobre depuração, apenas apresenta como usá -la. .
Seja Chrome Firefox IE (8 ou acima da versão) ou 360 navegador rápido SOGOU, etc., basta pressionar F12 para abrir o console.
Nosso artigo usa o Chrome como exemplo para explicá -lo, mas não é porque eu gosto do Chrome. . Todo mundo tem suas próprias preferências. .
PS: FF No passado, era tudo Firebug, mas agora é nativo.
Agora clicamos em F12 para abrir o console e clicar no item do console.
Você pode ver meu avatar e algumas linhas de texto, mas ainda existem algumas linhas de coisas abaixo. Por enquanto, vamos ignorá -lo e explicaremos mais tarde.
De fato, para o F12, o nome mais preciso são as ferramentas de desenvolvedor e o console é o console.
PS: Como um tutorial básico, apenas apresentarei a depuração de console e fontes. Por favor, entenda outras funções. .
Clique com o botão direito do mouse no menu Clear Console ou digite o clear () e pressione Enter para limpar o conteúdo do console.
Vamos dar o primeiro passo para produzir informações usando console.log.
Digite console.log ("hehe ..") e console.log ("hehe ..", "haha .."), respectivamente, e pressione Enter para ver o resultado da saída no console.
De fato, é apenas produzir informações, é muito simples. Use -o em vez de alerta e document.write para depurar, e seu trabalho se tornará muito fácil.
Por exemplo, depurar um código de loop, mas existem dezenas ou até centenas de elementos na matriz. Se você alertar, você ficará louco.
Document.Write também não é ruim, mas, para saída de objetos, você só pode ver coisas como [objeto de objeto].
Este é um problema real que muitos novos amigos encontram.
Se você usar o console.log em vez de alerta document.write para produzir informações do objeto, poderá expandir esse objeto no console para visualizar informações específicas.
Por exemplo:
var arr = [{nome: "nima", idade: 22}, {name: "nima", idade: 20}]; para (var i = 0; i <arr.length; i ++) {console.log (arr [i]);}Você pode ver diretamente as informações do objeto sem mostrar [objeto], o que nos deixa confusos.
De repente, você sente que o console. Log é explodido?
De fato, essa é apenas a ponta de seu iceberg. Vou tentar o meu melhor para mostrar algumas de suas vantagens.
Continue com as etapas agora, agora entramos diretamente e pressionamos Enter.
É ainda mais irrestrito? Agora você pode clicar diretamente no objeto para expandir os objetos nessa matriz para visualização, mesmo salvando a saída do loop.
Este é o charme do console, e esse é apenas o recurso mais básico.
Vamos primeiro entender quais métodos estão sob o objeto de console para usarmos.
Digite o console e pressione Enter para expandir o objeto.
Você pode ver algumas cores escuras e claras. As cores escuras são métodos que podemos chamar diretamente. As cores leves representam atributos ou métodos padrão e não há necessidade de se preocupar com a tela. Vou falar sobre isso mais tarde se você tiver a chance.
De fato, os únicos comuns são o Dir. Outros raramente são usados e só serão usados em depuração avançada.
Propriedades auxiliares, como grupo e tabela, estão disponíveis ou não, dependendo da sua preferência. Não gosto muito de usar isso.
Vamos dar uma olhada no passo a passo. De qualquer forma, vamos começar com o Log Dir, e a maior parte da depuração depende deles.
PS: Na verdade, eu deveria ter lhe dado a documentação oficial, mas o Google não conseguiu abri -lo recentemente, para que eu possa verificar as funções de cada método no Baidu.
Encontrei uma versão chinesa, não é ruim. Por favor, leia "Objeto do console" primeiro.
Vamos fazer alguns exercícios após a classe: (Abra o Baidu primeiro e depois abra o console)
1 Visualizar informações do elemento com id kw1 no console
2 Em seguida, use o método console.dir para visualizar as informações do elemento KW1