Skip to content

Instantly share code, notes, and snippets.

@aeinbu
Last active October 28, 2023 21:37
Show Gist options
  • Save aeinbu/3f61a29906a17eaf55c150c71f5f2f97 to your computer and use it in GitHub Desktop.
Save aeinbu/3f61a29906a17eaf55c150c71f5f2f97 to your computer and use it in GitHub Desktop.
Snippets to aid debugging collections transformations (map/filter/reduce) and promises
{
"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;})"
]
}
}
{
"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);",
""
]
}
}
{
"Element": {
"prefix": "<",
"body": [
"<$1>$2</$1>$0",
],
"description": "Creates a React fragment"
},
"Self closed element": {
"prefix": "</",
"body": [
"<$1/>$0",
],
"description": "Creates a React fragment"
},
}
@aeinbu
Copy link
Author

aeinbu commented May 4, 2019

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 */}):

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment