Descobrir problemas do site com ferramentas para desenvolvedores chrome ou o firebug

Video: Ferramentas para desenvolvimento web

Se você tem seguido o meu jQuery tutoriais Até agora, você já pode ter executado em alguns problemas de código e não se sabe como corrigi-los. Quando confrontados com um pouco não-funcional do código, é muito difícil realmente identificar a linha ofensiva de código - e é aí que depuração e desenvolvedores ferramentas de entrar.Fazendo A Web Interativo: Uma introdução ao jQueryFazendo A Web Interativo: Uma introdução ao jQueryjQuery é uma biblioteca de scripting do lado do cliente que quase todos os website moderna usa - faz websites interativos. Não é a única biblioteca javascript, mas é a mais desenvolvida, mais apoiado, e mais amplamente utilizado ....consulte Mais informação

Então, antes de continuar com algum código jQuery mais complexo, eu pensei que iria examinar as ferramentas disponíveis no navegador mais popular do mundo - Chrome. Essas ferramentas não são apenas para javascript embora - eles também podem ajudar a depurar quaisquer solicitações de AJAX, recursos o seu site precisa carregar, analisar a estrutura DOM, e um monte de outras coisas.

Nenhum amor para o Firefox?

Embora eu estou indo especificamente para se referir as ferramentas de desenvolvedor Chrome hoje fora de preferência pessoal, eo fato de que eles estão embutido no navegador, a mesma funcionalidade está disponível em um plugin para o Firefox chamada Firebug - a interface é quase idêntica, de modo que este guia deverá ainda aplicar.Como instalar o Firebug no IE, Safari, Chrome & ÓperaComo instalar o Firebug no IE, Safari, Chrome & Óperaconsulte Mais informação

Lançando as ferramentas de depuração

Isso não poderia ser mais fácil. No Chrome, basta bater Ctrl-Shift-I (CMD-ALT-I no Mac) ou clique direito em qualquer lugar e selecione Inspecionar elemento. Você deve ver algo semelhante ao seguinte:

Há uma ligeira diferença para estes dois métodos de lançar o console de depuração. A tecla de atalho irá simplesmente abri-lo em um modo de exibição padrão, enquanto Inspect Element incidirá a árvore DOM para o elemento específico que você clicou com o botão direito. O que nos leva para o primeiro bit incrível de funcionalidade que começa a partir dessas ferramentas.

elementos & CSS

o elementos guia é dividido em duas seções- à esquerda é a árvore DOM completa. Isto é semelhante ao código-fonte da página, mas é distintamente mais útil.

Video: Ferramentas do desenvolvedor (Developer Tools) do Google Chrome

Para começar, tem sido analisado em uma estrutura de árvore, de modo elementos podem ser recolhidas e ampliada, o que lhe permite examinar elementos filhos, pais e irmãos mais obviamente do que apenas lendo o código-fonte. Em segundo lugar, ele reflete quaisquer mudanças dinâmicas na página resultante de javascript. Por exemplo, se o seu jQuery era suposto ser a adição de uma classe para certos elementos sobre pageLoad, você veria que reflete na árvore DOM, mas não o código fonte da página.

Você também pode editar o DOM ali mesmo, por simplesmente clicando duas vezes sobre ele. Sim, você pode usar isso para brincar e sites de edição para fazer screenshots tolas, por isso é ótimo para simples experimentação.

Aqui está me mexendo com a página inicial notícias BBC ...

No lado direito você pode ver todas as regras CSS aplicadas ao elemento atual, incluindo que foram substituídas pelas regras de ordem superior (estes têm uma linha através deles):

Você pode ajustar estes, ou apenas desmarque uma regra específica para ver o que iria acontecer.

Desenrolando os “estilos computados” irá mostrar-lhe um resumo de toda regra CSS a ser aplicada. O número da linha e link do arquivo para a extrema direita vai pular direto para o arquivo de recurso que tem sido carregado a partir, embora em alguns casos, pode ser um arquivo minimizado (por isso tudo está em uma linha).

Ter em mente que nenhuma das alterações que fizer aqui será salvo, Então da próxima vez que você atualizar a página que estará de volta ao normal. Se você estiver jogando com a CSS, certifique-se de anotar exatamente o que você mudou quando você obter o resultado desejado.

error Console

A segunda aba mais importante, tanto quanto o meu uso diário dessas ferramentas fantásticas ir, é o console de erro e de depuração, a última guia na lista. Para começar, quaisquer erros de javascript vão ser mostrados aqui. Quando você estiver primeira partida fora com jQuery, você pode encontrar alguns exemplos de “$ É indefinido” ou “JQuery é indefinido” - um erro comum que significa que você se esqueceu de um link para jQuery no cabeçalho. Se você ver um erro que você não pode decifrar, apenas copiá-lo em uma caixa de pesquisa Google e você vai mais do que provável encontrar muitas outras pessoas que tinham o mesmo problema.

O erro também irá apontar para a linha exata do código em que o erro primeira occurred- clicar nele para pular direto para essa linha e seção de código. Se isso está em um de seus próprios scripts, que muitas vezes pode identificar-lo direto para o agressor - se o erro é mais vago, porém, pode apontar para o código-fonte jQuery que é completamente un-legível.

Basta dizer que, a consola é a primeira coisa que você deve verificar quando algo não funciona direito, como é mais do que provável impresso um erro lá.

O outro uso para o console é a saída de suas próprias instruções de depuração personalizado. Você pode enviar um pouco de texto, como o deixar-se conhecer o roteiro atingiu um certo ponto:

console.log ("chegou a esse bit no código ok, agora a tentar ...") -

Ou você pode objetos inteiros de saída e variáveis ​​tão simples como:

console.log (myVar) -

Experimente agora usando algum jQuery básica para selecionar alguns elementos, em seguida, enviá-los para ver como eles se parecem. Você pode usar isso para verificar o que seus seletores ter encontrado, por exemplo.

Rede

A ferramenta final no conjunto de ferramentas de desenvolvedor que eu queria te mostrar hoje é o Rede aba. Para que este guia de funcionar, você precisa estar atento a ele e atualizar a página - ele vai em seguida, capturar todos os pedidos que a página faz, para publicidade, javascript, CSS, imagens - tudo - e dar-lhe uma avaria de informações sobre essa interação, incluindo:

• nome do arquivo.
• tipo de solicitação (GET ou POST).
• código de resposta do servidor enviados de volta (200 OK, 304 não modificado etc).
• tamanho do arquivo.
• cronometragem.

Ao clicar em um arquivo individual trará algumas informações ainda mais detalhadas sobre a interação entre o navegador eo servidor. Para mim, isso é particularmente útil quando a depuração solicitações de AJAX - você pode ver exatamente que tipo de dados foram enviados com o pedido, e o resultado completo da resposta dada pelo script do lado do servidor de recepção.

Video: Ferramentas para desenvolvedores

Resumo

Espero que eu tenha armado desenvolvedores de brotamento com algumas ferramentas adicionais. Se você encontrou este post útil, eu realmente gostaria de receber uma ação, porque me faz sentir toda morno e distorcido dentro, e me diz que você quer que eu escreva mais parecido com ele. Saúdo, também, comentários e feedback - particularmente, Que outras ferramentas que você usa como um desenvolvedor web? Você tem um arsenal de plugins do Firefox à sua disposição?