Last active
December 14, 2015 08:58
-
-
Save miroslavpopovic/5061310 to your computer and use it in GitHub Desktop.
A function that's using https://github.com/kpdecker/jsdiff to display a difference between two strings in a console.
Tested on latest versions of Firebug and Chrome Developer Tools.
Developer tools in IE 10 and below don't support CSS styles in console.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
// A function that's using https://github.com/kpdecker/jsdiff to display a | |
// difference between two strings in a console. | |
// Tested on latest versions of Firebug and Chrome Developer Tools. | |
// Developer tools in IE 10 and below don't support CSS styles in console. | |
var consoleDiff = function (first, second, diffType) { | |
var normalStyle = 'color: black; background-color: white; text-decoration: none;', | |
addStyle = 'color: #406619; background-color: #eaf2c2; text-decoration: none;', | |
removeStyle = 'color: #b30000; background-color: #fadad7; text-decoration: line-through;', | |
text = '', | |
arguments = [], | |
diff; | |
if (typeof JsDiff === 'undefined') { | |
throw new Error('jsdiff script not loaded. ' + | |
'Download diff.js from: https://github.com/kpdecker/jsdiff ' + | |
'and include it on the page.'); | |
} | |
if (typeof first === 'function') { | |
first = first(); | |
} | |
if (typeof second === 'function') { | |
second = second(); | |
} | |
// diffType can be: diffChars, diffWords and diffLines | |
diffType = diffType || 'diffWords'; | |
diff = JsDiff[diffType](first, second); | |
for (var i = 0; i < diff.length; i++) { | |
// Removed text should in front of added | |
if (diff[i].added && diff[i + 1] && diff[i + 1].removed) { | |
var swap = diff[i]; | |
diff[i] = diff[i + 1]; | |
diff[i + 1] = swap; | |
} | |
text = text.concat('%c', diff[i].value); | |
if (diff[i].removed) { | |
arguments.push(removeStyle); | |
} else if (diff[i].added) { | |
arguments.push(addStyle); | |
} else { | |
arguments.push(normalStyle); | |
} | |
} | |
arguments.unshift(text); | |
console.log.apply(console, arguments); | |
}; | |
// Sample 1: simple strings | |
consoleDiff('My first string', 'My second string'); | |
// Sample 2: more complex strings (JSON) | |
consoleDiff( | |
'{"employeeNumber":101,"ssn":"123-45-6789","firstName":"Bruce","middleInitial":"",' + | |
'"lastName":"Wayne","address1":"140 Fell Court","address2":"","city":"Gotham",' + | |
'"state":"NY","zip":"10000"}', | |
'{"employeeNumber":101,"ssn":"123-45-6789","firstName":"Alfred","middleInitial":"",' + | |
'"lastName":"Wayne","address1":"142 Fell Court","address2":"","city":"Gotham",' + | |
'"state":"NY","zip":"10001"}' | |
); | |
// Sample 3: using functions as arguments (they need to return a string) | |
consoleDiff( | |
function () { return 'First function result' }, | |
function () { return 'Second function result' } | |
); | |
// Sample 4: using char diff | |
consoleDiff('abcdefghijklmnopqrstuvwxyz', 'abcdefghijklabcopqrstuvwxyz', 'diffChars'); | |
// This utility is created for debugging ko.dirtyFlag | |
// One ko.dirtyFlag implementation can be found on: | |
// http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html | |
// It's easy to add a method to it to log the differences between initial and | |
// current state somewhere in dirtyFlag code, like this | |
result.log = function() { | |
consoleDiff(_initialState(), ko.toJSON(root)); | |
}; | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment