Web Development: Firefox 16 and the developer toolbar
A few days ago Mozilla has released the new Firefox 16.
There are a few interesting things we should consider in this new release:
1) the incremental garbage collection which improves the browser overall performance;
2) web app support;
3) better CSS3 animations;
4) reader mode for Android devices improves the reading experience;
5) VoiceOver, a text reader for OSX systems;
6) the new developer toolbar.
The last is what we are talking about here: the developer toolbar. Let's see what it can do.
Command line
The new tool is accessible by pressing shift+F2. A grey toolbar will appear at the bottom of the viewport.
What appears immediately to all of us, is some sort of command line. Is it? Yes, it actually is a command line.
At the moment there are some interesting ways of using it. The following is a list of all available commands:
addon: manages addons
break: manages break point and sections
calllog: commands used to manage functions calls logs
console: console commands
cookie: shows and modifies cookies
dbg: manages the debugger
edit: changes the page resources
export: resources export
firebug: Web Developer Evolved
help: helps us on available commands, showing options and everything else we need to know on a specific command
inspect: inspects a node
pagemod: edit a page
pref: preferences
resize: manages the flexible view mode
restart: restarts Firefox
screenshot: saves a screenshot of the page
tilt: show your web page in 3D
It would take a whole set of articles just to explore everything about the above commands. However I suspect you are all going to look what they are actually doing in depth as soon as you have installed Firefox 16.
But there's more...
Other tools
Other switches are available on the right hand side of the Developer Toolbar.
The first is the Web Console which will show us errors and warnings for the viewed page. We already know something about the Web Console because it's similar to the Error Console, accessible from the top right corner of the top toolbar in Firefox (remember those green checks or red badges?).
Analysis allows us to select and inspect elements on a page. Quite useful in order to see how an element is behaving during web development and coding.
The Debugger is exactly what it says. If you already use Firebug, you won't find any difficulties in using the developer toolbar debugger.
Conclusion
I do hope that this new version will improve the browsing experience. I've lately noticed that Firefox is getting too "big" and slow. While the first releases were very fast and light, lately it has really began to suffer from annoying strange behaviours (for example the use of RAM).
However, the introduction of the Developer toolbar is really something we, developer, might value a lot.
I invite you to download and try Firefox 16... and see with your own eyes if this tool will help you and how.
Let me know what you're thinking about it.
There are a few interesting things we should consider in this new release:
1) the incremental garbage collection which improves the browser overall performance;
2) web app support;
3) better CSS3 animations;
4) reader mode for Android devices improves the reading experience;
5) VoiceOver, a text reader for OSX systems;
6) the new developer toolbar.
The last is what we are talking about here: the developer toolbar. Let's see what it can do.
Command line
The new tool is accessible by pressing shift+F2. A grey toolbar will appear at the bottom of the viewport.
What appears immediately to all of us, is some sort of command line. Is it? Yes, it actually is a command line.
At the moment there are some interesting ways of using it. The following is a list of all available commands:
addon: manages addons
break: manages break point and sections
calllog: commands used to manage functions calls logs
console: console commands
cookie: shows and modifies cookies
dbg: manages the debugger
edit: changes the page resources
export: resources export
firebug: Web Developer Evolved
help: helps us on available commands, showing options and everything else we need to know on a specific command
inspect: inspects a node
pagemod: edit a page
pref: preferences
resize: manages the flexible view mode
restart: restarts Firefox
screenshot: saves a screenshot of the page
tilt: show your web page in 3D
It would take a whole set of articles just to explore everything about the above commands. However I suspect you are all going to look what they are actually doing in depth as soon as you have installed Firefox 16.
But there's more...
Other tools
Other switches are available on the right hand side of the Developer Toolbar.
The first is the Web Console which will show us errors and warnings for the viewed page. We already know something about the Web Console because it's similar to the Error Console, accessible from the top right corner of the top toolbar in Firefox (remember those green checks or red badges?).
Analysis allows us to select and inspect elements on a page. Quite useful in order to see how an element is behaving during web development and coding.
The Debugger is exactly what it says. If you already use Firebug, you won't find any difficulties in using the developer toolbar debugger.
Conclusion
I do hope that this new version will improve the browsing experience. I've lately noticed that Firefox is getting too "big" and slow. While the first releases were very fast and light, lately it has really began to suffer from annoying strange behaviours (for example the use of RAM).
However, the introduction of the Developer toolbar is really something we, developer, might value a lot.
I invite you to download and try Firefox 16... and see with your own eyes if this tool will help you and how.
Let me know what you're thinking about it.