js debugshowhidden

js bookmarklet for showing all meta/link/style/script tags on page, with some basic attributes like src/name etc.

by Laurens Maneschijn

HTML

<h1>
bookmarklet for showing all meta/link/style/script tags on page.
</h1>

<button>test</button><br>

<br>
minimized 1-line for easy bookmarklet copy paste:<br>
(see javascript panel for original source)<br>
<textarea>
javascript:(function($){if(!$||!$.fn){return alert('missing $');}$('html').toggleClass('debugshowhidden');$('#style_debugshowhidden').remove();var $s = $('<style id="style_debugshowhidden">');$s.appendTo( $('head, body').eq(0) );$s.append(`html.debugshowhidden head{display: block;}html.debugshowhidden meta ,html.debugshowhidden link ,html.debugshowhidden style ,html.debugshowhidden script {display: block;background: #fcc;border: 1px solid red;padding: 2px;font-family: monospace;white-space: pre;overflow: auto;max-width: 100%;resize: both;}html.debugshowhidden meta::before ,html.debugshowhidden link::before ,html.debugshowhidden style::before ,html.debugshowhidden script::before {content: '\\003c Hidden \\003e: ';display: block;font-weight: bold;white-space: pre;}html.debugshowhidden script::before { content: '\\003cscript\\003e'; }html.debugshowhidden script[src]::before { content: '\\003cscript\\003e \\A src=' attr(src); }html.debugshowhidden script[type]::before { content: '\\003cscript\\003e \\A type=' attr(type); }html.debugshowhidden script[type][src]::before { content: '\\003cscript\\003e \\A type=' attr(type) ' \\A src=' attr(src); }html.debugshowhidden style::before { content: '\\003cstyle\\003e'; }html.debugshowhidden style[src]::before { content: '\\003cstyle\\003e \\A src=' attr(src); }html.debugshowhidden link::before { content: '\\003clink\\003e '; }html.debugshowhidden link[href]::before { content: '\\003clink\\003e \\A href=' attr(href); }html.debugshowhidden link[rel]::before { content: '\\003clink\\003e \\A rel=' attr(rel); }html.debugshowhidden link[href][rel]::before { content: '\\003clink\\003e \\A rel=' attr(rel) ' \\A href=' attr(href); }html.debugshowhidden meta::before { content: '\\003cmeta\\003e '; }html.debugshowhidden...

CSS

h1{ font-size: 1em;}
textarea {
  white-space: pre;
  width: 100%;
}

JavaScript

// dummy line to prevent it triggering immediately:
$('html').toggleClass('debugshowhidden');
// click on button to toggle effect:
$(document.body).on('click', 'button',function(e){ $('html').toggleClass('debugshowhidden'); });


// javascript:
(function($){
	if(!$||!$.fn){return alert('missing $');}
	$('html').toggleClass('debugshowhidden');
	$('#style_debugshowhidden').remove();
	var $s = $('<style id="style_debugshowhidden">');
	$s.appendTo( $('head, body').eq(0) );
	$s.append(`
html.debugshowhidden head{
	display: block;
}
html.debugshowhidden meta ,
html.debugshowhidden link ,
html.debugshowhidden style ,
html.debugshowhidden script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
    font-family: monospace;
    white-space: pre;
    overflow: auto;
    max-width: 100%;
    resize: both;
}
html.debugshowhidden meta::before ,
html.debugshowhidden link::before ,
html.debugshowhidden style::before ,
html.debugshowhidden script::before {
    content: '\\003c Hidden \\003e: ';
    display: block;
    font-weight: bold;
    white-space: pre;
}

html.debugshowhidden script::before                     { content: '\\003cscript\\003e'; }
html.debugshowhidden script[src]::before                { content: '\\003cscript\\003e \\A src=' attr(src); }
html.debugshowhidden script[type]::before               { content: '\\003cscript\\003e \\A type=' attr(type); }
html.debugshowhidden script[type][src]::before          { content: '\\003cscript\\003e \\A type=' attr(type) ' \\A src=' attr(src); }
html.debugshowhidden style::before                      { content: '\\003cstyle\\003e'; }
html.debugshowhidden style[src]::before                 { content: '\\003cstyle\\003e \\A src=' attr(src); }
html.debugshowhidden link::before                       { content: '\\003clink\\003e '; }
html.debugshowhidden link[href]::before                 { content: '\\003clink\\003e \\A href=' attr(href); }
html.debugshowhidden link[rel]::before             ...