// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Depurando e Testando JavaScript em uma Aplicação em HTML5
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Depurando e Testando JavaScript em uma Aplicação em HTML5 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Depurando e Testando JavaScript em uma Aplicação em HTML5

As aplicações em HTML5 costumam combinar HTML, CSS e JavaScript para criar aplicações executadas em um browser e exibidas em diversos dispositivos, incluindo smartphones, tablets e laptops. Este documento demonstra como o IDE oferece ferramentas que podem ajudá-lo a depurar e testar arquivos JavaScript no IDE.

Quando você quiser depurar os arquivos JavaScript na sua aplicação HTML5, é recomendável que instale a extensão NetBeans Conector para o browser Chrome. A depuração é ativada automaticamente quando você executa a aplicação no browser e a extensão está instalada.

O IDE também permite configurar e executar facilmente testes de unidade em arquivos JavaScript usando o framework de teste Jasmine e os executores de teste Karma ou JS Test Driver. Você pode configurar o executor de teste para executar testes de unidade em diversos browsers, além de poder especificar rapidamente bibliotecas de JavaScript, scripts e testes que o IDE deverá carregar quando executar os testes. Quando um teste falhar, você pode usar o depurador para ajudá-lo a localizar o código problemático.

Para obter detalhes sobre como instalar a extensão NetBeans Connector para o browser Chrome, consulte o tutorial link:html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações em HTML5 +].

Para obter mais informações sobre as funcionalidades de edição de JavaScript no IDE, consulte link:http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm#BACFIFIG[+Criando Arquivos JavaScript+] em link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG[+Desenvolvendo Aplicações com o NetBeans IDE - Guia do Usuário+].

Para assistir a um screencast deste tutorial, consultelink:../web/html5-javascript-screencast.html[+Vídeo sobre Teste e Depuração de JavaScript em Aplicações HTML5 +].


image::images/netbeans-stamp.png[title="O conteúdo desta página se aplica ao NetBeans IDE 8.0"]


==== Para concluir este tutorial, você precisará dos recursos a seguir:

|===
|Software ou Recurso |Versão Necessária 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE, Java+] |8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |7 ou 8 

|link:http://www.google.com/chrome[+Browser Chrome+] |-- 

|link:https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon[+Extensão NetBeans Connector para Chrome+] |1.x 

|link:http://code.google.com/p/js-test-driver/[+JAR do JS Test Driver+] |-- 
|===

*Observações:*

* Este documento usa o servidor JS Test Driver para executar testes de unidade em JavaScript. Você pode se familiarizar com a propriedades do servidor na link:http://code.google.com/p/js-test-driver/[+página inicial do projeto JS Test Driver+].
* Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript.


== Criando a Aplicação de Exemplo do NetBeans em HTML5

Execute as etapas a seguir para criar a aplicação de exemplo um modelo de site em HTML5.

1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.
2. Expanda o nó *Exemplos* no assistente do Novo Projeto e selecione a categoria *HTML5*.
3. Selecione o projeto *Tutorial do Catálogo de Telefone AngularJS*. Clique em Próximo.
image::images/html5-js-newproject.png[title="Projeto Tutorial do Catálogo de Telefone AngularJS no assiste de Novo Arquivo"]
4. Selecione uma localização para o projeto. Clique em Finalizar.

*Observação.* Observe que o URL do modelo é github. O IDE precisa acessar a rede para recuperar o archive do modelo. Verifique as definições de proxy na janela Opções se você encontrar problemas ao fazer download do archive.

Quando você clica em Finalizar, o IDE cria o projeto e abre o arquivo  ``index.html``  no editor. Na janela Projetos, você pode ver que o projeto contém  ``index.html``  e várias folhas de estilo de CSS e arquivos e bibliotecas JavaScript.

image::images/html5-js-projectswindow.png[title="Nós do projeto Tutorial do Catálogo de Telefones AngularJS na janela Projetos"]

O projeto também inclui vários arquivos de configuração e teste de unidade JavaScript gerados por default.

5. Confirme que Chrome com Conector do NetBeans está selecionado na lista drop-down, na barra de ferramentas.
image::images/html5-js-selectbrowser.png[title="Browser selecionado na lista drop-down na barra de ferramentas"]
6. Clique no botão Executar na barra de ferramentas (F6) ou clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Executar.

