Scratchpad

Scratchpad is deprecated as of Firefox 70 (bug 1565380), and will be removed as of Firefox 72 (bug 1519103). As an alternative, starting in Firefox 71, you can use the multi-line mode of the JavaScript console input.

Scratchpad proporciona um ambiente para testar com o código JavaScript. Pode escrever, exeutar, e examinar tos resultados do código que interage com a página da Web.

Ao contrário da Consola da Web, que foi desenhada para interpretar uma única linha de código, Scratchpad deixa-o editar grandes partes do código JavaScript, depois execute-o em vários modos, dependendo do modo em que pretende utilizar a saída.

The featured video tutorial shows a case of using Scratchpad with a page run by a local web server. It is also possible to use Scratchpad over pages opened from a local file system, if permission policies allow that. But even with possible limitations present, the HTML code can be either manually entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use Page Inspector's Edit as HTML context menu command.

Utilização

Opening Scratchpad in its own window

There are several different ways to open Scratchpad in its own window:

  • press Shift + F4, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad
  • click the wrench icon (), which is in the main toolbar or under the Hamburger menu (), then select "Scratchpad".

This will open up Scratchpad in its own window.

Abrir o Scratchpad na Caixa de Ferramentas

New in Firefox 47.

From Firefox 47, you can open Scratchpad inside the Toolbox. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the Settings page.

Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in split Console mode: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.

Edição

The Scratchpad window looks something like this (on OS X the menu bar is at the top of the screen):

A screenshot of the Scratchpad

The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.

Conclusão do código

Scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. To list autocomplete suggestions, press Ctrl + Space.

For example, try typing d, then pressing Ctrl + Space. You'll see the autocomplete box, as shown below:

The icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. and cycle through the suggestions and Enter or Tab select the highlighted choice.

Inline documentation

To show the inline documentation popup, press Ctrl + Shift + Space when the cursor is on an identifier. For example, if you type document.addEventListener, then press Ctrl + Shift + Space, you'll see a popup that shows a summary of the function's syntax and a short description:

The "[docs]" link takes you to the MDN documentation for the symbol.

Execução

Once you've written your code, select the code you want to run. If you don't select anything, all the code in the window will be run. Then choose the way you want the code to run using the buttons along the top, using the Execute menu, or using the context menu. The code is executed in the scope of the currently selected tab. Any variables you declare outside of a function will be added to the global object for that tab.

There are four execution options available.

Executar

When you choose the Run option, the selected code is executed. This is what you'd use to execute a function or other code that manipulates the content of your page without needing to see the result.

Inspecionar

The Inspect option executes the code just like the Run option; however, after the code returns, an object inspector is opened to let you examine the returned value.

Por exemplo, se inserir o código:

window

Then choose Inspect, the object inspector is shown that looks something like this:

Inspecting an object in the Scratchpad

Display

The Display option executes the selected code, then inserts the result directly into your Scratchpad editor window as a comment, so you can use it as a REPL.

Reload And Run

The Reload And Run option is only available in the Execute menu. It first reloads the page, then executes the code when the page's "load" event fires. This is useful for running the code in a pristine environment.

Executar o Scratchpad no contexto do navegador

You can run Scratchpad in the context of the browser as a whole rather than a specific web page. This is useful if you are working on Firefox itself or developing add-ons. To do this check "Enable chrome and add-on debugging" in the Developer Tool Settings. Once you've done this, the Environment menu has a Browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals:

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

The Scratchpad execution context is set to browser when a snippet file has
// -sp-context: browser
on the first line.

Atalhos de teclado

Command Windows macOS Linux
Open the Scratchpad Shift + F4 Shift + F4 Shift + F4
Run Scratchpad code Ctrl + R Cmd + R Ctrl + R
Run Scratchpad code, display the result in the object inspector Ctrl + I Cmd + I Ctrl + I
Run Scratchpad code, insert the result as a comment Ctrl + L Cmd + L Ctrl + L
Re-evaluate current function Ctrl + E Cmd + E Ctrl + E
Reload the current page, then run Scratchpad code Ctrl + Shift + R Cmd + Shift + R Ctrl + Shift + R
Save the pad Ctrl + S Cmd + S Ctrl + S
Open an existing pad Ctrl + O Cmd + O Ctrl + O
Create a new pad Ctrl + N Cmd + N Ctrl + N
Close Scratchpad Ctrl + W Cmd + W Ctrl + W
Pretty print the code in Scratchpad Ctrl + P Cmd + P Ctrl + P
Show autocomplete suggestions Ctrl + Space Ctrl + Space Ctrl + Space
Show inline documentation Ctrl + Shift + Space Ctrl + Shift + Space Ctrl + Shift + Space

Atalhos do editor fonte

Esta tabela lista os atalhos predefinidos para o editor fonte.

Nas secção das 'Preferências do Editor' das configurações das ferramentas de desenvolvimento, pode escolher para utilizar Vim, Emacs, ou combinações de teclas de Sublime Text.

Para as selecionar, visite about:config, selecione a definição devtools.editor.keymap, e atribua "vim" ou "emacs", ou "sublime" para essa definição. Se fizer isso, as combinações selecionadas serão utilziadas para todas as ferramentas de desenvolvimento que utilziam o editor fonte. Precisa de reabrir o editor para que a alteração seja aplicada.

A partir do Firefox 33, a preferência de combinação de teclas está exposta na secção de Preferências do Editor das definições das ferramentas de desenvolvimento, e pode definir isso lá, em vez de about:config.

Comando Windows OS X Linux
Ir para a linha Ctrl + J Cmd + J Ctrl + J
Encontrar um ficheiro Ctrl + F Cmd + F Ctrl + F
Encontrar novamente Ctrl + G Cmd + G Ctrl + G
Selecionar tudo Ctrl + A Cmd + A Ctrl + A
Cortar Ctrl + X Cmd + X Ctrl + X
Copiar Ctrl + C Cmd + C Ctrl + C
Colar Ctrl + V Cmd + V Ctrl + V
Anular Ctrl + Z Cmd + Z Ctrl + Z
Refazer Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Indentar Tab Tab Tab
Remover indentação Shift + Tab Shift + Tab Shift + Tab
Mover linha(s) para cima Alt + Up Alt + Up Alt + Up
Mover linha(s) para baixo Alt + Down Alt + Down Alt + Down
Comentar/remover comentário linha(s) Ctrl + / Cmd + / Ctrl + /