"View Page Source" in browser tabs without any addons

Drag following bookmarklet to your bookmarks toolbar, then click it.

• View Page Source in the current tab
• View Page Source in a new tab

NOTE: If "Tabs"->"Open new windows in a new tab instead" on the Firefox Preference is not checked, the bookmarklet "View Page Source in a new tab" does not work (view page source in a new window.)

Supported browser

These bookmarklets work with not only Firefox but also Safari and Google Chrome. These do not work with IE and Opera because they do not support "view-source:" URI scheme.

"view-source:" URI scheme refer to source-code for a given URI. This bookmarklet generate and open "view-source:" URI.

Extra edition

On firefox, "view-source:" scheme is also applicable to "data:" scheme. Following bookmarklet is the demo to show source code of JavaScript-generated partial html code.

• View Page/Selection Source in a new tab : If some text is selected, then view selection source. If no text is selected, then view page source.

These bookmarklets work with only Firefox.

Original code of this bookmarklet is as follows

javascript:(function() {
  var selection = window.getSelection();
  var url = location.href;
  if (selection.rangeCount != 0) {
    var range = selection.getRangeAt(0);
    if (! range.collapsed) {
      var div = document.createElement("div");
      div.appendChild(range.cloneContents());
      url = "data:text/html;base64," + btoa(div.innerHTML);
    }
  }
  window.open("view-source:" + url, "_blank");
})();

See also

• View Source in Tab : a proposal of changing "View Page Source" behaviour
• Source Viewer Tab : a famous addon for this purpose, but full of future is available
• View-source URI scheme (wikipedia)