Gecko debugging – Firefox

Firefox is based on the Gecko open source layout engine used in many applications developed by the Mozilla Foundation and the Mozilla Corporation. It offers good debugging tools and it's evolving quickly, including innovative projects such as Desktop WebRT, which lets you build a desktop web application at runtime that provides web apps with a native-like look and feel along with platform integration APIs on Windows, OS X, and other desktop platforms.

If you are not developing apps for Android or iOS, you can use the Firefox layout engine, which offers some powerful development and debugging tools. Let's quickly explore how to use Firefox/Firebug to inspect and debug your app; as you will see, there are several similarities between the debug tools available in WebKit and Firefox.

Firebug integrated with Firefox puts a great set of developer tools at your fingertips that rivals the features of the WebKit Web Inspector. In order to install the Firebug extension, you have to go to https://www.getfirebug.com/downloads/ and install the latest version. Once installed, you can open the extension by navigating to Tools | Web Developer | Firebug.

The Firebug toolbar gives you access to the HTML source code and CSS rules, lets you explore and debug JavaScript functions, and more:

Once the debugger reaches a breakpoint, you can:

• Explore the variables defined in the block of code in which you set up the breakpoint
• Explore the stack of function/method calls
• Create watches in order to understand how the content of a variable changes during the execution of the code

The Script console in Firebug is amazing. You can type your code in to the right window and then run it and see the results in the console by clicking on the Run button at the bottom right of the panel:

To filter logs, use the All, Errors, Warnings, Info, Debug Info, and Cookies selectors at the top of the window.

As mentioned previously, Firefox has three great native development tools: Scratchpad, Inspect, and Responsive Design View. You can access these tools through the menu bar by navigating to Tools | Web Developer.

Think of Scratchpad as a text editor; you can use it to type and execute JavaScript. The difference between Scratchpad and the console is that it looks like a text editor and you can write all the code you want before executing it:

The Responsive Design View tool lets you change the resolution without resizing the browser. You can also use it to simulate device rotation: