#CODE SCRATCHPAD CODE#

Reload the current page, then run Scratchpad code Run Scratchpad code, insert the result as a comment Run Scratchpad code, display the result in the object inspector The Scratchpad execution context is set to browser when a snippet file has 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 To do this check 'Enable chrome and add-on debugging' in the Developer Tool Settings. This is useful if you are working on Firefox itself or developing add-ons. You can run Scratchpad in the context of the browser as a whole rather than a specific web page. Running Scratchpad in the browser context This is useful for running the code in a pristine environment. It first reloads the page, then executes the code when the page's 'load' event fires. The Reload And Run option is only available in the Execute menu. 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. Then choose Inspect, the object inspector is shown that looks something like this: 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.įor example, if you enter the code: window 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. When you choose the Run option, the selected code is executed. There are four execution options available. Any variables you declare outside of a function will be added to the global object for that tab. The code is executed in the scope of the currently selected tab. 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. If you don't select anything, all the code in the window will be run. Once you've written your code, select the code you want to run. The '' link takes you to the MDN documentation for the symbol. addEventListener, then press Ctrl + Shift + Space, you'll see a popup that shows a summary of the function's syntax and a short description: To show the inline documentation popup, press Ctrl + Shift + Space when the cursor is on an identifier. ↑ and ↓ cycle through the suggestions and Enter or Tab select the highlighted choice. The icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. You'll see the autocomplete box, as shown below: To list autocomplete suggestions, press Ctrl + Space.įor example, try typing d, then pressing Ctrl + Space. Scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like. The Scratchpad window looks something like this (on OS X the menu bar is at the top of the screen): 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. Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console.

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

Code scratchpad