13Sep
O menu Web Developer do Firefox contém ferramentas para inspecionar páginas, execução de código JavaScript arbitrário e visualização de solicitações HTTP e outras mensagens. O Firefox 10 adicionou uma nova ferramenta do Inspector e o Scratchpad atualizado.
Os novos recursos do desenvolvedor web do Firefox, em combinação com incríveis complementos de desenvolvedor 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.
Page Inspector
Inspecione um elemento específico clicando com o botão direito do mouse e selecionando Inspecione ( ou pressione Q ).Você também pode iniciar o Inspector no menu Web Developer.
Você verá uma barra de ferramentas na parte inferior da tela, que você pode usar para controlar o inspetor. O elemento selecionado será destacado e outros elementos na página serão esmaecidos.
Se você deseja escolher um novo elemento, clique no botão
Inspecionar na barra de ferramentas, passe o mouse sobre a página e clique em seu elemento. O Firefox destaca o elemento sob seu cursor.Você pode navegar entre os elementos pai e filho, clicando na barra de navegação na barra de ferramentas.
HTML Inspector
Clique no botão HTML para visualizar o código HTML do elemento atualmente selecionado.
O inspector HTML permite que você expanda e colapse as tags HTML, facilitando a visualização instantânea. Se você quiser ver o HTML da página em um arquivo plano, você pode selecionar Ver fonte da página no menu Web Developer.
CSS Inspector
Clique no botão Style para ver as regras CSS aplicadas ao elemento selecionado.
Há também um painel de propriedades do CSS - alternar entre os dois, clicando nas regras e Propriedades .Para ajudá-lo a encontrar propriedades específicas, o painel de propriedades inclui uma caixa de pesquisa.
Você pode editar o CSS do elemento no voo a partir do painel de 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, adicionei o tipo de letra : negrito; CSS, fazendo com que o texto do elemento seja negrito.
JavaScript Scratchpad
O Scratchpad também viu uma atualização com o Firefox 10 e agora contém destaque de sintaxe. Você pode digitar o código JavaScript para ser executado na página atual.
Depois de ter, clique no menu Execute e selecione Run. O código é executado na guia atual.
Web Console
O Web Console substitui o antigo Console de Erros, que foi reprovado e será removido em uma futura versão do Firefox.
O console exibe quatro tipos diferentes de mensagens, que você pode alternar a visibilidade de - solicitações de rede, mensagens de erro CSS, mensagens de erro JavaScript e mensagens de desenvolvedor web.
O que é uma mensagem de desenvolvedor web?É uma mensagem impressa para o objeto window.console. Por exemplo, podemos 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á os pedidos de rede gerados e outras mensagens.
Use a caixa de pesquisa para filtrar as mensagens;Clique em um pedido se quiser ver mais detalhes.
A partir do Firefox 10, o Console da Web pode trabalhar em conjunto com o Inspetor de Páginas. 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 = "none" no console.
Se você estiver interessado em aprender mais sobre o uso do console e suas funções internas, confira a página da Web Console no site Mozilla's Developer Network.
Obter mais ferramentas
Obter mais ferramentas A opção leva você à coleção de suplementos Toolbox do desenvolvedor da Web no site do Complemento Mozilla. Ele contém alguns dos melhores complementos para desenvolvedores web, incluindo o Firebug e a Barra de Ferramentas do Desenvolvedor Web.
Se você estiver usando o Firefox por alguns anos, você pode se lembrar do Inspetor de DOM.As ferramentas de desenvolvedor integrado do Firefox percorreram um longo caminho desde então.