Create visual bookmarklet

[qweek]

Look at http://kaaes.github.io/timing/ and http://blog.newrelic.com/wp-content/uploads/performance_for_this_trace.png

[addyosmani]

That actually looks really neat. Worth considering :)

[justmarkup]

As far as I know, we can't style console.table, but we can style console.log eg. console.log('%c appcacheTime 100ms', 'color: #fff; background:red;');

So, we could define good (green background), okayish (orange background) and bad (red background) times and show all good, bad... times in groups with console.group()

This ways you can see at a glance where the bootlenecks are.

I think it would be a good idea to have this as an extra function, like timing.printGroups();

What do you think?

[addyosmani]

I like the idea :) On 2 Jan 2015 16:51, "Michael Scharnagl" notifications@github.com wrote:

As far as I know, we can't style console.table, but we can style console.log eg. console.log('%c appcacheTime 100ms', 'color: #fff; background:red;');

So, we could define good (green background), okayish (orange background) and bad (red background) times and show all good, bad... times in groups with console.group()

This ways you can see at a glance where the bootlenecks are.

I think it would be a good idea to have this as an extra function, like timing.printGroups();

What do you think?

— Reply to this email directly or view it on GitHub https://github.com/addyosmani/timing.js/issues/5#issuecomment-68541404.

[justmarkup]

Great :-) Thinking about it again I see one big problem - defining wheter a time is fast, okay or slow? Any idea how to define this data?

[sktguha]

Hi @addyosmani sir, Here is a basic bar graph rendering I created using chart.js (http://www.chartjs.org/docs/ ) Obviously this is a very bare bones rendering and code. Please let me know what improvements can be made IMAGE preview : http://imgur.com/bvYABm0 HTML TO EXECUTE : http://htmlpreview.github.io/?https://github.com/sktguha/computer-science-in-javascript/blob/master/temp.html (it seems you need to load page twice for proper graph to appear. on linux mint 16 chrome 40.0.2214.94) SOURCE FOR HTML : https://github.com/sktguha/computer-science-in-javascript/blob/master/temp.html (printchart function I added at the end) After improving I hope it can be converted into a bookmarket Thanks Saikat

[sktguha]

Hi, Any updates ?