-
-
Save anonymous/7b9a5ed12572eec6b385657b8e50300f to your computer and use it in GitHub Desktop.
Profile and timeline debugging example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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