Debugging Code Using Gulp Source Maps

• The gulp-sourcemaps module can be used for debugging compressed code.
• For Production release we compressed/minified  the javascript files.This minification increases the performance of the application due to reduced file size.But it makes the debugging process difficult for developer and it is very hard to find the exact line number or word number from where error occurred.This problem can be solved using sourcemaps files.
• A source map provides a way of mapping code within a compressed file back to it’s original position in a source file.
• In this demo,”We will learn to install gulp-sourcemaps and create a simple task to generate sourcemap file”.
• The gulp-sourcemaps module can be installed using npm install gulp-sourcemaps –save command.The following screenshot shows the terminal with gulp-sourcemaps installation.

• To demonstrate sourcemap we have created GulpAppDemo project.The following screenshot shows the directory structure of GulpAppDemo:-

• The gulpfile.js contains the code for defining Gulp tasks compress and default.This gulp tasks has used gulp-uglify for minifying the Javascript file and gulp-sourcemaps plugin for maintaining mapping among compressed and original file for  debugging purpose.The code content of gulpfile.js are as follows:-

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('compress', function() {
    return gulp.src('./dev/*.js')
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./out'));
});

gulp.task('default',['compress']);

• The code content of dev/app.js file is as follows:-

var addTwoNumber = function(number1,number2){
    return number1+number2;
};
var multiplyTwoNumber = function(number1,number2){
    return number1*number2;
};
var subtractTwoNumber = function(number1,number2){
    return number1-number2;
};

var result1 = addTwoNumber(5,3);
var result2 = multiplyTwoNumber(5,3);
var result3 = subtractTwoNumber(5,3);

document.getElementById("result1").innerText = result1;
document.getElementById("result2").innerText = result2;
document.getElementById("result3").innerText = result3;

• On successful execution of Gulp task it generates 2 files named app.js and app.js.map file inside out directory.The following screenshot shows the updated directory structure of GulpAppDemo:-
• The code content of out/app.js  is minfied version of dev/app.js .The content of out/app.js file is as follows:-

var addTwoNumber=function(e,t){return e+t},multiplyTwoNumber=function(e,t){return e*t},subtractTwoNumber=function(e,t){return e-t},result1=addTwoNumber(5,3),result2=multiplyTwoNumber(5,3),result3=subtractTwoNumber(5,3);document.getElementById("result1").innerText=result1,document.getElementById("result2").innerText=result2,document.getElementById("result3").innerText=result3;
//# sourceMappingURL=app.js.map

• The code content of app.js.map file is as follows:-

{
  "version": 3,
  "sources": [
    "app.js"
  ],
  "names": [
    "addTwoNumber",
    "number1",
    "number2",
    "multiplyTwoNumber",
    "subtractTwoNumber",
    "result1",
    "result2",
    "result3",
    "document",
    "getElementById",
    "innerText"
  ],
  "mappings": "AAAA,GAAIA,cAAe,SAASC,EAAQC,GAChC,MAAOD,GAAQC,GAEfC,kBAAoB,SAASF,EAAQC,GACrC,MAAOD,GAAQC,GAEfE,kBAAoB,SAASH,EAAQC,GACrC,MAAOD,GAAQC,GAGfG,QAAUL,aAAa,EAAE,GACzBM,QAAUH,kBAAkB,EAAE,GAC9BI,QAAUH,kBAAkB,EAAE,EAElCI,UAASC,eAAe,WAAWC,UAAYL,QAC/CG,SAASC,eAAe,WAAWC,UAAYJ,QAC/CE,SAASC,eAAe,WAAWC,UAAYH",
  "file": "app.js",
  "sourcesContent": [
    "var addTwoNumber = function(number1,number2){\r\n    return number1+number2;\r\n};\r\nvar multiplyTwoNumber = function(number1,number2){\r\n    return number1*number2;\r\n};\r\nvar subtractTwoNumber = function(number1,number2){\r\n    return number1-number2;\r\n};\r\n\r\nvar result1 = addTwoNumber(5,3);\r\nvar result2 = multiplyTwoNumber(5,3);\r\nvar result3 = subtractTwoNumber(5,3);\r\n\r\ndocument.getElementById(\"result1\").innerText = result1;\r\ndocument.getElementById(\"result2\").innerText = result2;\r\ndocument.getElementById(\"result3\").innerText = result3;"
  ],
  "sourceRoot": "/source/"
}

• The index.html file contains the HTML code for rendering in the browser.The index.html file also includes the minified  out/app.js file using SCRIPT tag.The cod content of out/app.js file is as follows:-

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gulp SourceMaps Demo</title>
</head>
<body>
    <h1>Results:-</h1>
    Result1: <b id="result1"></b>
    Result2: <b id="result2"></b>
    Result3: <b id="result3"></b>
</body>
    <script src="out/app.js"></script>
</html>

• The output of this demo looks like following screenshot:-

• The following screenshot shows Chrome console while debugging the javascript code.We can see the app.js file is uncompressed mode which makes debugging easier.This is possible by the gulp-sourcemaps plugin.

• Now it is clear that we can use sourcemaps for easy debugging with the minfied version for faster page load simultaneously.
• The demo code can be downloaded from the following link:-

https://github.com/saan1984/GulpAppDemo