Firefox Developer Tools, Part 2: Scratchpad and Style Editor

 Continuing with the review of Firefox development tools, this time Mozilla Hacks covered what the Scratchpad and the Style Editor are all about. If you want to see the first part: Firefox Developer Tools, part 1: The Web Console and the JavaScript Debugger

In this part of the series, the Style Editor and the Scratchpad are explained. The Style Editor is one of those great things without which the life of a web developer would be so much more difficult. Not to mention looking for the return to different problems in a CSS. We can write a CSS from scratch with our browser and then save it, seeing the results on the page in real time.

Firefox Aurora Nightly

Let’s go with the article:
The Style Editor

The Style Editor is primarily used for editing, debugging or creating new style sheets in the context of the current application. Changes made in the style editor are automatically reflected on the loaded page. If you are unfamiliar with Cascading Style Sheets (CSS), be sure to check out the MDN documentation on CSS.

The Style Editor allows us to save the changes made while we use it. Besides that you can also import existing style sheets and apply them to the current page or disable specific style sheets individually. The Style Editor is also linked to the Inspector allowing developers quick access to the style for the inspected element. The following screencast presents the features of the Style Editor above:

For more detailed information on the Style Editor see the MDN documentation

Scratchpad

The Scratchpad has many uses and is essentially a live JavaScript editor and prototyping tool. Using the Scratchpad, a developer can access current page objects, variables, and script. Furthermore, complete functions can be written and tested in the editor within the scope of the live page. These changes can then be attached and saved with the current application.

External JavaScript files can also be loaded and tested. Various execution options are available to allow a developer to execute the code, execute the code and inspect the returned objects, or execute the code and print the results as a comment within the Scratchpad. The following screenscast illustrates some of the features of the Scratchpad. Note that the Scratchpad script runs in the same context as the script loaded on the page. In the screencast, the example uses the jQuery library and some custom scripts to illustrate this feature:

For more information on Scratchpad, see the documentation on MDN.

If you’re not very familiar with JavaScript, check out the MDN documentation for a comprehensive list of resources for learning the language and mechanics.