Slow down browser rendering

Question

Is there a way to slow down browser DOM rendering and JS execution for development so we can see which parts of the website are too JS intensive and might be slow on slower machines? Maybe an extension for Chrome/Firefox for Linux/OSX?

Some clarification:

It's not about connection or testing the speed of the browser! It's just for our developers to see which parts of the page are rendered slowly or are "glitchy". For example when you use ajax and you are loading something you show a loader, but just after the loader is shown the loaded part is shown too. We want to see that in slow motion. Like when you press SHIFT in OSX when doing Expose.

PS. I did find some articles on delaying Internet connection, but that's not enough in this case.

PPS. Loading everything in VMs didn't work for us.

PPPS. Using slow down code like proposed in Javascript code for making my browser slow down is not the best option in my opinion.

Answer 1

The accepted answer is good; I use and recommend Chrome Dev Tools as well.

As an alternative to Chrome Dev Tools:

Several 'website performance analysis' services offer timeline views. Run some internet searches and you'll find various free and paid options.

Try webpagetest.org

It's open source, highly regarded and has been running for years. It may offer different information, or is accessible in a different way, than Chrome Dev Tools.

In the test results, click "Filmstrip View".

Answer 2

Converting what @z0r said in the comments to an answer:

---

In Chrome, open devtools and select the Performance tab

Make sure Screenshots is checked

Press the record button (or hit Ctrl + E)

Do your activity

Stop recording

Hover over the timeline to see the screenshots of the screen as things change.

Answer 3

Use the timeline or profiler on your browser inspector. Here you can see, what functions take down the speed.