Scratchpad

O Scratchpad, disponível no Firefox 6 ou superior, fornece um ambiente para experiências com código em Javascript. Você pode escrever e testar suas ideias de código interagindo com a página antes de usar suas ferramentas de desenvolvimento corriqueiras para finalizar e limpar o resultado final.

DIferentemente da Console, desenhada para interpretar uma única linha de código, o Scratchpad lhe permite editar grandes trechos de código Javascript e então executá-los de várias formas, dependendo dcomo você quer usar a saída da execução.

Usando o Scratchpad

Para abrir o Scratchpad, pressione Shift+F4, ou vá ao menu Desenvolvedor Web (um submenu em Ferramentas no Mac OSX e no Linux), e selecione Scratchpad. Isso abrirá a janela do editor do Scratchpad, que inclui um comentário que contém algum resumo de como usar o editor. De la você ja pode começar a escrever seu Javascript e testá-lo.

A janela do Scracthpad se parece com essa abaixo (no Mac OSX a barra de menus fica no topo da tela):

Veja  Usando o Editor de código fonte para documentação sobre o editor em si, incluindo atalhos de teclado que serão bem úteis.

O menu Arquivo oferece opções para salvar e carregar trechos de Javascript, de forma que você possa reusar código mais tarde caso queira.

Executando seu código

Uma vez que você tenha escrito seu código, selecione a parte que desenha executar. Se você não selecionar nada, todo o código no editor será executado. Clique com o botão direito do mouse (ou vá até o menu Executar na barra superior) e escolhar a forma que deseja rodar seu código. Há quatro opções disponíveis.

Executar

Quando você escolhe essa opção, o código selecionado é executado. Essa opção é a que você escolherá caso queira executar uma função ou outro trecho que manipule o conteúdo da página sem que você precise ver o resultado.

Inspecionar

A opção de inspeção executa o código da mesma forma que a opção Executar; entretanto depois que a execução terminar e houver um retornar, um inspetor de objeto é aberto, o que te permite analizar o valor retornado.

Por exemplo, se você entrasse com o código:

window

E então escolher inspecionar, o inspetor de objetos abrirá e se parecerá com algo assim:

Visualizar

A opção de visualizar executa o código selecionaro e então insere o resultado diretamente no editor como um comentário. Essa é uma forma conveniente de manter um log dos seus testes enquanto você trabalha. Você também pode usar esse recurso como uma calculadora num momento de pressa, apesar de que se você não tem um programa que sirva como uma calculadora melhor, você deve ter problemas maiores para resolver.

Recarregar e executar

A opção de recarregar e executar primeiro recarrega a página e entã executa o código assim que o evento "load" da página é disparado. Isso é útil para executar código em um ambiente fresquinho.

Cenários de uso do Scratchpad

Existem várias formas de usar o Scratchpad de maneira interessante. Essa seção cobre alguns como exemplo.

Testando seu código

O Scratchpad é particularmente útil para testar seu novo código em um ambiente real de navegador; você pode copiar o código que você está debugando no Scracthpad e então executá-lo e, na sequência, melhorá-lo até que ele funcione corretamente. Uma vez isso aconteça, copie o código de volta para o seu arquivo com o script de interese e seu trabalho terminou. Em muitos casos, você pode escrever, debugar e testar seu código sem nem recarregar a página.

Trechos de código reutilizáveis

O menu Arquivo do Scratchpad oferece comandos para salvar e carregar código Javascript. Isso ajuda  a manter por perto pedações de Javascript que você usa com frequência. Por exemplo, se você está trabalhando em um site que usa requisições AJAX para carregar dados, você pode manter trechos que façam essas operações para teste e verificação dos dados. De forma semelhante, você pode manter funções de interesse com propósito geral para debugar, como funções de dump, saída ou outros tipos de informação sobre o DOM.

Escopo do Scratchpad

O código rodado no Scratchpad é executado em escopo global do aba selecionada no momento da execução. Quaisquer variáveis que você declare fora de uma função serão adiconadas ao objeto global da aba.

Usando Scratchpad para acessar partes internas do Firefox

Se você está trabalhando sobre o próprio Firefox, ou desenvolvendo complementos, você pode achar útil acessar as áreas internas do browser usando o Scratchpad. Para fazer isso modifique o devtools.chrome.enabled para true usando about:config. Feito isso, o menu Ambiente terá a opção Browser; estando ela selecionada, o seu escopo é todo o navegador ao invés de somente o conteúdo da página.

Atalhos do Teclado