Sourcemaps containing ` break syntax highlighting further down the line
Reported by
da...@sleeckx.be,
Oct 26 2016
|
||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2896.3 Safari/537.36
Steps to reproduce the problem:
1. Setup TypeScript to transpile to JS and enable source mapping files
2. In TypeScript, write a string template, e.g. `${myVar}%`
3. Chrome devtools picks up the mapping file but syntax highlighting breaks after the string template line
What is the expected behavior?
Syntax highlighting should be able to handle typescript string templates.
What went wrong?
Syntax highlighting breaks.
Did this work before? N/A
Chrome version: 56.0.2896.3 Channel: dev
OS Version: 10.0
Flash Version: Shockwave Flash 23.0 r0
,
Oct 28 2016
,
Oct 28 2016
,
Nov 2 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/7fc948857973a632e23bc4511cda112f48b0e7d2 commit 7fc948857973a632e23bc4511cda112f48b0e7d2 Author: lushnikov <lushnikov@chromium.org> Date: Wed Nov 02 17:19:18 2016 DevTools: roll javascript codemirror mode. The new javascript mode will: - highlight "static" keyword in ES6 - possibly eliminate the typescript template string bug BUG=659515 R=einbinder Review-Url: https://codereview.chromium.org/2464363002 Cr-Commit-Position: refs/heads/master@{#429314} [modify] https://crrev.com/7fc948857973a632e23bc4511cda112f48b0e7d2/third_party/WebKit/Source/devtools/front_end/cm/javascript.js
,
Nov 2 2016
I wasn't able to repro your case - looks like it's not just the template string per se, but some other context which is in fault of breaking syntax highlight. Could you please share the copyable text which exhibits this behavior?
,
Nov 5 2016
Ok, please speak up if this is still broken for you. I'll close the issue for now.
,
Nov 5 2016
It is. Had to find some time to break down the issue from a rather large code base. You can find a small test-case over here: https://goo.gl/bFgKIV However, as you mentioned, while I was narrowing down the problem, I also came to suspect that the string template is not the real cause of breaking the syntax highlighting... On a side note: the code was compiled using TypeScript's nightly build (v2.1.0-dev.20161105), so there might be an issue with the inline source-mapping as well.
,
Nov 5 2016
Thank you for the repro, reopening!
,
Nov 10 2016
NB: This seems to be independent of OS, I see it on Ubuntu with Version 54.0.2840.90 (64-bit)
,
Dec 2 2016
Joel, could you please take a look on this?
,
Dec 28 2016
Ran into this today. Seems unrelated to Typescript or any other framework. From what I'm seeing it only breaks if there are multiple {} brackets within the template string. I don't have any issues in my other files where I have template strings that don't have multiple squiggly brackets. In this file, all syntax highlighting (and mouse over object/deceleration view) is broken after the first instance of this issue.
,
May 14 2017
To narrowed down the issue so it also appears for me when editing snippets.
I have a case in which it is due to the return type annotation with a generic type.
function good(): Array {
const test = `foo${module}bar`;
console.log(test);
}
function bad(): Array<Foo> {
const test = `foo${module}bar`;
console.log(test);
}
,
May 16 2017
breaks on mac also... super annoying :( Any plans on this one?
,
May 24 2017
This bug is fatal, can you fix it? Thanks a lot
,
May 31 2017
fwiw, this is mac OSX also...
,
Aug 10 2017
this annoys me daily, I've started adding: //`; to the end of lines containing templated strings, which fixes the formatting.
,
Sep 6 2017
Quite an annoying issue! Would really like to see this addressed.
,
Sep 20 2017
So how many stars / comments does it take to get a comment from the chrome team? A fix?
,
Oct 2 2017
Also still seeing this issue. Yes it looks like it's a combinations of using Generics <T> with template strings. Came here from: https://stackoverflow.com/questions/40864026/chrome-dev-tools-issue-with-es6-string-literals-typescript
,
Oct 17 2017
same issue for me, i'm using Version 64.0.3241.0 (Official Build) canary (64-bit)
,
Nov 5 2017
This really needs some attention.
,
Nov 8 2017
Working on this. Sorry everybody.
,
Nov 8 2017
,
Nov 8 2017
Great. Thank you!
,
Nov 9 2017
Same issue here. Thanks!!!
,
Dec 14 2017
This issue should be fixed in Canary by the recent CodeMirror role.
,
Dec 14 2017
,
Feb 5 2018
This issue should be re-opened. As the last poster indicated, this is still an issue when combining JSX syntax with template literals. Environment: MacOS High Sierra 10.13.1 Version 66.0.3340.0 (Official Build) canary (64-bit)
,
Feb 7 2018
I appreciate the efforts put into Chrome very much, but this issue is definitely not fixed. The company I develop for uses Chrome exclusively for its web apps, and I'm a javascript/jsx developer so the Chrome Developer Tools is where I spend 30% of my day. My app is littered with back quotes, so any dev could imagine that this bug is starting to become the bane of my existence. Please reopen this ticket and fix the issue.
,
Feb 8 2018
I have just upgraded to Chrome 64.0.3282.140 (Official Build) (64-bit) (MacOS). The issue is happening on a file displayed with sourcemaps. Build System: Webpack Transpiler: Typescript TSConfig: Compiler Options: "sourceMap": true Webpack devtool: "inline-source-map" Hope this helps.
,
Feb 12 2018
I still see this issue in the latest builds of canary as well as standard chrome.
,
Feb 22 2018
bug still exist: Google Chrome 64.0.3282.167 (Official Build) (64-bit) (cohort: 64_167_win) Revision bf44778c9ce98ecff1128b225a165728044bbdeb-refs/branch-heads
,
Feb 22 2018
I am also getting this bug for a long time on Mac for ReactJS, React Native and anything JSX with string templates.
,
Mar 4 2018
This is still a bug. Can you please show it as "NON-FIXED" so that it can be fixed? Thank you.
,
Mar 4 2018
This is super annoying. Bug still exists: Version 67.0.3361.0 (Official Build) canary (64-bit)
,
Mar 7 2018
Bug still exists. Google Chrome 64.0.3282.186 (Official Build) (64-bit) (cohort: Stable) Revision 9611116ee79c63602f452e4fae2242a61cf0672d-refs/branch-heads/3282@{#694}
,
Mar 10 2018
Please note that i cannot set a break point anywhere beyond the back-tick. See the screenshot attached. Google Chrome 65.0.3325.146 (Official Build) (64-bit) Revision f926414266f7aecb5ec1bf1b5f93f8716976ceef-refs/branch-heads/3325@{#669} OS Linux JavaScript V8 6.5.254.31
,
Apr 10 2018
Please change the status of this issue as it is not fixed. Same problem for 65.0.3325.181 version.
,
Apr 10 2018
Still occuring on Chrome 65, please reopen.
,
Apr 19 2018
This issue still occuring in Chrome 65.0.3325.181 on Mac
,
Apr 24 2018
Based on all of the examples provided, here as well as on my own observations, I think it's clear that this isn't related to either TypeScript or JSX specifically but rather to the presence of template strings and angle brackets in the same source file. TypeScript generics or JSX expressions or Flow generics trigger this bug when template strings are also present.
,
May 28 2018
More than 20 months since this was reported and plenty of examples later, is there any update on this?
,
Jun 4 2018
This is still not fixed. Making development difficult.
,
Jun 8 2018
Confirmed this has and continues to unfixed. As of today: Windows 7 Version 66.0.3359.181 please re-open
,
Jul 3
This is still an issue on Chrome 67.0.3396.99 64-bit I'm using sourcemaps with Typescript.
,
Jul 9
Issue 859872 has been merged into this issue.
,
Jul 29
Still having this issue. Tested both on Version 69.0.3497.12 (Official Build) dev (64-bit) and Version 65.0.3325.162 (Official Build) (64-bit)
,
Aug 7
When will we see the fix for this? Its almost 1+ year old
,
Aug 7
same -- seems to be worse than it was when I reported...
,
Aug 7
In an email, someone working on this bug said that they are having difficulty reproducing it. Does anybody here have a reliable way of reproducing the error from scratch?
,
Aug 7
Here you go - angular app - https://github.com/chadbr/chrome-template-string-debug/
,
Aug 7
If you have a way to just load a file into the Sources window -- You can just pull this one in: https://github.com/chadbr/chrome-template-string-debug/blob/master/src/app/permissions.service.ts
,
Aug 8
Will this be fixed anyytime soon? happens to me in chrome 68.0.3440.84
,
Aug 18
The bug is still reproduced Chrome 68.0.3440.106, Mac 10.13.6. Please reopen the issue. its very annoying.
,
Aug 19
In 68.0.3440.106 (ubuntu 17) the bug still happens, please fix it.
,
Aug 20
70.0.3527.0 - still broken!
,
Aug 20
,
Sep 4
This has been fixed in which version?
,
Sep 13
This bug is pain in the ass. How long it can take to fix one bug in chrome?
,
Sep 13
If you're having trouble with this, one option is to use the Visual Studio Code debugger. It integrates with Chrome but has its own parser which understands backticks. It's not a perfect option, especially if you're not using Code for the rest of your development, but perhaps it will help someone. One word of warning, it seems to get confused if you have the Chrome debugger open at the same time, which can be inconvenient if you want to use other Developer Tools panes...
,
Sep 18
Can you guys just fix this? I use DevTools every day for work, and this is a deal-breaker.
,
Sep 18
It's broken syntax highlighting guys, breakpoints still work ok. There are workarounds above that have been mentioned. Could we quit whining about it and add some details that may help it actually get fixed? You can totally make a pull request on the Chromium project that can get brought back into Chrome if it's that much of a life-changing issue for you. I want it fixed as much as the next guy but it's definitely not ruining my day. Hook vs code debugger extension (that ties into chrome) into it and you can do your breakpoints with syntax highlighting fine. Switch to Firefox (which does this fine) when you're trying to debug source mapped JSX + template strings. Have a little bit of patience, there are plenty of bigger bugs floating around like when you set a breakpoint, try to debug a variable and the whole browser crashes. That's a bit bigger of an issue. There are 138 stars here so far, I'm sure it's on their radar. This issue is only 2 years old ya know.
,
Sep 19
It's not just the syntax highlighting, this also breaks the ability to examine values of variables during a debugging session. So yes, you can set a breakpoint in one of the broken sections, but you can't look at anything while you're there. This bug was marked as Fixed for almost two full years, and was only recently re-opened again because of people's pestering. The attention is valuable and is having a positive outcome.
,
Sep 19
Yes, it's still happening and it's a bit annoying seeing that it was reported 2 years ago. BUT, as mentioned before, you can just add // before ` on the Source and it works even without saving the file, now you can examine values.
,
Sep 19
if you have a value like myClass.property.deeper and you select that entire string, then mouse over it, it will inspect the values. There are watches, in version 70 we have live expressions in the console. There's instant feedback also in the console when typing a value. There definitely are ways to inspect your variables without the syntax highlighting working on the area you are trying to debug. I imagine that's why it's been taking so long to get this fixed. As for attention, as I said before, let's talk less about whether or not it's a problem. We know it is, more talk about how to reproduce it, how the devs can see the problem themselves and then they can much easier make a fix. Maybe supply example projects or files that are afflicted by this bug. I know for sure currently it affects a webpack project that uses source mapping and combines both React JSX with template strings in the same file. Someone previously said this happens in Angular too.
,
Sep 19
I published a project that repo's the issue on Aug 7 - hopefully it helps... https://bugs.chromium.org/p/chromium/issues/detail?id=659515#c75 https://bugs.chromium.org/p/chromium/issues/detail?id=659515#c76 Thanks, Chad
,
Nov 3
This is really annoying and I've suffered it for years. Here's a workaround that works if your template strings are just for logging purposes - Add an extra \` at the end before the closing `
,
Dec 4
Major Problem for me too.
,
Dec 7
Same
,
Today
(16 hours ago)
Still there |
||||||||||||||
►
Sign in to add a comment |
||||||||||||||
Comment 1 by da...@sleeckx.be
, Oct 26 201626.6 KB
26.6 KB View Download