Quando você executa o projeto, a página frontal da aplicação em HTML5 é aberta no browser Chrome e você pode ver uma lista de telefones celulares. Quando você clica no nome de um telefone celular, a página exibe os detalhes do telefone.

image::images/html5-js-runproject1.png[title="Aplicação Tutorial do Catálogo de Telefones AngularJS na janela do browser"]

Você perceberá que há uma barra amarela na guia do browser que o notifica que o NetBeans Connector está depurando a guia. O IDE e o browser são conectados e podem se comunicar um com o outro quando a barra amarela está visível. Quando você inicializa uma aplicação HTML5 do IDE, o depurador JavaScript é ativado automaticamente. Quando você salva as alterações em um arquivo ou faz alterações em uma folha de estilos CSS, não precisa recarregar a página, pois a janela do browser será atualizada automaticamente para exibir as alterações.

Se você fechar a barra amarela ou clicar em Cancelar, quebrará a conexão entre o IDE e o browser. Se você interromper a conexão, será necessário executar novamente a aplicação em HTML5 a partir do IDE para usar o depurador JavaScript.

Você obsevará também que o ícone do NetBeans ficará visível no campo do local do URL do browser. É possível clicar no ícone para abrir um menu que oferece várias opções para alterar o tamanho de exibição do browser e para ativar o modo Inspecionar no NetBeans.


== Usando o Depurador JavaScript

Neste exercício, você colocará um ponto de interrupção em um arquivo JavaScript e executará a aplicação. Você pode usar a dica de ferramenta no editor para ver rapidamente os valores de variáveis.

1. Expanda o nó  ``js``  na janela Projetos e clique duas vezes em  ``controllers.js``  para abrir o arquivo no editor.
2. Coloque um ponto de interrupção de linha na linha 16 de  ``controllers.js``  clicando na margem esquerda 
image::images/html5-js-breakpoint1.png[title="Ponto de interrupção definido no editor"]

Você pode exibir os pontos de interrupção definidos no projeto escolhendo Janela > Depuração > Pontos de Interrupção para abrir a janela Pontos de Interrupção.

image::images/html5-js-breakpoint2.png[title="Lista de pontos de interrupção na janela Pontos de Interrupção"]
3. Clique no botão Executar na barra de ferramentas para executar o projeto novamente.

Quando você executar o projeto, verá a mesma página, porque o ponto de interrupção que você definiu não foi atingido.

4. No browser, clique em uma das entradas na página, por exemplo, Motorola Atrix4G.

Você verá que a página foi parcialmente carregada, mas que os dados do telefone estão ausentes, pois eles não foram transmitidos para o JavaScript e renderizados.

image::images/html5-js-break-details.png[title="Página Detalhes da aplicação parcialmente carregada no browser"]
5. No editor no IDE, você pode ver que o ponto de interrupção foi atingido e que o Contador do Programa está atualmente na linha 16 de  ``controllers.js`` .
6. Passe o cursor na variável  ``phone``  para exibir uma dica de ferramenta com informações sobre a variável.
image::images/html5-js-variables1.png[title="Dica de ferramentas no editor"]

Na dica de ferramentas, você pode ver as seguintes informações:  ``telefone = (Recurso) Recurso`` .

7. Clique na dica de ferramenta para expandi-la e exibir uma lista das variáveis e valores.
image::images/html5-js-variables.png[title="Dica de ferramenta das variáveis expandida no editor"]

Por exemplo, quando você expande o nó  ``android`` , pode ver os valores das strings  ``os``  e  ``ui`` ..

Você também pode escolher Janela > Depuração > Variáveis para exibir a lista na janela Variáveis.

8. Use os botões de etapas da barra de ferramentas para avançar nas funções de JavaScript na biblioteca  ``angular.js``  ou clique no botão Continuar (F5) para continuar a aplicação.


== Executando Testes em JS Unit

Você pode configurar facilmente o IDE para usar o executor de teste Karma ou JS Test Driver na execução de testes de unidade. Karma e JS Test Driver são executores de teste que fornecem um URL de destino da execução dos testes de unidade JavaScript.

