Skip to content

Instantly share code, notes, and snippets.

/debug-me.html Secret
Created Mar 27, 2017

Embed
What would you like to do?
Profile and timeline debugging example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bad example to debug :D</title>
<style>
.colors .colorBlock {
display: inline-block;
width: 1em;
height: 1em;
float: left;
}
</style>
<script type="text/javascript">
function decimalToHex(d) {
var hex = Number(d).toString(16);
hex = "00".substr(0, 2 - hex.length) + hex;
console.log('converting ' + d + ' to ' + hex);
return hex;
}
function makeColorSorter(frequency1, frequency2, frequency3,
phase1, phase2, phase3,
center, width, len) {
for (var i = 0; i < len; ++i)
{
var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);
console.log('red: ' + decimalToHex(red));
console.log('green: ' + decimalToHex(green));
console.log('blue: ' + decimalToHex(blue));
var div = $('<div class="colorBlock"></div>');
div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
$('#colors').append(div);
}
}
function testColorSorter() {
makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
}
</script>
</head>
<body id="body">
<h1>Debug me</h1>
<button id="clickMe" onclick="testColorSorter();">Click me</button>
<section class="colors" id="colors">
</section>
<a href="https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/">Code example and how to optimize this here</a>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.