Os artigos anteriores introduziram algum conhecimento básico da série JS Debugging. Desta vez, os irmãos Code Brothers trouxeram pontos de interrupção JS e métodos dinâmicos de depuração. Amigos que precisam podem se referir a ele.
Exercícios pós-classe que saí ontem 1. Analise como a função VoteSepost é implementada conforme recomendado.
Na verdade, vimos o código -fonte. Basta ler o código -fonte e você pode saber como ele é implementado.
função votepost (n, t, i) {i || (i =! 1); var r = {blogApp: CurrentBlogApp, PostId: n, VoteType: T, Isabandon: i}; $ ("#digg_tips"). css ("cor", "vermelho"). html ("commit ..."); $ .ajax ({url: "/mvc/vote/voteblogpost.aspx", type: "post", datatype: "json", contentType: "Application/json; charset = utf-8", dados: json.stringify (r), success: function (n) {if (n. n. "_count"); (n.status == 500? $ ("#digg_tips"). html ("Desculpe! Ocorreu um erro! Por favor, feedback para [email protected]"): $ ("#digg_tips"). html (n.Responsext))}}); }É quase assim.
PS: Eu uso o código formatado de texto sublime, que é um pouco diferente do resultado após a formatação no console do Chrome.
Você também pode experimentar esta ferramenta de formatação on -line, o efeito é semelhante: Javascript online lindo
Depois de ler o código simplesmente, você pode saber que essa função possui 3 parâmetros. O primeiro é o PostId, que é o ID do artigo, e o segundo é recomendação (DIGG) ou oposição (Bury).
Mas o terceiro não foi usado, e o valor padrão é falso
Olhando para baixo, ele exibe a string "enviar ..." em #digg_tips e depois envia os dados para o plano de fundo através do Ajax.
Depois de retornar os dados, se o n.issuccess for verdadeiro, ele será +1 no ID da contagem correspondente de (#digg_count) ou objeção (#bury_count).
No entanto, se o valor de Isabandono for verdadeiro, a contagem -1.
Em seguida, podemos adivinhar que o terceiro parâmetro é usado para revogar a recomendação ou objeção. Simplificando, cliquei na recomendação, mas não quero recomendar agora. Posso passar no terceiro parâmetro verdadeiro para alcançar o efeito do cancelamento da recomendação.
Vamos testá -lo mais tarde.
Em seguida, as informações n.message retornadas pelo servidor são exibidas em #Digg_Tips.
Se ocorrer um erro no AJAX, é 500. Ele solicitará "Desculpe! Um erro ocorreu! Por favor, feedback para [email protected]" outros statuss solicitam diretamente o servidor para a mensagem de erro retornada.
Este é o processo geral, porque essa função é simples, pode ser vista rapidamente.
Alguns novos amigos podem ter perguntado: como você sabe qual é o valor CurrentBlogApp, n, t, i?
Então vamos para o próximo passo e depuração dinâmica. A depuração dinâmica é um método muito útil para projetos compilados.
Primeiro, localize o código -fonte do VotePtost (eu disse isso ontem e não o entendo muito, depois volte e dê uma olhada primeiro.)
Tão fácil, localizamos o código -fonte.
Em seguida, clicamos no número 92 e executamos a operação do ponto de interrupção.
Por que não de interrupção na linha 91?
Como a linha 91 é a parte da declaração da função, não podemos definir um ponto de interrupção, podemos definir um ponto de interrupção no código a ser executado pela função.
Vendo que o número de linha da linha 91 ficou azul, indicando que houve um ponto de interrupção neste local. Ao mesmo tempo, podemos ver os pontos de interrupção caídos na coluna Points de interrupção à direita.
A coluna dos pontos de interrupção gerencia todos os pontos de interrupção, que podem ser facilmente redirecionados para a posição correspondente do ponto de interrupção e serão usados no futuro.
Agora que terminamos de definir o ponto de interrupção, clicaremos na recomendação. . (Embora eu sinta que estou traindo recomendações, eu realmente não pensei assim. Acabei de encontrar um botão para praticar.)
Quando você clica no botão de recomendação, algo mágico aconteceu. Em vez de executar a função de recomendação, você pulou para o ponto de interrupção que acabamos de abaixar no painel de fontes do console.
Agora, você pode não apenas ver a variável atual na coluna Variáveis de escopo à direita, mas também mover o mouse diretamente para qualquer variável para visualizar o valor da variável.
A coluna Variáveis do escopo exibe o escopo atual e seu escopo pai, além de fechamentos.
Não é super conveniente? . (As variáveis de escopo me ajudaram muito quando eu estava aprendendo fechamentos.)
Vamos para o próximo passo e pressionar F10 3 vezes para ver algo assim.
Toda vez que pressionamos o F10, executaremos uma declaração. Depois de pressioná -lo três vezes agora, executaremos $ ("#DIGG_TIPS"). CSS ("Color", "Red"). Html ("enviar ...");
Para que possamos ver os #Digg_Tips exibindo as palavras no envio na página.
Mas quando pressionamos o F10 novamente, descobrimos que ele continuou a executar todo o caminho sem inserir a função de retorno de chamada dentro do Ajax.
Esta é uma pergunta confusa, e eu quero me concentrar nela.
Para funções de retorno de chamada como essa, especialmente assíncronas, precisamos o próximo ponto de interrupção dentro da função de retorno de chamada.
Portanto, podemos simplesmente definir um ponto de interrupção na linha 96. Agora clicamos na recomendação e ainda paramos na linha 92. Podemos apenas pressionar F8 e quebrá -lo na função de retorno de chamada do Ajax.
Agora, podemos depurar os dados de retorno de chamada e também podemos descobrir que há uma coisa de fechamento adicional nas variáveis de escopo à direita, que é o fechamento.
Se você não consegue entender agora, basta passar por isso. Essa coisa precisa ser introduzida em grande quantidade de tempo e não pode ser explicada em apenas algumas palavras. De qualquer forma, o console é muito poderoso.
Ao ver o fechamento, também vemos os dados de retorno n do Ajax. É óbvio que minha propriedade ISSUCCESS é falsa e não foi bem -sucedida porque retorna uma mensagem "não pode recomendar seu próprio conteúdo".
Não é muito interessante? A depuração dinâmica facilita a localização de bugs?
Em seguida, vamos experimentar o terceiro parâmetro.
Entramos no VotePost (CB_ENTRYID, 'DIGG', TRUE); e pressione Enter.
Ele também parou no ponto de interrupção da linha 92, para que não depra nisso e digite diretamente a função de retorno de chamada do AJAX do F8.
Aqui, vemos claramente que quando o terceiro parâmetro é verdadeiro, a recomendação é realmente cancelada. Ao mesmo tempo, você pode ver que o número de recomendação é de fato -1, mesmo que seja atualizado.
Desta vez, usamos duas teclas de atalho F10 e F8. Vamos apresentá -los em detalhes amanhã. Hoje vamos aprender a depuração básica primeiro.
Exercícios pós-classe: (melhorando a dificuldade)
1. Confira o botão Enviar comentários para os comentários abaixo e encontre seu evento. (JQuery Bound)
2. Depure dinamicamente o processo de execução deste evento de comentário de envio.
Se você não conhece esse exercício, é recomendável ler "uma breve palestra sobre as questões do posicionamento do código -fonte do evento JQuery" para análise detalhada.
Este artigo vem de: Artigo iluminado do blogueiro do blog Garden. http://www.cnblogs.com/52cik/