Develop Reference

Difficult to read source code for some web pages?

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.

When debugging JavaScript using the Chrome developer tools, what information can I use to diagnose a site crash?

What information can I take from the following debug pause? I don't see any information that I can use to identify the problem :s
UPDATE:
console is empty

The code you show is minified, that's why it's only one line and not readable nor directly debbugable.
But you have a small button { } at the bottom left of the screen you show (the fifth from the left), it lets you beautify the code. Click on it.
You can put breakpoints in this beautified code in a much precise way.

When you are debugging your own website, you should load the uncompressed version of jQuery and any other libraries you need to debug. If you're loading jQuery from the Google or jQuery CDNs, simply change jquery.min.js to jquery.js.
If you're serving jQuery from your own server, always check in both the compressed and uncompressed versions into your source tree. This applies to other libraries too. You don't want to have nothing but the compressed code available.
By using the original uncompressed source, you will have the formatted code with all its comments and the original variable names.
When you don't have access to the original code or just need to take a quick look at something, dystroy's tip about using the built-in DevTools beautifier is an excellent one. It cleans up the formatting nicely, you just don't get the comments or original variable names.

Would JSDOM work to setup a projects exuberant ctags?

Looking forward towards excellent javascript ctags support kept me thinking if a project like http://zombie.labnotes.org/ could be used to setup ctags to keep a vim user happy.

Hum, none of the projects you are citing are parsers or have anything to do with ctags.
PhantomJS let's you run your script as if it was run by a webkit-based browser. It won't output an analysis of your code, it will just execute it. You can use it to do a toSource() or a isPrototypeOf() on a function but that would be rather pointless.
JSDOM is an implementation of the DOM to use within your script. It can't be run as an external tool so it can't be used to generate tags or analyse your code.
Zombie.js is a testing framework that simulates a browser for you. Like JSDOM, it can't be run as an external tool and it has no ability to analyse your code.
You can feed your current script to phantomjs with :!phantomjs % or use zombie or jsdom in your script but none of it will help you have a better idea of the structure of your code or jump to the definition of a method.
However, if you use either zombie or jsdom or whatever other library in your project you can generate their respective tags files and add them to your .vimrc like this:
autocmd FileType javascript set tags+=path/to/a/library/tags
autocmd FileType javascript set tags+=path/to/another/library/tags
If what you want is a better/more modern tags generation you can try DoctorJS' jsctags or look at this thread for a more hackish way to make ctags work for you. As far as I know, these are you only options right now.

Tool for HTML whole-page minification?

I have a fairly stand-alone page, and I'd like to make it as small as possible: inline minimized Javascript and minimized CSS, and then minimize the HTML itself. There's tools for each of these parts, but I'd like to avoid writing the glue for putting all of these together. Open source would be ideal.

try http://code.google.com/p/htmlcompressor/
EDIT
Although doing it will make the code reading part a lot more complex and as a result, debugging will be a big pain. Do it only after you have all the other required optimization in place.

I'm not sure if you're going to find one tool that does all, but I've seen a few that do get a decent job done..... for me normally combined with other tools though.
http://code.google.com/speed/page-speed/
Page speed is a firefox plugin, and is also an apache module
When you run Page Speed against a page
referencing HTML files, it
automatically runs the Page Speed HTML
compactor (which will in turn apply
JSMin and cssmin.js to any inline
JavaScript and CSS) on the files and
saves the minified output to a
configurable directory

Check out the Pretty Diff tool at http://prettydiff.com/?m=minify&html
You can also tell the tool to point to a given page with the s parameter, such as:
http://prettydiff.com/?m=minify&html&s=https://stackoverflow.com/

Problem porting WordPress Editor to a non-WP application

I like the look and feel of the WordPress editor (version 2.7), and I would like to use it in another web application that is written in ASP.NET. I've used TinyMCE before, and I've even extended it in the past. However, I can't seem to get the Wordpress configuration to work!
I've downloaded the entire WordPress package and taken the TinyMCE code (from the "js" folder) and put it in my web site. It ends up giving me an error on the following line of tiny_mce.js
return f.apply(s||this,Array.prototype.slice.call(arguments,2))
'undefined' is null or not an object.
Now, I've carefully made sure that the steps of execution are identical with the WordPress demonstration site that I've based this from.
I'm not a Javascript newbie (at all), but I can't seem to figure out why this is not working. Has anybody tried to do this before? What am I missing?
A demo of what I am talking about is here (username="admin", password="demo"). View the source, I have the three parts of Javascript that are (seemingly) required to power the editor.

Something of a stab in the dark, but I'm suspecting that there's a dependency on WP's prototype.js and you didn't bring that over with TinyMCE.

If you are able to determine which bit is undefined that might give you a clue. I tried looking at the demo with firebug, but tinymce.js was all one line, so I gave up trying to find that code.
Try putting in either some console.log() if you have firebug, or alert()s before that line, and try to see what f,s,this,arguments etc are when yu get the error, then do the same thing with a vanilla WP install and see the difference?

I suggest including the tiny_mce_src.js istead of the minified version, this way you can use firebug to debug and receive helpfull information.