Snippets to aid debugging collections transformations (map/filter/reduce) and promises

ArjansJsTsDebugHelpers.code-snippets

{
	"console.log(\"***\", ...)": {
		"prefix": "conso",
		"scope": "javascript,typescript,typescriptreact",
		"body": [
			"console.log(\"*** $1\", $0)",
			""
		]
	},
	"debug-map":{
		"prefix": "debug-map",
		"scope": "javascript,typescript,typescriptreact",
		"body": [
			".map(res => { console.log(\"DEBUG-MAP ***\", res); return res;})"
		]
	},
	"debug-then":{
		"prefix": "debug-then",
		"scope": "javascript,typescript,typescriptreact",
		"body": [
			".then(res => { console.log(\"DEBUG-THEN ***\", res); return res;})"
		]
	}
}

javascript.json

{
	"debug-map":{
		"prefix": "debug-map",
		"body": [
			".map(res => { console.log(\"DEBUG-MAP ***\", res); return res;})"
		]
	},
	"debug-reduce":{
		"prefix": "debug-reduce",
		"body": [
			".reduce((acc, cur, ix, src) => { if(ix === src.length - 1) console.log(\"DEBUG-REDUCE ***\", src); return src;}, [])"
		]
	},
	"debug-then":{
		"prefix": "debug-then",
		"body": [
			".then(res => { console.log(\"DEBUG-THEN ***\", res); return res;})"
		]
	},
	"conso":{
		"prefix": "console",
		"body": [
			"console.log(\"*** $1\", $0);",
			""
		]
	}
}

typescriptreact.json

{
	"Element": {
        "prefix": "<",
        "body": [
            "<$1>$2</$1>$0",
        ],
        "description": "Creates a React fragment"
    },
	"Self closed element": {
        "prefix": "</",
        "body": [
            "<$1/>$0",
        ],
        "description": "Creates a React fragment"
    },
}

What is this?
These are snippets for debugging javascript, wrapped and ready to use with Visual Studio Code.

When debugging complex chained collection expressions or promise chains, it is often helpfull to see intermediate results in between the different chained steps. By inserting the one-liners these helpers represent you can achieve this without breaking up your code to insert temporaty variable.

Use with collections

const result = someCollection
                .filter(x => x < 100)
                // Here you could insert either debug-reduce or debug map to see the outcome from filtering, but before doubling...
                .map(x => x * 2);

Use with promises

somePromise
    // Here you could insert debug-then to so see the return value from the orignal promise...
    .then(result => { /* do something */}):