1

Is there a browser add-on (for firefox or chrome) that would easily let me open a non minified version of a script file?

eg, a production website would load script.min.js, but usually the script.js would also be available in the same directory. same goes for some css files (style.min.css or style.css)

the .min. notation seems to be used quite a bit

I'm not looking for a pretty-printer, like in this question: Is there a plugin that allows me to automatically unminify the Javascript included on a site?

but for something that would automatically discover the correct unminified file (which would include comments etc)

Couldnt find any through google, but perhaps I missed one?

Community
  • 1
  • 1
Koesper
  • 533
  • 6
  • 19

3 Answers3

3

Here is a bookmarklet

<a href="javascript:(function() {
  var scr=document.getElementsByTagName('script');
  var pop = [],html='';
  for (var i=0;i<scr.length;i++) {
    if (scr[i].src.indexOf('.min.js')!=-1) pop[pop.length] = scr[i].src.replace(/\.min/,'');
  }
  if (pop.length==0) html += 'No .min.js found';
  for (var i=0;i<pop.length;i++) {
    html+='<br/><a href='+pop[i]+' target=_blank>'+pop[i]+'</a>';
  }
  var div = document.createElement('div'), dst=div.style;
  dst.position='absolute';dst.top=0;dst.zIndex=9999;dst.backgroundColor='white';
  div.innerHTML=html;
  document.body.appendChild(div);
})();">unMin</a>

To activate, save the above in a file with html extension, load the page into the browser and drag the link to the link bar

Alternatively copy the href into an existing bookmark and rename it.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • thanks for this! I was hoping for something that would actually change the linked files on the fly, but this already simplifies debugging a little. – Koesper Dec 01 '11 at 13:10
  • Can someone explain how to use this? Does it need to be embedded in the page? – Ben Power May 06 '13 at 06:23
0

Sometimes recovering an "unminified" file is not straightfoward, as can happen if you concatenate Javascript and CSS files for production.

Something you can do is have a folder containing the original files and another production folder that is build via a script. This way switching modes is just a matter of changing from /dev/ to /dist/ in the URL

hugomg
  • 68,213
  • 24
  • 160
  • 246
0

YAML Debug is a bookmarklet that will display all the stylesheets of a page and allow you to activate/deactivate each one (in the Stylesheets tab).

You can combine it with alternate stylesheets, the one used as styleswitchers (as in (1))

<link rel="stylesheet" href="screen.min.css" type="text/css">
<link rel="alternate stylesheet" href="screen.css" type="text/css" title="Not minified">

(1) http://tantek.com/CSS/Examples/codeisfreespeech.html
Go to the page and then in Fx/IE/Opera maybe Safari and Chrome, press Alt key to open the old plain menu, choose Display menu / Page style and finally no style option or current style or any alternate style you added.

Quite old school but still useful :)

FelipeAls
  • 21,711
  • 8
  • 54
  • 74