Primeiro, abra o Baidu e depois pressione F12 para abri -lo. Se não for o item do console, clique no item do console, pois queremos operá -lo no console. .
Veja o seguinte conteúdo:
Ok, vamos limpar o conteúdo primeiro, você pode clicar com o botão direito do mouse e selecionar o menu Clear Console ou inserir Clear ().
Em seguida, inserimos document.getElementById ('KW1'); e pressione Enter para ver as informações do elemento com ID KW1.
Não é muito simples? O próximo passo é usar o console.dir para visualizar as informações do elemento.
Digite console.dir (document.getElementById ('kw1')); E então pressione Enter e algo estranho sai.
Você pode clicar nessa coisa e ela expandirá e listará todos os métodos de atributo. Simplificando, é o método de atributo DOM desse elemento.
Ok, não vou entrar em detalhes sobre isso. De qualquer forma, o método dir também é uma das ferramentas de depuração.
Essas perguntas são realmente um prenúncio do conteúdo de hoje. Acabamos de ver como ver um elemento e seus métodos de atributo no console.
De fato, o console nos fornece muitas APIs de linha de comando. Para simplificar, é uma função que apenas o console pode usar.
Atualmente, os métodos e propriedades do console são: (Chrome 34)
A cópia do código é a seguinte:
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$ 3", "$ 4", "$ _"]
PS: Quanto a como ver essas coisas, falarei sobre elas mais tarde. Receio que você não os entenda por enquanto.
Você também pode se referir ao "Objeto do Console #3. API da linha de comando" para ver alguns de seus usos.
O que costumamos usar é $, $ _, $ 0- $ 4, dir, chaves, valores. Se você estiver interessado ou quiser aprender em profundidade, leia os materiais você mesmo.
A cópia do código é a seguinte:
$ // simplesmente entende que é documento.QuerySelector.
$$ // simplesmente entende que é documento.QuerySelectorAll.
$ _ // é o valor da expressão anterior e o objeto de console nº 3. A API da linha de comando é explicada.
$ 0- $ 4 // é o elemento DOM selecionado nos últimos 5 painéis de elementos e será discutido posteriormente.
dir // é realmente console.dir
chaves // Pegue o nome do objeto, retorne uma matriz composta por nomes -chave
valores // remove o valor do objeto e retorne uma matriz de valores
OK, realmente não é difícil de entender pela explicação, mas não foi feita antes, e ninguém sabe o que vai acontecer.
Damn Baidu, na verdade carregou o jQuery 1.10.2. Originalmente, o ambiente de Baidu é limpo e é mais apropriado falar sobre isso, mas acabou sendo um tolo. .
Vamos mudar para Soso para explicar. . Abra http://www.so.com/ e depois abra o console.
Agora usamos $ para visualizar o elemento com a consulta ID (como o elemento KW1 no Baidu) e, em seguida, verifique o método de atributo do elemento.
A mesma função de antes, mas o código agora é muito simples. Usando as três propriedades e métodos do console de $, dir, $ _, isso facilita instantaneamente a depuração?
Algumas pessoas podem dizer que hoje em dia, o jQuery geralmente é usado, o que devo fazer se quiser verificar isso?
De volta ao Baidu, vamos fazer a operação agora.
É um pouco diferente daquele agora, porque a etapa $ ('#kw1') recebe um objeto jQuery, então o método de atributo jQuery que você também vem.
Se você quiser ver o método de atributo do elemento real, adicione um [0]
Obviamente, se você deseja apenas ver o objeto jQuery, não há problema. . Quanto à depuração, é claro que você precisa experimentá -lo enquanto se ajusta. .
De fato, existe outro método muito simples, que é clicar no ícone de lupa no canto superior esquerdo e selecionar a caixa de entrada.
Dessa forma, podemos usar diretamente $ 0 para visualizá -lo. Introduzimos US $ 0 a US $ 4 agora. Esta é a função, é simples.
Vamos falar brevemente sobre chaves e valores, que serão usados posteriormente. . Mas algumas pessoas ainda gostam de visualizá -lo diretamente.
A cópia do código é a seguinte:
var obj = {nome: 'nima', idade: 22, desc: 'seda um'};
Eu acredito que você pode entendê -lo de relance e entender isso.
Ok, o conteúdo de hoje é quase tudo isso. Claro, eu tenho que experimentar sozinho, caso contrário, não poderei realmente aprender esses pontos de conhecimento. .
Se pudermos lê -lo, todos seremos os principais artilheiros do exame de admissão da faculdade, certo?
Por fim, deixe-me dizer um pequeno truque, que é usar os comandos que eu digitei antes, você não precisa entrar novamente. Você pode pesquisar e descer as teclas de seta ↑ e ↓. Esta função é semelhante à CMD e é muito conveniente. .
Exercícios após a classe: (agora pressione F12 diretamente para abrir o console)
1. Verifique o código -fonte da função recomendado por esta função abaixo do artigo (é claro que você pode clicar na recomendação, eu não o parei. O (∩_∩) o)
2. Posição para o local do arquivo em que a função está localizada. (O clímax está chegando)
3. Modifique a função para invalidá -la. (De fato, é apenas modificação e depuração globais simples.)
Finalmente, se o que é dito está errado, ou não consegue entender, ou o progresso não pode acompanhar, etc., poste e reclame.
Além disso, se você quiser que eu adicione algo ou depure quaisquer projetos ou plug-ins reais, também pode publicá-lo. Obviamente, se for um projeto muito problemático, não posso escrever um artigo para apresentá -lo. Eu não sou um artigo. . .