AEM Author Mode Browser Shortcuts

As an Adobe Experience Manager user or developer you will probably find yourself switching frequently between Author and Preview modes while testing new page content. The preview mode is great but the most accurate representation of a published AEM page is when the WCMMode is completely disabled.

While the WCMMode can be manually controlled via appending the following query string onto your page url, ?wcmmode=disabled, it is cumbersome to keep toggling this on and off when you want to preview something quickly. So, one of the first things I looked for when I started developing for AEM was a way to quickly switch between these modes via a browser extension so I didn’t have to keep adding it manually. I found an article written back before touch UI had been created for AEM which lets you toggle the WCMMode via a bookmarklet. (https://www.danklco.com) This worked great for working on classic UI but I needed to update it in order to get it to work with touch UI.

The end result is this javascript snippet,

var DISABLED = 'wcmmode=disabled';
  var EDITOR = '/editor.html';
  // Creates the path by combining the path and query string parameters
  var createURL = function(path, qs, hash) {
    var url = path;
    if(qs.length != 0 && !(qs.length == 1 && qs[0] == '')) {
      url += '?' + qs.join('&');
    }
    url += hash;
    return url;
   };
   var hash = '';
   var parameters = [];
   if (window.location.search.substring(1) != '') {
     parameters = window.location.search.substring(1).split('&');
  }
  var path = '';
  if (window.location.pathname.substring(0, EDITOR.length) != EDITOR) {
    // We are not in author mode
    path = EDITOR + window.location.pathname;
    if(parameters.indexOf(DISABLED) != -1){
      // remove the wcmmode disabled parameter
      parameters.pop(DISABLED);
    }
    hash = window.location.hash;
  } else {
    // this page is in author mode, get the URL info from the frame
    path = window.location.pathname.substring(EDITOR.length, window.location.pathname.length);
    if(window.location.search.substring(1) != '') {
      parameters = window.location.search.substring(1).split('&');
    }
    if(parameters.indexOf(DISABLED) == -1){
      // add the disabled parameter
      parameters.push(DISABLED);
    }
    hash = window.location.hash;
  }
  var url = createURL(path, parameters, hash);
  window.location = url;

To add this to your browser so you can use it as a bookmark just do the following,

1. Copy the minified version of the above JavaScript code from: https://gist.github.com/kevinroberts/e6fb762163de5edd7cad89f1bae2f707
2. Create a new bookmark in your browser
3. Use the minified JavaScript code as the page URL
4. Click the newly created bookmark whenever you want to switch your page from author to preview/disabled mode!