template - typescript string length

Problema de Chrome Dev Tools con ES6 String Literals/Typescript

Question

Estoy trabajando en un proyecto que usa Typescript y algunas de las características ES6 expuestas por Typescript como ES6 String Literals, por ejemplo, `Something ${variable} Something else` .

Mientras depuraba un problema, dejé caer un punto de interrupción en mi archivo de mecanografía para recorrerlo en el panel de origen, que generalmente funciona bien.

Pero Chrome Dev Tools tiene un problema con los literales ES6 String y no parece reconocer el final de un literal ES6 String.

En su lugar, todo el código que sigue al literal de la cadena se marca en rojo (resaltado de la cadena en el depurador) y se bloquea desde la inspección de variables, ya que el depurador de Chrome parece pensar que se trata de una cadena masiva.

¿Alguien ha encontrado este problema, ha encontrado una solución o sabe si esto está en la hoja de ruta de Google para Chrome Dev Tools?

EDIT 1:
Parece que el equipo de Chromium actualmente está trabajando en este tema. Ver el informe de problemas para las actualizaciones:
bugs.chromium.org/p/chromium/issues/detail?id=659515

EDIT 2: Bug ha estado abierto durante bastante tiempo, pero no parece haber sido priorizado. Si experimentas el problema, ve al enlace de cromo que se encuentra arriba y ejecútalo / coméntalo con información útil para ponerlo en foco en el equipo de Dev Tools.

Answer 1

En la versión 66.0.3359.181 (compilación oficial) (64 bits) sigue siendo un error.

Como solución alternativa, puede comenzar a agregar: //` al final de las líneas que contienen cadenas de plantilla, que corrige el formato en la pestaña de fuentes de Chrome.

Aquí hay algunos ejemplos de mi código jsx en funcionamiento.

En componentes props:

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

Como elemento secundario:

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

En una oracion:

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

Realmente espero que puedan solucionar este problema lo más rápido posible.

Answer 2

Este comentario del 14 de diciembre de 2017 del equipo de DevTools dice que actualizaron la versión de CodeMirror utilizada en DevTools, y que el problema debería solucionarse ahora. En Chrome 64 y más allá debería funcionar. En versiones anteriores de Chrome, seguirá roto. Puede verificar su versión en chrome://version .

Answer 3

Si está utilizando Typescript, puede solucionar este problema compilando su código en ES2015 y utilizando mapas de origen. De esta manera, las cadenas repetidas interpoladas se convertirían en la buena "string " + variable + " string" , pero aún así se podría depurar mientras se mira el código de mecanografía original con barras invertidas.

Esto requeriría agregar lo siguiente a su tsconfig.json:

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

Y si sirve localmente los archivos de mapa de origen generados ( .js.map ) junto con los archivos .js generados, debería poder abrir los archivos de texto mecanografiado en las herramientas de desarrollo de Chrome en "Fuentes" con Ctrl-p .