This is part two, out of five, focusing on the built-in Developer Tools in Firefox, their features and where we are now with them. The intention is to show you all the possibilities available, the progress and what we are aiming for.
As with the first post, we present each tool with a quick screencast demonstrating some of their capabilities.
The Style Editor
The Style Editor is primarily used to edit, debug or create new stylesheets within the context of the current app. Changes made in the style editor are automatically reflected in the loaded page. If you are not familiar with Cascading Style Sheets (CSS), please be sure to take a look at the CSS MDN documentation.
The Style Editor allows saving the changes made while using the editor. In addition you can also import existing stylesheets and apply them to the current page or individually disable specific stylesheets. The Style Editor is also linked to the Inspector allowing developers quick access to the stylesheet for the inspected element. The following screencast presents an overview of the Style Editor’s features.
For more detailed information on the Style Editor take a look at the MDN documentation.
context as a script loaded into the page. In the screencast, the example uses the jQuery library and some custom script to illustrate this feature.
For more information on the Scratchpad, see the MDN Debugger documentation.
These screencasts give a quick introduction to the main features of these tools. For the full details on all of the Developer Tools, check out the full MDN Tools documentation.
In the next post, we will focus on some Mobile design features including the Responsive Design View and Remote debugging using the App Manager. Please provide your suggestions on what features you would like to see explained in more detail in this upcoming post, by commenting below.