web-dev-qa-db-fra.com

Chrome Problème avec les outils de développement avec ES6 String Literals / Typescript

Je travaille sur un projet utilisant TypeScript et certaines des fonctionnalités ES6 exposées par TypeScript comme les littéraux de chaîne ES6, par ex. `Something ${variable} Something else`.

Lors du débogage d'un problème, j'ai déposé 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 littéraux ES6 String et ne semble pas reconnaître la fin d'un littéral ES6 String.

Au lieu de cela, tout le code suivant le littéral de chaîne est marqué en rouge (mise en surbrillance des chaînes dans le débogueur) et bloqué par l'inspection des variables car chrome semble penser qu'il s'agit d'une chaîne massive).

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

EDIT 1:
Il semble que ce problème soit en cours de traitement par l'équipe 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é priorisé. Si vous rencontrez le problème, rendez-vous sur le lien chrome ci-dessus et étoiles/commentez-le avec des informations utiles pour le déplacer au centre de l'équipe Dev Tools.

stringgoogle-chromedebuggingtypescriptgoogle-chrome-devtools
49
Anton v B

Quant à la version 69.0.3497.100 (Build officiel) (64 bits) dans Ubuntu, c'est toujours un bug.

Pour contourner ce problème, vous pouvez commencer à ajouter: //` à la fin des lignes contenant des chaînes de modèles, ce qui corrige la mise en forme dans l'onglet chrome sources.

Voici quelques exemples de mon code jsx de travail.

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 un rapport:

  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.

16
Rodrirokr

Ce 14 décembre 2017 commentaire de l'équipe DevTools dit qu'elle a mis à jour la version CodeMirror utilisée dans DevTools, et le problème devrait être résolu maintenant. Dans Chrome 64 et au-delà, cela devrait fonctionner. Dans les versions antérieures de Chrome il sera toujours cassé. Vous pouvez vérifier votre version sur chrome://version.

3
Kayce Basques