Chrome Dev Tools Issue With ES6 String Literals/Typescript

Question

I am working on a project using Typescript and some of the ES6 features exposed by Typescript like ES6 String Literals e.g. `Something ${variable} Something else`.<

Answer 1

If you are using Typescript, you can work around this issue by compiling your code to ES2015 and using source maps. This way, the backtick interpolated strings would be converted to the good ol' "string " + variable + " string", but you would still be able to debug while looking at the original typescript code with backticks.

This would require adding the following to your tsconfig.json:

{
    "compilerOptions": {
        "target": "ES2015",
        "sourceMap": true, 
        ...
    }
    ...
}

And if you serve locally the generated source map files (.js.map) alongside the generated .js files, you should be able to open the typescript files in chrome dev tools under "Sources" with Ctrl-p.