em Sem categoria

Opera DragonFly – Ferramenta promete ajudar na depuração de códigos de aplicações WEB.

A comunidade de desenvolvimento da empresa Opera, disponibilizou ainda em versão Alpha uma ferramenta de inspeção e edição em tempo real de códigos CSS e Javascript. A ferramenta virá embutida nas próximas versão do navegador Opera e estará disponivél também para dispositivos móveis como smartphones.
Outros navegadores como o da Mozilla Firefox que possui o Firebug, o Opera DragonFly possibilita a edição em tempo real de todas as propriedades de um scripts DOM esta funcionalidade de debugar códigos Javascript possibilita a criação de aplicações AJAX sofisticadas possibilitando o controle de seu código linha po linha.

Como utilizar o DragonFly ?
Versões mais rescentes do navegador Opera ou seja o 9.5, possui um recurso adicional chamado Scope, que é um sistema de monitoramento que permite analisar e validar toda a estrutura das páginas web renderizadas pelo navegador, e com isso qualquer versão do Opera com suporte ao Scope pode rodar o DragonFly.
A nova versão do Opera codenome Kestrel em versão Beta 2, disponibilizará o DragonFly junto a instalação do navegador.

Como acessar o DragonFly ?
Para acessar a interface do DragoFly no menu do Opera selecione Ferramentas > Avançado > Ferramentas de desenvolvimento ou se seu navegador estiver em inglês Tools > Advanced > Developer Tools.

Por dentro da interface

1) – O script, DOM e as tabs de console: estas são as principais funcionalidades de seleção da interface que disponibiliza a verificação de diversas formas dos web sites carregados pelo navegador;
2) – Janela de informações do site: mostra dos CSS e Javascripts aplicados ao web site atualmente carregado pelo navegador;
3) – Ferramentas contexteuais:  muitas ferramentas são apresentadas nestas áreas dependendo do script
ou DOM de acordo com o código selecionado;
4) – Search Box/Quick find: Com este recurso é possivél procurar diferentes termos dentro de várias janelas;
5) – Janela de informações principais: esta janela mostra todo conteúdo de diferentes scripts, arquivos CSS, Javascripts etc.
6) – Linha de comando: possibilita a execução de comandos Javascript;
7) – Painel de informações: Este painéis variam de acordo com as funções da guia principal selecionada  elas exibem diversas informações sobre os scripts, estilos que estão sendo utilizados;
8) – Este indicador mostra o status do sites da web debugados mostrando oque estão ativos.
Executando tarefas básicas:
Com o Opera com tecnologia Dragon Fly você pode navegar normalmente utilizando todos os recursos do navegador como por exemplo a navegação por Tabs, estes websites renderizados pelo navegador também estarão disponiveis na interface do DragonFly e serão exibidas por um menu suspenso.

Este recurso faz parte do Opera DragonFly e leva o nome de Script Tab, você pode conferir a saída do arquivo addevents.js que faz parte do código fonte do exemplo, você pode ainda criar sinalizações nas linhas chamados breakpoints simplesmente clicando sob a linhas desejada.

Outras ferramentas importantes para o desenvolvimento de aplicações  são as DOM Tabs, Styles Tabs e Layout tabs, tudo é organizado de forma simples e de fácil entendimento, o DOM tab possui uma paleta no qual pode ser selecionado e alterado todos os atributos de elementos DOM.
Com a tab Console é possivél filtrar todas as propriedades de CSS e scripts Javascript, ferramenta indispensavél para efetuar o debug de projetos.

Arquitetura do Opera DragonFly
O Opera DragonFly têm como principal funcionalidade a depuração de códigos de Javascript, elementos DOM ou mesmo CSS permitindo que seja rodao em computadores desktop ou mesmo smartphones e telefones celulares, para isso ele utiliza um módulo chamado Scope que mostra as informações sobre os runtimes das aplicações através de instâncias podendo enviar e receber dados de servidores definidos através do protocolo Scope.

Figura_07.jpg

Cenários de depuração
A dois caminhos para efetuar a depuração de código:

- Integrada: Scope, proxy e depurador rodando sob uma instância do Opera;
- Remota: Scope e depurador rodando duas diferentes instâncias do Opera como por exemplo para dois dispositivos diferentes.

