I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.

This is just a quick tip. Pages in Igloo can get quite complicated and can have many different widgets on them. But how can you examine a page without editing it? You need bookmarklets.

Bookmarklets are unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually JavaScript programs. Regardless of whether bookmarklet utilities are stored as bookmarks or hyperlinks, they add one-click functions to a browser or web page.

I make extensive use of bookmarklets when creating or editing content online. I keep a collection of them in my bookmarks bar.

I've created a small bookmarklet which exposes a page's layout:

Let's look a little closer at one of those black boxes: (content blurred in this post just to show we don't care about what's IN the widget)

The widget is highlighted with a dark black border so you can see it. The upper left corner says:

1. What the widget is... in this case, an HTML widget
2. What appearance classes have been applied. In this case, fr-view and no-margin

Usually, I would create a link that you could drag into your bookmarks. Unfortunately, the Froala editor tries to protect you from bookmarklets. (They are small applications that look like links, after all!)  So you need to create an empty bookmark and paste this code in as the URL:

javascript:(function(){var widgets = jQuery(".ig-cpt");widgets.each(function() { jQuery(this).prepend("<span style='background-color:black;color:white;padding:2px 15px;\''>" + jQuery(this).attr("class").substring(22) + "</span>");});jQuery('head').append('<style type="text/css">.ig-cpt{outline:2px solid #333;}.ig-box .hide,.ig-box>div[style*="display: none"]{display:block !important;opacity:.5;}.ig-box .hide .ig-cpt-body,.ig-box>div[style*="display: none"] .ig-cpt-body{background: repeating-conic-gradient(#eeeeee 0% 25%, transparent 0% 50%) 50%/40px 40px;}</style>');})();

Note: Below is an earlier version of the bookmarklet which does not help you debug hidden widgets:

javascript:(function(){var widgets = jQuery(".ig-cpt");widgets.each(function() { jQuery(this).prepend("<span style='background-color: black;color: white;padding: 2px 15px;\''>" + jQuery(this).attr("class").substring(22) + "</span>");});jQuery('head').append('<style type="text/css">.ig-cpt {outline: 2px solid #333;}</style>');})();

Anyway, I hope this helps someone. There are a TON of really helpful bookmarklets you can use. Here's a sampling:

• Holmes The CSS Markup Detective: https://www.red-root.com/sandbox/holmes/index.html
• Jesse Ruderman's collection of web development bookmarklets: https://www.squarefree.com/bookmarklets/webdevel.html