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 DragonFlyO 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.jpgCenários de depuraçãoA 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 . - RunTimeCada 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 HostA 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 ScopeO 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 ScopeO 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. ProxyO 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.jpgPrincipais caracteristica do Opera Dragonfly Depuração remotaPossibilidade 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áticaO Opera DragonFly é atualizado remotamente de forma simples e automática assim como um website é atualizado. Aberto e livreO 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 CSSVerifica 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 comandoUm 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.