Developer tools help you work faster and smarter so 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 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 sets 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. 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 you are still developing your website, or working with a development team and 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.