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`.

Whilst debugging a problem I dropped a breakpoint into my typescript file to step through it in the source panel, which usually works fine.

But Chrome Dev Tools has an issue with ES6 String literals and doesn't seem to recognise the end of an ES6 String literal.

Instead all code following the string literal is marked red (string highlighting in debugger) and blocked from variable inspection as chrome debugger seems to think it is all one massive string.

Has someone encountered this issue, found a fix or knows whether this is on Google's roadmap for Chrome Dev Tools?

EDIT 1:
Looks like this issue is currently being worked on by the Chromium team. See issue report for updates:
bugs.chromium.org/p/chromium/issues/detail?id=659515

EDIT 2: Bug has been open for quite some time, but doesn't seem to have been prioritised. If you experience the issue go to the chromium link above and star/comment on it with helpful info to move it into focus of the Dev Tools team.

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

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.

Answer 3

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.