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

As for version 69.0.3497.100 (Official Build) (64-bit) in Ubuntu is still a bug.

As a workaround you can start adding: //` to the end of lines containing templated strings, which fixes the formatting in the chrome sources tab.

Here some examples of my working jsx code.

---

In component props:

  <Field
    name={`${fields.name}[${index}].comments`}// `
    component="input"
    type="text"
  />

As a child element:

  <label>
    {`${t('Condone')}  `}{/* ` */}
  </label>

In a statement:

  switch (DEBTTYPE) {
    case DEBTTYPE_MACHINE_PRODUCT:
      id = `machine_product_difference_row_${row.id_productdebt}`;// `
      break;
      ....

I really hope that they can fix this issue as fast as possible.

Answer 2

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.

Answer 3

This December 14, 2017 comment from the DevTools team says that they updated the CodeMirror version used in DevTools, and the issue should be fixed now. In Chrome 64 and beyond it should work. In earlier versions of Chrome it'll still be broken. You can check your version at chrome://version.