Wisselen tussen test- en productieomgeving met één klik

Vroeger waren bookmarklets in browsers heel populair. Tegenwoordig zie je ze niet zo veel meer, en gebruiken we vooral browser extensies.

Maar soms heb je gewoon een klein dingetje waarvoor een paar regels JavaScript (of nu ja, één regel, want je moet het comprimeren) de ideale oplossing zijn.

Zo merkte ik dat ik voor bijvoorbeeld het ontwikkelen van deze website regelmatig wissel tussen de actieve website op https://hetkansimpeler.nl, en mijn testomgeving op http://hetkansimpeler.nl.localdev:50568/.

En dan wil ik natuurlijk wel wisselen op dezelfde pagina, dus bijvoorbeeld tussen https://hetkansimpeler.nl/blog/ en http://hetkansimpeler.nl.localdev:50568/blog/.

Simpel stukje JavaScript lost het op:

javascript:(function() {
	const mappings = {
		'https://example.com': 'http://example.com.localdev:1313',
		'https://example.org': 'http://example.org.mytest:80'
	};

	// we willen van example.com naar example.com.localdev:1313
	// maar ook omgekeerd natuurlijk, en dat zonder dat we alles twee keer
	// moeten benoemen in de mappings
	function invertMapping(obj) 
	{
		let invertedObj = {};
		for (var key in obj) 

			if (obj.hasOwnProperty(key)) 
			{
				invertedObj[obj[key]] = key;
			}
		return invertedObj;
	}

	const reverseMappings = invertMapping(mappings);

	const currentDomain = document.location.hostname;
	const currentDomainInclProtocol = document.location.protocol + '//' + currentDomain;
	let fullCurrentDomain = currentDomainInclProtocol;

	// als de port expliciet genoemd staat in de URL moeten we die meenemen in de mapping
	// als er geen port genoemd is moeten we nu geen ":" gaan toevoegen aan het einde
	if (document.location.port.length > 0) 
	{
		fullCurrentDomain += ':' + document.location.port;
	}

	var fullPath = window.location.pathname + window.location.search + window.location.hash;
	var targetUrl = mappings[fullCurrentDomain] || reverseMappings[fullCurrentDomain];

	// redirect naar de nieuwe URL als we die hebben, en laat anders een simpele alert zien aan de gebruiker
	if (targetUrl) 
	{
		document.location = targetUrl + fullPath;
	} 
	else
	{
		alert('Onbekende domeinnaam ' + fullCurrentDomain);
	}
})();

Het enige wat je hier moet doen is je eigen domeinnamen invullen bij de mapping in het begin, en het script minimaliseren. Dan ziet het er bijvoorbeeld zo uit:

!function(){const o={"https://example.com":"http://example.com.localdev:1313","https://example.org":"http://example.org.mytest:80"};const t=function(o){let t={};for(var n in o)o.hasOwnProperty(n)&&(t[o[n]]=n);return t}(o),n=document.location.hostname;let e=document.location.protocol+"//"+n;document.location.port.length>0&&(e+=":"+document.location.port);var a=window.location.pathname+window.location.search+window.location.hash,c=o[e]||t[e];c?document.location=c+a:alert("Onbekende domeinnaam "+e)}();

Zet er javascript: voor en plaats het in een bookmark, om snel te kunnen wisselen tussen twee omgevingen.