Morph’s Developer Toolset – An Introduction

One of the lesser visible features of the Morph Framework is its Developer Toolset. Today I am going to briefly take you through the Developer Toolset, as well as show you a quick example of the toolset’s available options.

Later on in this series, I will take you through a detailed look into the individual tools that are present and how they can help you as a developer or designer, speed up your Joomla! website development and help you “go live faster”.

What is The Developer Toolset?

The Developer Toolset was something we built into the Morph Framework in the early pre-beta development days. It was initially added as a means to speed up debugging and to make testing user sites easier as well as help us during the development of Morph.

It has been present since the early private beta versions, but up until this point, it was something that was never showcased to the users because it was not yet ready for public consumption. While you may have seen some references to it in the change logs, or in the forums, it was never something that was adopted as one of the features of the Morph Framework. The more we developed Morph and the more we added/refined new features and tools, the more we realized the power of the Developer Toolset and how beneficial it could be to you. We realized that there are certain tools we here at Prothemer and you as designers and developers could not go without.

But, rather than sit here and take you through the concepts and ideals of the toolset, lets get started on how you can actually use it for your website.

MDT (Morph’s Developer Toolset) is actually comprised of 2 toolsets. One which can be accessed directly from the visual layer, or frontend of your website, and another, which can be accessed from the Configurator component. The 2 share many of the same tools, but each are very specific to their usage.

1. Frontend Toolset

The frontend toolset was built with production websites in mind – “live” sites that are already up and running, and have a growing user base. If a javascript error or CSS layout issue were to pop up, taking your site offline to fix these errors/issues could mean a loss of visitors, loss of sales or unfortunate SEO results. With this in mind, we adopted the earlier tools and merged them into one toolset, and thus created the Developer Toolbar. The Developer Toolbar gives you access to a range of tools that can help you debug your site, test performance and layouts, all without distracting your viewers browsing experience. Yes, you heard, or read correctly, the Developer Toolbar gives you, and only you access to the tools. Your viewers won’t even know that you are working on your site. But wait, what if I am still developing my website, or working with a development team and I want them all to have access to the tools? Ask no more. The developer toolbar has 2 states: Session based, single user state – This is the first method I mentioned, and is only visible in the browser it was enabled in. Using any of the tools will only effect that session and user’s experience. Site wide, multiple user state – This is aimed for development sites or development teams and is enabled via Configurator. This will enable the Developer Toolbar for anybody who views your site. But again, using any of the tools will only effect the users experience and be contained to their, or your browser.

In short, both states allow full usage of the tool and neither of them make permanent changes to your website, but one is accessed when needed and the other via a switch in Configurator.

But how do we use it I hear you asking.  It’s really as simple as this:

1. While viewing your website, add the following – without quotes – to your url: “?show_devbar“
2. Wait for the page to reload and view the awesomeness that is the Developer Toolbar.
3. To disable the toolbar, change show_devbar to hide_devbar.

If you wish to enable the Developer Toolbar site-wide, login to your administration area, navigate to Configurator and then under the General tab, click on Debugging, switch the Developer Toolbar to “On” and save.

2. Backend Toolset

The backend toolset is very much the same as the Developer Toolbar, but has 3 distinctive differences:

1. Changes are site-wide and visible to all who view your website.
2. The tools are only accessible via Configurator and there is no toolbar (unless you have it activated).
3. There are a few more tools.

You may be asking why we would have them as a permanent option at all, and to answer, it comes down to personal preference and server setups. Some of the features may not work on certain server setups or some website owners might not want to have some of the features enabled. Also to further clarify, if you look at the Developer Toolbar and the Toolset that is available to you in the Performance and Debugging tabs in Configurator, you will see that certain tools are not suitable for production sites, and as such would take up unnecessary real-estate on the toolbar for the tools that can and will be used in production websites.

As I mentioned earlier on in this post, I will be going through each of the tools in a bit more detail later on in the series, as well as posting a few videos/screencasts, showing you how to use the tools as well as how they can benefit you.

Till then. Byron

---

Developer tools help you work faster and smarter – We have included a number of tools that you can use when working with Morph to manage and extend your website to suite your specific needs. The Configurator component lets you manage hundreds of features available and the mind-blowingly simple interface makes it all easy to use for both Joomla! beginners and more experienced developers. Test drive here

---

Related blog posts:

Tags: configurator, development, Joomla, Morph