Unminify CSS, JS and HTML Code Online | Unminified
Within this string are semicolons ; that represent a line number within the generated file. Within each line there are commasthat represent each segment within that line. Each of these segments is either 1, 4 or 5 in variable length fields. Some may appear longer but these contain continuation bits. Each segment builds upon the previous, which helps reduce the file size as each bit is relative to its previous segments.
Like I mentioned above each segment can be 1, 4 or 5 in variable length. This diagram is considered a variable length of four with one continuation bit g. We'll break down this segment and show you how the source map works out the original location.
The values shown above are purely the Base64 decoded values, there is some more processing to get their true values. Each segment usually works out five things: Generated column Original file this appeared in Original line number Original column And if available original name.
Not every segment has a name, method name or argument, so segments throughout will switch between four and five variable length. The g value in the segment diagram above is what's called a continuation bit this allows for further optimisation in the Base64 VLQ decoding stage. A continuation bit allows you to build on a segment value so you can store big numbers without having to store a big number, a very clever space saving technique that has its roots in the midi format.
Unminify CSS, JS and HTML Code
In order to properly understand how we get the value 16 from B we need to have a basic understanding of bitwise operators and how the spec works for source mapping. This then increases the the bit shift value by 5 for each preceding continuation bit. In the above case its only shifted by 5 once, so left shifting 1 B by 5.
This may seem an over complicated process, but once the numbers start getting bigger it makes more sense. Potential XSSI issues The spec mentions cross site script inclusion issues that could arise from the consumption of a source map. The WebKit dev tools can handle this already. Eval and anonymous functions While not part of the source map spec the following two conventions allow you to make development much easier when working with evals and anonymous functions.
Free Online Tools For Developers - lukonin.info
By including the following special comment in your code, which will be evaled, you can name evals so they appear as more logical names in your dev tools.
Check out a simple demo using the CoffeeScript compiler: Profile the following demo to see the displayName property in action. Named anon functions via displayName Webkit Nightly only btns. However displayName is pretty much dead in the water and won't be making it into Chrome.
Unminify JS, CSS and HTML Code
But all hope isn't lost and a much better proposal has been suggested called debugName. As of writing the eval naming is only available in Firefox and WebKit browsers. The displayName property is only in WebKit nightlies. Let's rally together Currently there is very lengthy discussion on source map support being added to CoffeeScript. Go check out the issue and add your support for getting source map generation added to the CoffeeScript compiler.
This will be a huge win for CoffeeScript and its devoted followers. UglifyJS also has a source map issue you should take a look at too. Lot's of tools generate source maps, including the coffeescript compiler.
Online CSS Unminifier
I consider this a moot point now. The more tools available to us that can generate a source maps the better off we'll be, so go forth and ask or add source map support to your favourite open source project.
It's not perfect One thing Source Maps doesn't cater for right now is watch expressions. The problem is that trying to inspect an argument or variable name within the current execution context won't return anything as it doesn't really exist. This of course is a solvable problem and with more attention on source maps we can start seeing some amazing features and better stability. Issues Recently jQuery 1.
Delivered via a content delivery network CDN. CDN's are a collection of geographically distributed web servers that deliver content efficiently. No need to download and re-install the API when new versions are released.
It was designed for minimizing the number of modules an application had to download when building applications where slower connection speeds and network latency are an issue.