Neste tutorial, você usará o Karma para executar os testes de unidade JavaScript que foram incluídos no projeto de amostra. O projeto de amostra já inclui um arquivo de configuração do Karma. Quando você executa seus testes, o servidor executor de teste é iniciado e aguarda para executar os testes. Seu browser é aberto e exibe uma mensagem de status na janela que confirma que o servidor está em execução e aguardando.


=== Como Executar Testes com Karma

Para executar testes com Karma, é preciso primeiramente fazer download do Karma em seu sistema de arquivos local. Depois de instalar o Karma, será preciso criar um arquivo de configuração de Karma e depois especificar o local do arquivo de instalação e configuração na janela Propriedades do Projeto.

1. Instale o Karma.

Você pode escolher como e onde deseja instalar o Karma. A instalação deverá ser especificada posteriormente na configuração do projeto para usar o Karma. Encontre informações sobre as opções de instalação do Karma no link:http://karma-runner.github.io[+site do Karma+].

2. Crie um arquivo de configuração de Karma.

Neste tutorial, esta etapa é opcional porque a aplicação de amostra já inclui um arquivo de configuração de Karma. Você pode criar um arquivo de configuração de Karma base selecionando Arquivo de Configuração do Karma na categoria Testes de Unidade do assistente de Novo Arquivo.

image::images/karma-new-config.png[title="Novo Arquivo de Configuração do Karma no assistente de Novo Arquivo"]

Como alternativa, execute o comando  ``init``  do Karma na linha de comandos. Consulte a documentação do Karma para obter mais detalhes sobre o uso do comando  ``init`` .

3. Expanda o nó Arquivos de Configuração na janela Projetos e clique duas vezes em  ``karma.conf.js``  para abrir o arquivo no editor. Observe que a amostra inclui dois arquivos de configuração do Karma.

No arquivo de configuração do Karma, você pode ver os arquivos que serão incluídos e excluídos na execução dos testes. Pode ver também os plug-ins do Karma que são exigidos para executar os testes com essa configuração.

image::images/karma-plugins.png[title="Arquivo de configuração do Karma no editor"]
4. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades no menu pop-up.
5. Selecione a categoria Teste JavaScript no painel Categorias da janela Propriedades do Projeto.
6. Selecione Karma na lista drop-down Provedor de Testes. Clique em OK.
7. Abra a janela Propriedades do Projeto novamente e selecione Karma sob a categoria Teste JavaScript no painel Categorias.
8. Especifique o local da instalação do Karma.

Se você tiver instalado o Karma no diretório de projetos, poderá clicar em Pesquisar e o IDE encontrará a instalação. Você também pode clicar em Procurar para localizar manualmente a instalação do Karma local.

9. Especifique o local do arquivo de configuração do Karma. Clique em OK.

Neste tutorial, você pode clicar em Pesquisar e o IDE encontrará o arquivo de configuração padrão do Karma. Pode também clicar em Procurar para localizar manualmente um arquivo de configuração.

image::images/karma-properties-window.png[title="Categoria Karma na janela Propriedades do Projeto"]

Ao clicar em OK, você vê que um nó Karma aparece sob o nó do projeto na janela Projetos. Clique com o botão direito do mouse no nó Karma e inicie/interrompa o servidor Karma e defina o arquivo de configuração no menu pop-up.

10. Na janela Projetos, clique com o botão direito do mouse no nó karma e escolha Iniciar no menu pop-up.

Quando você clica em Iniciar o Karma, o servidor é iniciado e uma janela do browser é aberta exibindo o status do servidor.

image::images/karma-chrome.png[title="Status do servidor Karma na janela do browser Chrome"]

Na janela Saída, você pode ver o status do servidor. É solicitada também a instalação dos plug-ins ausentes.

image::images/karma-output1.png[title="Nó Configurar JS Test Driver na janela Serviços"]

*Observação.* A janela do browser deve estar aberta e o servidor Karma deve estar em execução para executar os testes de unidade.

