Проблема с Chrome Dev Tools с литералами строк ES6/Typescript

Я работаю над проектом, использующим Typescript и некоторые из функций ES6, представленных Typescript, например, литералами строк ES6, например. `Something ${variable} Something else`.

Во время отладки проблемы я сбросил точку останова в файл Typescript, чтобы выполнить ее на панели источника, которая обычно работает нормально.

Но у Chrome Dev Tools есть проблема с литералами ES6 String и, похоже, не распознает конец литерала строки ES6.

Вместо этого весь код, следующий за строковым литералом, помечается красным цветом (выделение строки в отладчике) и блокируется из проверки переменных, поскольку хром-отладчик кажется, что это всего лишь одна массивная строка.

Кто-нибудь столкнулся с этой проблемой, нашел исправление или знает, включено ли это в дорожную карту Google для инструментов Chrome Dev?

РЕДАКТИРОВАТЬ 1:
Похоже, эта проблема в настоящее время разрабатывается командой Chromium. См. Отчет о проблемах для обновлений:
bugs.chromium.org/p/chromium/issues/detail?id=659515

ИЗМЕНИТЬ 2: Ошибка была открыта довольно долгое время, но, похоже, она не была приоритетной. Если вы столкнулись с проблемой, перейдите на ссылку хрома выше, а также нажмите на нее и сообщите об этом с полезной информацией, чтобы переместить ее в фокус команды Dev Tools.

Ответ 1

Этот 14 декабря 2017 года комментарий команды DevTools говорит, что они обновили версию CodeMirror, используемую в DevTools, и проблема должна быть исправлена Теперь. В Chrome 64 и выше он должен работать. В более ранних версиях Chrome он все равно будет сломан. Вы можете проверить свою версию на chrome://version.

Ответ 2

Если вы используете Typescript, вы можете обойти эту проблему, компилируя свой код на ES2015 и используя исходные карты. Таким образом, интерполированные строки backtick будут преобразованы в хороший ol '"string " + variable + " string", но вы все равно сможете отлаживать, глядя на исходный код typescript с обратными окнами.

Для этого нужно добавить следующее к вашему tsconfig.json:

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

И если вы подаете локально файлы с исходными картами (.js.map) вместе с сгенерированными файлами .js, вы должны иметь возможность открывать файлы typescript в инструментах chrome dev в разделе "Источники" с помощью Ctrl-p.