Source Map Behavior -- how to view original javascript before minification

Question

I have built a test app with gulp-angular. I think source maps are generated automatically. After I build the app, when I look at the vendor-xxx.js, it looks like:

                        /*!
                         * jQuery JavaScript Library v2.1.4
                         * http://jquery.com/
                         *
                         * Includes Sizzle.js
                         * http://sizzlejs.com/
                         *
                         * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
                         * Released under the MIT license
                         * http://jquery.org/license
                         *
                         * Date: 2015-04-28T16:01Z
                         */
                        !function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){function n(e){var t="length"in e&&e.length,n=Q.type(

This is still minified right?

How can I view the original javascript file?

PS. This is how the app-xxx.js looks like:

                    !function() {
                        "use strict";
                        angular.module("test", ["ngAnimate", "ui.router", "ui.bootstrap"])
                    }(), function() {
                        "use strict";
                        function t() {
                            function t() {
                                return n
                            }
                            var n = [{title: "AngularJS",url: "https://angularjs.org/",description: "HTML enhanced for web apps!",logo: "angular.png"}, {title: "BrowserSync",url: "http://browsersync.io/",description: "Time-saving synchronised browser testing.",logo: "browsersync.png"}, {title: "GulpJS",url: "http://gulpjs.com/",description: "The streaming build system.",logo: "gulp.png"}, {title: "Jasmine",url: "http://jasmine.github.io/",description: "Behavior-Driven JavaScript.",logo: "jasmine.png"}, {title: "Karma",url: "http://karma-runner.github.io/",description: "Spectacular Test Runner for JavaScript.",logo: "karma.png"}, {title: "Protractor",url: "https://github.com/angular/protractor",description: "End to end test framework for AngularJS applications built on top of WebDriverJS.",logo: "protractor.png"}, {title: "Bootstrap",url: "http://getbootstrap.com/",description: "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.",logo: "bootstrap.png"}, {title: "Angular UI Bootstrap",url: "http://angular-ui.github.io/bootstrap/",description: "Bootstrap components written in pure AngularJS by the AngularUI Team.",logo: "ui-bootstrap.png"}, {title: "Stylus",url: "http://learnboost.github.io/stylus/",description: "Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.",logo: "stylus.png"}];
                            this.getTec = t
                        }
                        angular.module("test").service("webDevTec", t)
                    }(), function() {
                        "use strict";
                        function t() {

Answer 1

I use a separate gulp task for development vs. production. So when I run gulp --debug it will skip the minification build step. So if you don't have such a step, it might be worth setting up.

Take a look at the npm packages: gulp-if and yargs.

I'm not familiar with Source Maps, but I believe clicking the Pretty JavaScript/CSS button in Chrome Dev Tools might do the trick...?