11. Clique com o botão direito do mouse no nó e escolha Definir Configuração >  ``karma.conf.js``  para confirmar a seleção do arquivo de configuração correto. image::../../../images_www/articles/80/webclient/html5-js/karma-node.png[title="Nó Configurar JS Test Driver na janela Serviços"]
12. Desative quaisquer pontos de interrupção definidos no projeto.

Você pode desativar pontos de interrupção desmarcando a caixa de seleção para pontos de interrupção na janela Pontos de Interrupção.

13. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes.

Quando você escolhe Testar, o executor de teste executa os testes de unidade nos arquivos. O IDE abre a janela Resultados do Teste e exibe os resultados.

image::images/karma-test-results.png[title="Resultados do teste do Karma"]


=== Como Executar Teste com JS Test Driver

Se você quiser usar o JS Test Driver, o IDE oferece uma caixa de diálogo de configuração para o JS Test Driver que você pode abrir no nó JS Test Driver nos Serviços. Essa caixa de diálogo permite que você especifique facilmente o local do JAR do servidor JS Test Driver e os browsers em que você quer executar os testes. O nó JS Test Driver permite facilmente ver se o servidor está em execução e iniciar e parar o servidor.

Para obter mais detalhes sobre como configurar o JS Test Driver, consulte a documentação link:http://code.google.com/p/js-test-driver/wiki/GettingStarted[+Conceitos Básicos sobre JsTestDriver+].

1. Faça download de link:http://code.google.com/p/js-test-driver/[+JAR do JS Test Driver+] e salve o JAR no sistema local.
2. Na janela Serviços, clique com o botão direito do mouse no nó JS Test Driver e escolha Configurar. 
image::images/html5-js-testdriver-serviceswindow.png[title="Nó Configurar JS Test Driver na janela Serviços"]
3. Na caixa de diálogo Configurar, clique em Procurar e localize o JAR do JS Test Driver que você obteve por download.
4. Selecione Chrome com Conector NetBeans (no NetBeans IDE 7.3, selecione Chrome com Depurador JS do NetBeans) para o browser. Clique em OK.
image::images/html5-js-testdriver-configure.png[title="Caixa de diálogo Configurar JS Test Driver"]

*Observações.* Você só precisa especificar o local do JAR do JS Test Driver. na primeira vez que configurar o JS Test Driver.

A lista de browsers que pode ser obtida e usada para teste se baseia nos browsers instalados no seu sistema. Você pode selecionar vários browsers como slaves, mas para executar o teste, é necessário abrir uma janela que possa ser um slave para o servidor para cada browser. O browsers selecionados serão capturados automaticamente, quando você iniciar o servidor do IDE.

A seleção do Chrome com NetBeans Connector permite depurar os testes executados com o JS Test Driver.

5. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Novo > Outro.
6. Selecione o *Arquuivo de Configuração jsTestDriver* na categoria Testes da Unidade. Clique em Próximo.
7. Confirme se *jsTestDriver* é o Nome do Arquivo.
8. No campo Criar Arquivo, confirme se o local dos arquivos é a pasta  ``config``  do projeto ( ``AngularJSPhoneCat/config/jsTestDriver.conf`` ).

*Observação.* O arquivo de configuração  ``jstestdriver.conf``  deve estar no  ``config folder``  do projeto. Se o local do arquivo criado não for a  ``pasta config`` , clique em Procurar e selecione  ``AngularJSPhoneCat - Arquivos de Configuração``  na caixa de diálogo.

9. Confirme se a caixa de seleção para fazer download das bibliotecas do Jasmine está selecionada. Clique em Finalizar.
image::images/html5-js-testdriver-configfile.png[title="Assistente do Novo Arquivo de Configuração jsTestDriver"]

*Observação.*É necessário fazer download das bibliotecas do Jasmine para executar o jsTestDriver. Se você for notificado de que o IDE não pode fazer download das bibliotecas do Jasmine, verifique as configurações de proxy do IDE na janela Opções.

Quando você clicar em Finalizar, o IDE irá gerar um arquivo de configuração de estrutura  ``jsTestDriver.conf``  e abrirá o arquivo no editor. Na janela Projetos, você poderá ver se o arquivo de configuração foi criado no nó Arquivos de Configuração. Se você expandir a pasta  ``lib``  sob Testes de Unidade, poderá ver que as bibliotecas do Jasmine foram adicionados ao projeto.

