Turn on developers mode in your website

Recently I’ve been working on two websites ([bt-link href=”http://irarc.com” type=”text”]IrArc.com[/bt-link] and [bt-link href=”http://nextoffice.ir” type=”text”]NextOffice.ir[/bt-link]) which have a common point; They rely heavily on Javascript! In the both cases, they use Ajax technology to fill a HTML element with retrieved data. To debug them I had to refresh the whole page which wastes about 2s of my life every time!

To save this time, I’ve developed a simple “Developer” class which allows me to control the application flow without actually surfing the whole website. For example I could press “R” on my keyboard and an Ajax request would be sent to the server without interacting directly with the website itself.

The problem was that these simple hacks could be accidentally triggered by users. To solve it I defined two modes for these applications; Developers and non-Developers mode (default one). These states were simply activated/deactivated by running following code into the browsers command line:

[bt-code lang=”javascript” title=”JS”]Developer.turnOn();[/bt-code]
[bt-code lang=”javascript” title=”Developer.js”]var Developer =
turnOn: function()
console.log(‘Welcome to Developers mode :D’);

onKeyDown: function(e)
switch (e.keyCode)
case 82: //R

And Everything worked fine! Yet to reduce friction more and more, I developed this bookmarklet wraps that one line command and you can run it by pressing this bookmark button. Just drag and drop Turn On Developers Mode on your bookmarks bar and press it every time you want to visit your websites as a developer!

Happy “Saving 2 Seconds of Your Life”!