O menu Web Developer do Firefox contém ferramentas para inspecionar páginas, executar código JavaScript arbitrário e visualizar solicitações HTTP e outras mensagens. O Firefox 10 adicionou uma ferramenta Inspector totalmente nova e atualizou o Scratchpad.
Os novos recursos de desenvolvedor web do Firefox, em combinação com incríveis add-ons de desenvolvedor web como Firebug e a barra de ferramentas do desenvolvedor web, tornam o Firefox um navegador ideal para desenvolvedores web. Todas as ferramentas estão disponíveis no Web Developer no menu do Firefox.
Inspetor de página
Inspecione um elemento específico clicando com o botão direito e selecionando Inspecionar (ou pressionando Q ) Você também pode lançar o Inspetor no menu Web Developer.
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 ficarão esmaecidos.
Se você deseja escolher um novo elemento, clique no Inspecionar botão na barra de ferramentas, passe o mouse sobre a página e clique no seu elemento. O Firefox destaca o elemento sob o seu cursor.
Você pode navegar entre os elementos pai e filho clicando nas trilhas na barra de ferramentas.
Inspetor de HTML
Clique no HTML botão para visualizar o código HTML do elemento atualmente selecionado.
O inspetor HTML permite expandir e recolher as tags HTML, facilitando a visualização rápida. Se você quiser ver o HTML da página em um arquivo simples, pode selecionar Ver o código-fonte da página no menu Web Developer.
Inspetor 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 ajudá-lo a encontrar propriedades específicas, o painel de propriedades inclui uma caixa de pesquisa.
Você pode editar o CSS do elemento rapidamente no 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 CSS, deixando o texto do elemento em negrito.
Scratchpad JavaScript
O Scratchpad também teve 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 fazer isso, 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 erro, que se tornou obsoleto e será removido em uma versão futura do Firefox.
O console exibe quatro tipos diferentes de mensagens, das quais você pode alternar a visibilidade - solicitações de rede, mensagens de erro CSS, mensagens de erro JavaScript e mensagens do desenvolvedor web.
O que é uma mensagem para o desenvolvedor da web? É uma mensagem impressa no 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á as solicitações de rede geradas e outras mensagens.
Use a caixa de pesquisa para filtrar as mensagens; clique em uma solicitação se quiser ver mais detalhes.
A partir do Firefox 10, o Console da Web pode funcionar em conjunto com o Inspetor de página. A variável $ 0 representa o objeto atualmente selecionado no inspetor. Então, por exemplo, se você quiser ocultar o objeto atualmente selecionado, você pode 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 o Página do console da web no site da Rede de Desenvolvedores da Mozilla.
Obtenha mais ferramentas
o Obtenha mais ferramentas opção leva você para a coleção de complementos do Web Developer Toolbox no site de complementos do Mozilla. Ele contém alguns dos melhores add-ons para desenvolvedores web , incluindo Firebug e a Web Developer Toolbar.
Se você já usa o Firefox há alguns anos, deve se lembrar do Inspetor DOM. As ferramentas integradas para desenvolvedores do Firefox já percorreram um longo caminho desde então.
