Como usar as ferramentas do desenvolvedor da Web do Firefox

O menu do desenvolvedor da Web do Firefox contém ferramentas para inspecionar páginas, executar código JavaScript arbitrário e exibir solicitações HTTP e outras mensagens. O Firefox 10 adicionou uma nova ferramenta Inspector e um Scratchpad atualizado.

Os novos recursos para desenvolvedores web do Firefox, em combinação com incríveis complementos para desenvolvedores web como o Firebug e a Web Developer Toolbar, fazem do Firefox um navegador ideal para desenvolvedores web. Todas as ferramentas estão disponíveis no Web Developer no menu do Firefox.

Inspetor de Páginas

Inspecione um elemento específico clicando com o botão direito e selecionando Inspecionar (ou pressionando Q). Você também pode iniciar o Inspetor no menu do desenvolvedor da Web.

Você verá uma barra de ferramentas na parte inferior da tela, que pode ser usada para controlar o inspetor. Seu elemento selecionado será destacado e outros elementos na página serão esmaecidos.

Se você quiser escolher um novo elemento, clique no Inspecionar botão na barra de ferramentas, passe o mouse sobre a página e clique em seu elemento. Firefox destaca o elemento sob o cursor.

Você pode navegar entre os elementos pai e filho clicando nos breadcrumbs na barra de ferramentas.

Inspetor de HTML

Clique no HTML botão para visualizar o código HTML do elemento atualmente selecionado.

O inspetor de HTML permite expandir e reduzir as tags HTML, facilitando a visualização em um piscar de olhos. Se você quiser ver o HTML da página em um arquivo simples, selecione Ver a origem da página no menu do desenvolvedor da Web.

Inspetor de CSS

Clique no Estilo botão para ver as regras CSS aplicadas ao elemento selecionado.

Há também um painel de propriedades CSS - alterne entre os dois clicando no Regras e Propriedades botões. Para ajudar você a encontrar propriedades específicas, o painel de propriedades inclui uma caixa de pesquisa.

Você pode editar o CSS do elemento rapidamente a partir do painel Regras. Desmarque qualquer uma das caixas de seleção para desativar uma regra, clique no texto para alterar uma regra ou adicione suas próprias regras ao elemento na parte superior do painel. Aqui, eu adicionei o intensidade da fonte: Negrito; Regra de CSS, tornando o texto do elemento em negrito.

Scratchpad JavaScript

O Scratchpad também viu uma atualização com o Firefox 10 e agora contém realce de sintaxe. Você pode digitar o código JavaScript para executar na página atual.

Depois de ter, clique no Executar menu e selecione Corre. O código é executado na guia atual.

Console da Web

O Console da Web substitui o antigo Console de Erros, que foi descontinuado e será removido em uma versão futura do Firefox.

O console exibe quatro tipos diferentes de mensagens, que podem alternar a visibilidade de - solicitações de rede, mensagens de erro CSS, mensagens de erro JavaScript e mensagens do desenvolvedor da Web..

O que é uma mensagem do desenvolvedor da web? É uma mensagem impressa no objeto window.console. Por exemplo, poderíamos executar o window.console.log (“Hello World”); Código JavaScript no Scratchpad para imprimir uma mensagem do desenvolvedor no console. Os desenvolvedores da Web podem integrar essas mensagens em seu código JavaScript para ajudar na depuração.

Atualize a página e você verá as solicitações de rede geradas e outras mensagens.

Use a caixa de pesquisa para filtrar as mensagens; clique em um pedido se você quiser ver mais detalhes.

A partir do Firefox 10, o console da Web pode trabalhar em conjunto com o Page Inspector. A variável $ 0 representa o objeto atualmente selecionado no inspetor. Então, por exemplo, se você quisesse esconder o objeto atualmente selecionado, você poderia executar $ 0.style.display = "nenhum" no console.

Se você estiver interessado em aprender mais sobre como usar o console e suas funções integradas, confira a página do console da Web no site da Mozilla Developer Network.

Obtenha mais ferramentas

o Obtenha mais ferramentas opção leva você para a coleção de complementos do Web Developer Toolbox no site do Mozilla Add-Ons. Ele contém alguns dos melhores complementos para desenvolvedores da Web, incluindo o Firebug e a barra de ferramentas do desenvolvedor da Web..

Se você usa o Firefox há alguns anos, talvez se lembre do DOM Inspector. As ferramentas de desenvolvedor integradas do Firefox já percorreram um longo caminho desde então.