image::images/html5-js-testdriver-projectswindow.png[title="Pasta Testes de Unidade na janela Projetos"]

No editor, você pode ver o seguinte conteúdo do arquivo de configuração gerado por default:


[source,java]
----

server: http://localhost:42442

load:
  - test/lib/jasmine/jasmine.js
  - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
  - test/unit/*.js

exclude:

----

O arquivo de configuração especifica a localização default do servidor local que é usado para executar os testes. O arquivo também deve listar os arquivos que precisam ser carregados. Por default, a lista inclui bibliotecas do Jasmine e quaisquer arquivos JavaScript da pasta  ``unidade`` . Os testes geralmente se localizam na pasta  ``unidade`` , mas você pode modificar a lista para especificar as localizações de outros arquivos que devem ser carregados para executar os testes. Para executar os testes de unidade. você também precisa adicionar a localização dos arquivos JavaScript que deseja testar e as bibliotecas JavaScript do Angular à lista de arquivos que serão carregados.

Neste tutorial, se você quiser executar testes usando o JS Test Driver, adicione os seguintes arquivos (em negrito) à lista de arquivos carregados.


[source,java]
----

load:
    - test/lib/jasmine/jasmine.js
    - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
*
    - app/lib/angular/angular.js
    - app/lib/angular/angular-mocks.js
    - app/lib/angular/angular-route.js
    - app/lib/angular/angular-animate.js
    - app/lib/angular/angular-resource.js
    - app/js/*.js
*
    - test/unit/*.js
----
10. Depois de atualizar o arquivo de configuração, na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Testar.

Quando você clica em Testar, o IDE abre automaticamente o executor JS Test no browser Chrome e duas guias na janela de Saída.

image::images/html5-js-testdriver-browserwindow.png[title="jsTestDriver em execução na janela do browser"]

A janela do browser Chrome exibe uma mensagem quando o servidor jsTestDriver está sendo executado. Você pode ver que o servidor está sendo executado no  ``localhost:42442`` . Na guia Servidor do js-test-driver, na janela de Saída, você pode ver o status do servidor.

Observe que o JsTestDriver está em execução em uma guia do browser e o NetBeans Connector está depurando a guia. Você poderá depurar suas unidades de teste se executar testes com o JS Test Driver e selecionar o Chrome com NetBeans Connector como um dos browsers de destino.

image::images/html5-js-testdriver-outputstatus.png[title="Guia Servidor do js-test-driver na janela de Saída"]

*Observação.* A janela do browser deve estar aberta e o servidor jsTestDriver deve estar em execução para executar os testes de unidade. Você pode iniciar o servidor e abrir a janela clicando com o botão direito do mouse no nó JS Test Driver na janela Serviços e escolhendo Iniciar.

image::images/html5-js-testdriver-outputwindow.png[title="Guia Executando testes de unidade JS na janela de Saída"]
11. Escolha Janela > Saída > Resultados do Teste no menu principal para abrir a janela Resultados do Teste e ver os resultados.
image::images/html5-js-testdriver-testresultswindow.png[title="Janela Resultados do Teste"]

Você pode clicar no ícone de marcação verde na margem esquerda da janela para exibir as a lista expandida dos testes aprovados.


== Depurando um Teste de Unidade JS com JS Test Driver

Este exercício demonstra como usar o IDE e o JS Test Driver para depurar unidades de teste.

*Observação.* O NetBeans IDE 8.0 não suporta depuração testes feitos com o executor de teste Karma.

1. Expanda a pasta  ``js``  na janela Projetos e clique duas vezes em  ``controllers.js``  para abrir o arquivo no editor.
2. Modifique a linha 7 no arquivo para fazer as alterações a seguir (em *negrito*). Salve as alterações.

[source,java]
----

function PhoneListCtrl($scope, Phone) {
  $scope.phones = Phone.query();
  $scope.orderProp = '*name*';
}
----

Quando você salva as alterações, a página no web browser é recarregada automaticamente. Você pode ver que a ordem dos telefones na lista foi alterada.

3. Confirme se o servidor JS Test Driver está sendo executado e se a mensagem de status está visível na janela do browser Chrome.
4. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes.
image::images/html5-js-testdriver-testresultswindow-fail.png[title="Janela Teste Reprovado nos Resultados de Teste"]

Quando você executar o teste, poderá ver que um dos testes falhou com a mensagem que o valor "nome" foi encontrado em vez de o valor esperado "idade".

5. Abra a guia Executando testes de unidade JS na janela de Saída.
image::images/html5-js-testdriver-outputwindow-fail.png[title="Guia Teste Reprovado na Execução dos testes de unidade JS na janela de Saída"]

Você poderá ver a mensagem de que é esperado que  ``orderProp``  seja  ``idade``  na linha 41.

6. Clique no link na guia Executando testes de unidade JS para navegar até a linha em que o teste falhou. O arquivo de teste  ``controllersSpec.js``  será aberto no editor na linha 41 (em *negrito*)

[source,java]
----

it('should set the default value of orderProp model', function() {
      *expect(scope.orderProp).toBe('age');*
    });
----

Você pode ver que o teste esperava "idade" como o valor de  ``scopeOrder.prop`` .

7. Defina um ponto de interrupção na linha em que ocorreu a falha no teste (linha 41).
8. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes.

Quando você executar o teste novamente, o contador do programa atingirá o limite de ponto de interrupção. Se você passar o cursor sobre  ``scopeOrder.prop`` , poderá ver na dica de ferramenta que o valor da variável é "nome" quando o ponto de interrupção for atingido.

image::images/html5-js-testdriver-evaluate.png[title="IDE mostrando editor, janela Avaliar Código e janela Variáveis"]

Como alternativa, você poderá selecionar Depurar > Avaliar Expressão no menu principal para abrir a janela Avaliar Código. Se você digitar a expressão  ``scopeOrder.prop``  na janela e clicar no botão Avaliar Fragmento do Código (image::images/evaluate-button.png[title="Botão Avaliar Expressão"])(Ctrl-Enter), o depurador exibirá o valor da expressão na janela Variáveis.

9. Clique em Continuar na barra de ferramentas para finalizar a execução do teste.


[[summary]]
== Resumo

Neste tutorial, você aprendeu que o IDE oferece ferramentas que podem ajudá-lo a depurar e executar testes de unidade em arquivos JavaScript. A depuração é automaticamente ativada para aplicações em HTML5 quando você executa a aplicação no browser Chrome e a extensão NetBeans Connector está ativada. O IDE também permite configurar e executar facilmente testes de unidade em arquivos JavaScript usando o framework de teste Jasmine e o servidor JS Test Driver.

link:/about/contact_form.html?to=3&subject=Feedback:%20Debugging%20and%20Testing%20JavaScript%20in%20HTML5%20Applications[+Enviar Feedback neste Tutorial+]


[[seealso]]
== Consulte Também

Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em link:https://netbeans.org/[+netbeans.org+]:

* link:html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações em HTML5+]. Um documento que demonstra como instalar a extensão NetBeans Connector para Chrome e criar e executar uma aplicação simples em HTML5.
* link:html5-editing-css.html[+Trabalhando com Folhas de Estilo de CSS em Aplicações em HTML5+]. Um documento que demonstra como usar alguns assistentes de CSS e janelas do IDE e como usar o modo Inspecionar no browser Chrome para localizar visualmente os elementos nas origens do projeto.
* Capítulo link:http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm[+Desenvolvendo Aplicações HTML5+] em link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG[+Desenvolvendo Aplicações com o NetBeans IDE - Guia do Usuário+]

Para obter mais informações sobre a execução de testes de unidade usando JS Driver Test, consulte a seguinte documentação:

* Página do Projeto JS Test Driver: link:http://code.google.com/p/js-test-driver/[+http://code.google.com/p/js-test-driver/+]
* Página Inicial do Jasmine: link:http://pivotal.github.com/jasmine/[+http://pivotal.github.com/jasmine/+]
* link:http://transitioning.to/2012/07/magnum-ci-the-jenkins-chronicles-1-intro-to-jstestdriver/[+Introdução ao JsTestDriver+]. Uma introdução ao uso do JsTestDriver com um servidor de integração contínua.