. Novos recursos do Firefox Aurora mostrar Mozilla ouve desenvolvedores - Tudo Sobre Tecnologia

A versão pré-beta do Firefox Aurora vem com novas ferramentas para desenvolvedores. Veja como usar seis deles. 

Instalando o Firefox Aurora

A fim de testar os recursos, eu precisava fazer o download e instalar o Firefox Aurora. Então eu cliquei no botão Firefox Aurora Free Download, e, em seguida, clicar no arquivo executável firefox-27.0a2.en-US.win32.installer-stub.exe ( Figura A ).
Figura A
FirefoxAuroraDevTools_FigA_112213.gif
Eu desmarcada a seleção para fazer Aurora Meu navegador padrão e, em seguida, clicar no botão Opções (Figura A), o que resultou na Aurora Setup diálogo caixa (Figura B). Tenho a certeza a seleção navegador padrão ainda foi desmarcada e também desmarcado a seleção para criar um atalho no meu desktop. Então eu cliquei no botão Instalar.
Figura B
FirefoxAuroraDevTools_FigB_112213.gif
Demorou alguns minutos para começar a transferência para o meu PC (tenho Time Warner Cable Turbo em 21M velocidade de download) ( Figura C ). Você pode receber uma notificação do seu software antivírus sobre um arquivo desconhecido depois de executar o arquivo de instalação, que é principalmente devido à novidade do arquivo, mas também devido ao fato de que é uma versão pré-beta, por isso tem pouco de história neste ponto.
Figura C
FirefoxAuroraDevTools_FigC_112213.gif
Assim que o download e instalação estiver concluída, você é imediatamente levado para o navegador da Aurora ea caixa de Aurora Sobre ( Figura D ).
Figura D
FirefoxAuroraDevTools_FigD_112213.gif
Durante a instalação, se você selecionar a opção para adicionar um atalho para a barra de início rápido, você verá o ícone do globo Aurora como exibido no canto direito na Figura E .
Figura E
FirefoxAuroraDevTools_FigE_112213.gif

Teste de condução algumas das novas ferramentas

Para utilizar as novas ferramentas para desenvolvedores do Firefox, clique com o botão direito em qualquer lugar na tela em Aurora e clique em Inspect Element (Q) ( Figura F ).
Figura F
FirefoxAuroraDevTools_FigF_112213.gif
O painel Ferramentas de Desenvolvimento abre inadimplente para a aba Inspector na parte inferior da tela ( Figura G ).
Figura G
FirefoxAuroraDevTools_FigG_112213.gif

JavaScript Debugger: Quebre em eventos DOM

De acordo com o depurador JavaScript, a nova ferramenta permite que você quebre automaticamente uma variedade de eventos DOM sem ter que memorizar todos os pontos de interrupção. Siga estes passos para utilizar o depurador JavaScript ( Figura H ):
1. Clique na guia Debugger a partir do painel Ferramentas de Desenvolvimento.
2. Clique no botão Expandir Panes, que está à direita da caixa de texto de pesquisa.
3. Clique na guia Eventos. Você pode clicar em qualquer evento para pausá-lo da próxima vez que ele ocorre.  
Figura H
FirefoxAuroraDevTools_FigH_112213.gif

Inspector Tool: HTML Editor

Por padrão, a ferramenta de desenvolvedor abre a aba Inspector. De lá, você pode fazer edições no HTML clicando com qualquer elemento e, em seguida, selecionando a opção Editar como HTML ( Figura I ).
Figura I
FirefoxAuroraDevTools_FigI_112213.gif
E, em seguida, a caixa de conteúdo aberto onde você pode editar o código HTML ( Figura J).
Figura J
FirefoxAuroraDevTools_FigJ_112213.gif

Selecione o formato de cor padrão e previews amostra de cor

Agora você tem a opção de selecionar o formato da unidade de cor padrão para a guia inspetor. As opções de seleção são nas Opções do Toolbox, e pode ser aberta clicando no botão cog na extremidade esquerda do painel Ferramentas de Desenvolvimento ( Figura K ).
Figura K
FirefoxAuroraDevTools_FigK_112213.gif
As opções de unidade de seleção de cor são Hex, HSL (A), RGB (A), e nomes de cores (Figura G ).
Figura L
FirefoxAuroraDevTools_FigL_112213.gif
Previews amostra de cores estão agora disponíveis a partir do painel de Regras na lateral e mostra cores certas de elementos selecionados no painel Inspector ( Figura M) , onde o "conteúdo" inclui a regra para a fronteira com a 2px solid # 000 e um fundo com uma cor de # 333.
Figura M
FirefoxAuroraDevTools_FigM_112213.gif

CodeMirror

O editor de texto baseado em HTML5 popular e versátil CodeMirror  é implementado em JavaScript para o navegador e agora é o editor de componente usado no Firefox Developer Tools. É no Style Editor, Debugger, Inspector como o Editar como opção HTML descrito acima e em Rascunho. A partir das definições de opções, você pode escolher entre dois Dev Ferramenta Temas: Claro ou Escuro ( Figura N ).
Figura N
FirefoxAuroraDevTools_FigN_112213.gif
Figura O é um exemplo do tema Luz com o painel Editor de Estilo aberto no painel de ferramentas para desenvolvedores.
Figura O
FirefoxAuroraDevTools_FigO_112213.gif

WebConsole: Refluxo Logging

No painel de ferramentas para desenvolvedores, clique na guia Console, selecione o menu CSS, e, em seguida, clique no item de menu Log ( Figura P ).
Figura P
FirefoxAuroraDevTools_FigP_112213.gif
Com o log on, cada vez que um refluxo ocorre na página web ativa e inspecionado, um log será impressa com o nome da função JavaScript que acionou o refluxo registado ( Figura Q).
Figura Q
FirefoxAuroraDevTools_FigQ_112213.gif

Resumo

Os novos recursos do Firefox Developer Tools encontrados na versão pré-beta do Aurora são um bom campo de testes para futuras versões do navegador Firefox. Ele mostra que a Mozilla está ouvindo a comunidade de desenvolvedores web e respondendo com grandes resultados.
Autor:

Sobre Ryan Boudreaux

Ryan já se apresentou em uma ampla gama de funções de suporte de tecnologia para serviços públicos de geração elétrica, incluindo usinas nucleares, e para a indústria de telecomunicações. Ele trabalhou no desenvolvimento web para a indústria de restaurante e o g Federal ...

0 comentários Goocle+ 0 Facebook

Postar um comentário

 
Tudo Sobre Tecnologia © 2013-2020. Todos os direitos reservados. Tudo Sobre Tecnologia. Desenvolvido por TST
Topo