I have been trying to find an explanation for this, but everywhere I looked doesn't seem to answer my question. Essentially, whenever I look at the "view page source" option on a webpage like Facebook or my school's home page (gvsu.edu), the source code is just a huge wall of text. As a result, I have a few questions:
Is this how it looks in the editor? If not, why is it formatted this way when I look at the source code?
Is there any way to decipher this code so I can see how it works?
Are there any advantages to formatting the code this way?
Thanks.
Is this how it looks in the editor? If not, why is it formatted this way when I look at the source code?
no, usually programmers try to make code as readable as they can, this is a "minified" version of the code, it's done to make files smaller so people can receive it faster in their browsers.
Is there any way to decipher this code so I can see how it works?
you can use some online tool to like this, you will have to format html, css and javascript individually.
Are there any advantages to formatting the code this way?
already answered, but here I can add that usually you don't format the html/css/js that way, you have a tool that does that job for you like gulp-htmlmin, gulp uglify, cssmin or many others, and you work with a "development" version of the files, when you are done editing you run some scripts and they spit that minified version to you, so you can upload it to your server.
Related
I'm just starting out and there are times where I see a website's function/interaction and I'd really like to read/learn the code they used to better understand how something was done. I know there's view pagesource but it's a mess and Inspect Element is really on the HTML/CSS.
There's a tool at this website, which you can use to turn ugly minified JS code into a beautiful source to read:
https://html-cleaner.com/js/
JS is often minified making it a mess but you can use browser developer tools to prettify it. How you can do it depends on your browser. In Firefox it is an icon in Debugger under the code view. There is no way to fix minified names like Carcigenicate commented but if it's open source library like jQuery you can find the source from their git repo.
I have an Angular project and I would like to know if it's possible to obfuscate the code that rendered the browser, so others cannot copy it.
The Web Project is Angular + TS
And I Would like know if it's possible obfuscate the JS Code that I can view in the browser console
No it is not possible. The browser needs to understand what you have wrote.
As you already said, the only option is obfuscation, it doesn't make your code safe just harder to read.
I'm trying to make a little converter from wk1 (lotus-1-2-3) files to excel for a friend. The files have only simple data, no functions or anything really complicated.
I couldn't find anything related to guidelines to parse or documentation of wk1 file structure. I already tried going through libreoffice code but my C++ is very rusty (academic level, 6 years ago).
I usually code in PHP and JavaScript, and I didn't find anything related to this for these languages.
I believe I read somewhere that Lotus-1-2-3 is abandonware now, so I don't think is "illegal" or anything.
Is there any information available about this? What would be the best approach to "decoding" the data (other than that just give up)?
Thanks
For me there is no reason to re-invent the wheel...
There is a free software that can convert these files.
It is even available as portable app AND it has a command- line parameter to convert between formats:
soffice --headless --convert-to <TargetFileExtension>:<NameOfFilter> file_to_convert.xxx
So if you really need an "own" program: package it with the portable version of libreoffice and make a nice interface to select the source and target file and run the command line...
On trying to debug an issue via FireBug in FF I landed up to a JS that runs hundred lines with no new lines, space and indentation. Though I know JS a little bit but reading this JS code was piratically impossible.
Math.random().toString().replace(/90\./,"");this.res=[];this.req=[];this.ret=null;this.retry=true;this.timeout=null;this.getDuration=function(precision){precision=!isNaN(precision)?(3-precision):0;};..........................and so on non-stop....
Is there a way in FireBug or via an online tool to make this JS code format into proper human readable format?
Try jsBeautifier. It's a pretty cool tool and is web based, so no download required.
You can also find a list of browser extension downloads if you wish.
What you're seeing is obfuscated/minified JavaScript code.
This is done as a pre-production step to reduce download size of the script for web site visitors.
Your options to work with something more readable are (in order of ease of use):
if you have access to the original JavaScript files and can modify the web site, that is you best bet
if you have access to the source maps ( http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ ), you can tell the browser to use those
run an offline beautifier as #AlexMihai suggests
I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".
Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)
(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)
https://github.com/nodejitsu/require-analyzer gets you part of the way there.
One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile
Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.
here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html
view style sheet :
javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
view scripts:
javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i