structuring html/css/java script code from website to be more readable

Question

this maybe a stupid question or something.. when i open google.com and see the 'page source', i see a lot of impossible-to-read-by-human kind of code..

Google (function(){window.google={kEI:'uS57VJ-SCNONuASrhYHwDA',kEXPI:'3300105,3300130,3300137,3300161,3310366,3310751,3312478,3700322,4010073,4011550,4011551,4011556,4011558,4011559,4016824,4019182,4020346,4020562,4021073,4021598,4022317,4022495,4023373,4023567,4023631,4023677,4023709,4024679,4024932,4024970,4025113,4025115,4025119,4025170,4025285,4025836,8300096,8500394,8500700,8500820,8500852,10200083,10200716,10200828,10200834,10200850',authuser:0,j:{en:1,bv:21,pm:'p',u:'e57ea291',qbp:0,rre:false},kSID:'uS57VJ-SCNONuASrhYHwDA'};google.kHL='en';})();(function(){google.lc=[];google.li=0;google.getEI=function(a){for(var b;a&&(!a.getAttribute||!(b=a.getAttribute("eid")));)a=a.parentNode;return b||google.kEI};google.https=function(){return"https:"==window.location.protocol};google.ml=function(){};google.time=function(){return(new Date).getTime()};google.log=function(a,b,d,e,k){var c=new Image,h=google.lc,f=google.li,g="",l=google.ls||"";c.onerror=c.onload=c.onabort=function(){delete h[f]};h[f]=c;d||-1!=b.search("&ei=")||(e=google.getEI(e),g="&ei="+e,e!=google.kEI&&(g+="&lei="+google.kEI));a=d||"/"+(k||"gen_204")+"?atyp=i&ct="+a+"&cad="+b+g+l+"&zx="+google.time();/^http:/i.test(a)&&google.https()?(google.ml(Error("a"),!1,{src:a,glmm:1}),delete h[f]):(c.src=a,google.li=f+1)};google.y={};google.x=function(a,b){google.y[a.id]=[a,b];return!1};google.load=function(a,b,d){google.x({id:a+m++},function(){google.load(a,b,d)})};var m=0;})();google.kCSI={};

bla.. bla.. bla..

the question is obvious.. is there any tool i can use to read this code more 'fun'? or at least more readable?

UPDATE: i want this enter image description here

to be looked like this: enter image description here

that is minified javascript code, you could use a beautifier but the code will still be using shortened variable function names etc so it will still be hard to read — Patrick Evans
– Patrick Evans, Commented Nov 30, 2014 at 14:51
well thank you bro, really a helpful one, any way my purpose is to do some analysis about code.. well, maybe a boring stuff hahah.. please hit the answer button dude, so i can close this post :D THANK YOU! — Altiano Gerung
– Altiano Gerung, Commented Nov 30, 2014 at 15:00

ianaya89 · Accepted Answer · 2014-11-30 15:00:36Z

1

Instead of looking at the page source use the chrome dev tools.

Open the web site you want with chrome.
Make a right click on it and select the option inspect element.
When the tool is open take a look at the tab Elements, there you can see and handle de the DOM and you will see an HTML structure easy to read and follow.

answered Nov 30, 2014 at 15:00

ianaya89

4,2613 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ianaya89 Over a year ago

@AltianoGerung you can see it in the same tool, go to the Source tab, there you will a find a left menu with al your scripts files. When you open a script in the bottom bar you can find a button like this '{}', click it to beatufy the code and make it readable.

Altiano Gerung Over a year ago

i've seen that, but still hard to tell

Abhishek Yadav · Accepted Answer · 2014-11-30 15:05:10Z

1

you can try the online editor such as www.textfixer.com/html/uncompress-html-code.php

answered Nov 30, 2014 at 15:05

Abhishek Yadav

412 silver badges7 bronze badges

Comments

Altiano Gerung · Accepted Answer · 2014-11-30 15:08:46Z

0

http://ctrlq.org/beautifier/ or http://jsbeautifier.org/

thank to @Patrick Evans , the man on the comment panel

answered Nov 30, 2014 at 15:08

Altiano Gerung

8542 gold badges15 silver badges30 bronze badges

Collectives™ on Stack Overflow

structuring html/css/java script code from website to be more readable

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related