Depuração integrada:
Este é um cenário típico, o desenvolvedor esta trabalhando em uma aplicação web rodando no navegador Opera e o depurador roda em uma instância enquanto mostra em tempo real em uma janela seperada ou no painel intregado na janela do navegador.
Neste caso de depuração host, proxy e cliente todos dentro da mesma instância no navegador web. O proxy roda em uma porta escolhida pelo Opera e o módulo Scope e o depurador são conectados automáticamente.

Depuração remota:
Neste outro exemplo, o cenário é a depuração de uma web page desenvolvida para um telefone móvel. O celular possui um espaço de tela limitado e por questão de performance talvez até não seja aconselhavél a utilização deste hardware para efetuar a depuração, sendo assim iremos utilizar uma máquina desktop para esta tarefa.

Componentes do Opera DragonFly
A arquitetura é constituído pelos seguintes componentes Runtime
, Debugging host, módulo Scope, protocolo Scope, Proxy
e Debugging client
. 

- RunTime
Cada ambiente ECMAScript é um único runtime. Cada documento HTML  têm um único runtime associado a ele, documento em frame e iframes possuem seus próprios runtimes.

Depuração Host
A depuração host é qualquer instância do Opera que tem o módulo  Scope ativado e que esteja conectado ao proxy e ele pode conter vários runtimes.
O módulo Scope
O módulo Scope é uma parte do Opera. Uma vez ativado ele estabelece uma conexão com soquete de um proxy e inspeciona qualquer runtime depurados no host. Em seguida, envia essa informação para o depurador ele também responde a comandos feitos pelo depurador.

O protocolo Scope
O protocolo Scope é um conjunto de regras e formatos para a troca de informações sobre runtimes entre o host eo cliente. Exemplos incluem a obtenção do documento DOM a partir de uma estrutura runtime, ou um conjunto de estilos.
O protocolo Scope ainda está em desenvolvimento. Depois de terminado, ele se tornará público. Os desenvolvedores podem  criar os seus próprios clientes de depuração integrá-las em aplicações como IDEs como por exemplo Eclipse. Utilizando o alcance protocolo, esses clientes podem obter informações sobre os runtimes de um navegador Opera.
Proxy
O proxy é responsavél por rotear mensagens entre o navegador e o depurador. É importante em um cenário de depuração remota que a depuração do host e do cliente não estejam no mesmo computador. 
O Opera fornece um proxy integrado a instância executando o depurador, mas um proxy também pode rodar em um servidor público. Desta forma, as instância de depuração podem ser protegidas por um firewall.
O cliente de depuração
O Debugger é o cliente que conecta o módulo Scope do depurador do host através do proxy, ele visualiza os runtimes e disponibiliza que o usuário modifique isto.
A atual implementação do depurador é feita das tecnologias web: HTML / XML, CSS e Javascript.
Abaixo é possivél visualizar a interface do Debugger.

Figura_08.jpg

Principais caracteristica do Opera Dragonfly

Depuração remota
Possibilidade de depurar páginas para diversos dispositivos em um computador desktop, ou ainda depurar o código remotamente de através de conexões remotas.

Atualização automática
O Opera DragonFly é atualizado remotamente de forma simples e automática assim como um website é atualizado.

Aberto e livre
O código fonte do Dragonfly é licensiado sob licença BSD, podendo ser inspecionado ou mesmo alterado.

Inspetor DOM
Disponibiliza que você inspecione e atualize propriedades DOM.

Inspetor de CSS
Verifica as regras aplicadas aos elementos do CSS e padrões estabelecidos pelo navegador, porém o suporte a edição de CSSserá apenas na próxima versão.

Depurador Javascript
O Dragonfly possui recursos avançados para depuração de aplicações AJAX possibilitando a checagem do código linha por linha e com recursos avançados de depuração

Console de erros e linha de comando
Um avançado console de erros  disponibiliza que você filtre e registre seus scripts podendo apontar exatamente onde esta o erro.
Usado com as outras ferramentas disponiveis pelo Opera Dragonfly é possuivél corrigir os erros de seu website.