Como usar as ferramentas do desenvolvedor da Web do Firefox

Índice:

Como usar as ferramentas do desenvolvedor da Web do Firefox
Como usar as ferramentas do desenvolvedor da Web do Firefox

Vídeo: Como usar as ferramentas do desenvolvedor da Web do Firefox

Vídeo: Como usar as ferramentas do desenvolvedor da Web do Firefox
Vídeo: AirDroid o melhor app para fazer o controle toda do seu celulares pelo computador #dicas - YouTube 2024, Marcha
Anonim
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.
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 do desenvolvedor da web do Firefox, em combinação com incríveis complementos para desenvolvedores da Web, como o Firebug e a Barra de ferramentas para desenvolvedores da Web, tornam o Firefox um navegador ideal para desenvolvedores da 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 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 serão esmaecidos.
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.
Image
Image

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. O Firefox destaca o elemento sob o cursor.

Você pode navegar entre os elementos pai e filho clicando nos breadcrumbs na barra de ferramentas.
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.

Image
Image

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 Web Developer.

Image
Image

Inspetor de CSS

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

Image
Image

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.

Image
Image

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 de CSS, tornando o texto do elemento em negrito.

Image
Image

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.

Image
Image

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

Image
Image

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 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.
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.
Use a caixa de pesquisa para filtrar as mensagens; clique em um pedido se você quiser ver mais detalhes.
Image
Image

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ê tiver interesse em saber 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.
Se você tiver interesse em saber 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.

Recomendado: