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.

Did you manage this find anything? A bug report maybe? It's driving me nuts too. — Roger Far
– Roger Far, Commented Dec 19, 2016 at 3:30
@YesMan85 Found an open bug report - looks like they are still working on a fix: bugs.chromium.org/p/chromium/issues/detail?id=659515 — bbop99
– bbop99, Commented Dec 19, 2016 at 13:46
Ok thanks, I put in a bug too yesterday with a repo case, hope they can pick it up. — Roger Far
– Roger Far, Commented Dec 19, 2016 at 14:22
Anybody running into this issue should star the chromium bug / add more info and evidence. Hoping this gets picked up as its very annoying — darudude
– darudude, Commented Dec 28, 2016 at 15:48
In the link, you provided this issue is marked as "fixed" but actually it's still broken. Does anybody know if there is a new link to this issue which we could upvote to enforce this bug fixing? — Oleg Pro
– Oleg Pro, Commented May 29, 2018 at 5:03

Rodrigo García · Accepted Answer · 2018-10-08 20:46:46Z

37

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.

edited Oct 8, 2018 at 20:46

answered May 17, 2018 at 4:25

Rodrigo García

1,4371 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kayce Basques · Accepted Answer · 2018-01-03 20:06:00Z

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.

answered Jan 3, 2018 at 20:06

Kayce Basques

26.4k11 gold badges103 silver badges129 bronze badges

12 Comments

AlexMcG Over a year ago

Still broken. Version 64.0.3282.119 (Official Build) (64-bit)

nickstaroba Over a year ago

Broken in Version 65.0.3325.162. I've starred the issue at crbug.com/659515

Benjamin Toueg Over a year ago

Broken in 68.0.3438.3. I've starred the issue at crbug.com/659515

chad steele Over a year ago

Broken in Version 70.0.3538.102 (Official Build) (64-bit)

AlexMorley-Finch Over a year ago

Still broken 77.0.3865.120 (Official Build) (64-bit). Nobody cares

|

Yaar Hever · Accepted Answer · 2017-04-08 21:52:57Z

-4

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.

answered Apr 8, 2017 at 21:52

Yaar Hever

811 silver badge6 bronze badges

2 Comments

rikkit Over a year ago

The issue is that the syntax highlighting does not work on TS source maps with backticks. Your method still ends up showing a TypeScript file with backticks in the Chrome debugger.

Rodrigo García Over a year ago

This is not a solution to OP's question, it is not even related to what he is asking.

Collectives™ on Stack Overflow

Chrome Dev Tools Issue With ES6 String Literals/Typescript

3 Answers 3

Comments

12 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related