Problème des outils de développement Chrome avec les chaînes littéraires ES6/Typescript

Question

Je travaille sur un projet utilisant Typescript et certaines des fonctionnalités ES6 exposées par Typescript comme ES6 String Literals par exemple. `Something ${variable} Something else` .

Lors du débogage d'un problème, j'ai placé un point d'arrêt dans mon fichier Typescript pour le parcourir dans le panneau source, ce qui fonctionne généralement bien.

Mais Chrome Dev Tools a un problème avec les chaînes de caractères ES6 et ne semble pas reconnaître la fin d'une chaîne de caractères ES6.

Au lieu de cela, tout le code qui suit la chaîne littérale est marqué en rouge (mise en évidence de la chaîne dans le débogueur) et bloqué pour l'inspection des variables, car le débogueur chrome semble penser qu'il s'agit d'une seule et même chaîne massive.

Quelqu'un a-t-il rencontré ce problème, trouvé une solution ou sait-il si cela figure sur la feuille de route de Google pour Chrome Dev Tools ?

EDIT 1 :
Il semble que ce problème soit actuellement traité par l'équipe de Chromium. Voir le rapport de problème pour les mises à jour :
bugs.chromium.org/p/chromium/issues/detail?id=659515

EDIT 2 : Le bogue est ouvert depuis un certain temps, mais il ne semble pas avoir été traité en priorité. Si vous rencontrez le problème, allez sur le lien chrome ci-dessus et mettez un astérisque ou un commentaire avec des informations utiles pour que l'équipe Dev Tools s'en préoccupe.

Answer 1

Quant à la version 69.0.3497.100 (Official Build) (64-bit) dans Ubuntu, il s'agit toujours d'un bogue.

En guise de solution de contournement, vous pouvez commencer à ajouter : //` à la fin des lignes contenant des chaînes modélisées, ce qui corrige le formatage dans l'onglet sources de chrome.

Voici quelques exemples de mon code jsx fonctionnel.

---

Dans les accessoires des composants :

  <Field
    name={`${fields.name}[${index}].comments`}// `
    component="input"
    type="text"
  />

En tant qu'élément enfant :

  <label>
    {`${t('Condone')}  `}{/* ` */}
  </label>

Dans une déclaration :

  switch (DEBTTYPE) {
    case DEBTTYPE_MACHINE_PRODUCT:
      id = `machine_product_difference_row_${row.id_productdebt}`;// `
      break;
      ....

J'espère vraiment qu'ils pourront résoudre ce problème le plus rapidement possible.

Answer 2

Este 14 décembre 2017 Un commentaire de l'équipe DevTools indique qu'ils ont mis à jour la version de CodeMirror utilisée dans DevTools, et que le problème devrait être corrigé maintenant. Dans Chrome 64 et au-delà, cela devrait fonctionner. Dans les versions antérieures de Chrome, le problème persistera. Vous pouvez vérifier votre version à l'adresse suivante chrome://version .

Answer 3

Si vous utilisez Typescript, vous pouvez contourner ce problème en compilant votre code en ES2015 et en utilisant des cartes de source. De cette manière, les chaînes interpolées par le backtick seront converties en la bonne vieille norme "string " + variable + " string" mais vous seriez toujours en mesure de déboguer tout en regardant le code typographique original avec les backticks.

Pour cela, il faut ajouter ce qui suit à votre fichier tsconfig.json :

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

Et si vous servez localement les fichiers sources générés ( .js.map ) en même temps que les .js vous devriez pouvoir ouvrir les fichiers typescript dans les outils de développement de chrome sous "Sources" avec Ctrl-p .