Проблема с 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
.