1

I need to investigate the css and js files of some websites. When I open them in Chrome developer tools they sometimes look fine and are properly formatted but sometimes a file can run along a single line like this:

enter image description here

And when I paste it into my text editor, Sublime, it looks like this:

enter image description here

Is there a way in developer tools or Sublime that I can format the file properly, so it is clearly legible? I'm curious as to why a big file can run across a single line like that. Is it to protect it in some way, done with their CMS, to make it hard for people like to look into it, because there are other times when css and js files are formatted just perfectly.

user3481992
  • 33
  • 6
  • 2
    You can try https://sublime.wbond.net/packages/CSS%20Format, but, is the file is very large, it can be very slow. – Arturo Volpe May 06 '14 at 20:11

1 Answers1

2

This is called minification and serves two purposes:

  1. Make the code smaller so it downloads faster
  2. Obfuscate code so it's harder to read

In dev tools you can use pretty print:

Chrome pretty print

spacemigas
  • 791
  • 8
  • 10
  • Thanks for that, but it doesn't seem to work f0r me. I found this post which I thought would do it: http://stackoverflow.com/questions/21444641/chrome-developer-tools-debugger-pretty-print-does-not-work, but no luck. Any ideas? Could it have something to do with the code I'm looking at being all one line, whereas the code in the above post has a big messy block of text? – user3481992 May 06 '14 at 20:35
  • Yes, strange. Tested it on a minified file, a big lump of text - a .js, clicked the pretty print and it formatted perfectly. But on my css file - just one giant single line, pretty print has no effect. Is there a word wrap button somewhere? Maybe it minifies just js code? Anyway, +1 for the tip. – user3481992 May 06 '14 at 21:05
  • It works in windows, but not in Linux, which is what I normally use. – user3481992 May 07 '14 at 12:36