Troubleshooting Problem with ES6 String Literals/Typescript in Chrome Developer Tools

I'm currently immersed in a project that involves Typescript and some of the ES6 features it offers, such as ES6 String Literals like 

`Something ${variable} Something else`
.

During my debugging process, I decided to set a breakpoint in my typescript file to step through it using the source panel, which usually works smoothly.

However, I've run into an issue with Chrome Dev Tools not recognizing the end of an ES6 String literal. It highlights all code following the string as red (in the debugger) and prevents me from inspecting variables since Chrome seems to think it's one huge string.

Has anyone else faced this problem before? Have you found a solution or heard if Google plans to address this in Chrome Dev Tools?

EDIT 1:
It seems the Chromium team is currently addressing this issue. Check out the bug report for any updates:
bugs.chromium.org/p/chromium/issues/detail?id=659515

EDIT 2: While the bug has been open for a while, it doesn't appear to be a top priority. If you're experiencing the same problem, visit the chromium link above and provide helpful information by commenting or starring the issue to bring it to the attention of the Dev Tools team.

stringgoogle-chromedebuggingtypescriptgoogle-chrome-devtools

Answer №1

There is a persistent bug in version 69.0.3497.100 (Official Build) (64-bit) on Ubuntu.

A temporary solution is to append //` at the end of lines with templated strings, which resolves the formatting issue in the chrome sources tab.

Below are some examples of functioning jsx code:

Within component props:

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

As a child element:

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

In a statement:

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

We can only hope for a speedy resolution to this persistent issue.

Answer №2

According to a comment dated December 14, 2017 from the DevTools team on Chromium bug tracker, they have made updates to the CodeMirror version used in DevTools which should resolve the issue. The fix should work for Chrome 64 and newer versions, but older versions will still encounter the problem. To verify your version, you can go to chrome://version.

Answer №3

To avoid the issue when using Typescript, you can compile your code to ES2015 and utilize source maps. This way, the backtick interpolated strings will be transformed into the traditional "string " + variable + " string", allowing you to debug while still viewing the original Typescript code with backticks.

To implement this solution, include the following settings in your tsconfig.json file:

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

If you host the generated source map files (.js.map) along with the generated .js files locally, you can easily access the Typescript files in chrome dev tools under "Sources" using Ctrl-p.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adjusting the dimensions of a map within the app.component.html

Within the code snippet below, my aim is to adjust the width and height of the map using the style tag shown here: <style> #map3 .map { width: 100%; height:90px; } </style> Despite trying various values for width an ...

javascriptangulartypescriptopenlayers

Guide to setting up an interface-only project (along with its dependent projects) on NPM

I'm encountering two problems with my TypeScript project. Imagine I have a interface-only TypeScript project called myproject-api. My plan is to implement the interfaces in two separate projects named myproject-impl1 and myroject-impl2. I am utilizin ...

node.jstypescriptnpmimporttypescript-typings

a guide on accessing key value elements within an array using Ionic 3

Just diving into the world of Ionic, I am currently working on a task to showcase products on the cart page that have been added to the cart. Upon fetching data from a REST API, I can see the response below in the console. "items": { "29.2.2.0.YTowOnt ...

javascripthtmltypescriptionic-frameworkionic3

TypeScript is failing to identify a correctly typed property

Currently, I am facing issues while converting a Material UI Dashboard from React to Typescript. The problem arises during TypeScript compilation where the property in question meets the criteria mentioned in the error message. To put it briefly, the compi ...

reactjstypescriptmaterial-ui

Verify if the date and time in string format is the exact same as noon

In my data collection, there are multiple objects each containing a specific date and time value: [ {dt: "2019-11-29 12:00:00"}, {dt: "2019-11-29 3:00:00"}, {dt: "2019-11-29 6:00:00"}, {dt: "2019-11-30 12:00:00"}, {dt: "2019-11-30 6:00:00"} ] M ...

javascripttypescriptangular7

React - Component not updating after Axios call in separate file

Recently I decided to delve into React while working on some R&D projects. One of my goals was to build an application from scratch as a way to learn and practice with the framework. As I started working on my project, I encountered a rather perplexin ...

javascriptreactjstypescriptaxios

What is the process of specifying mapped types for function return types in TypeScript version 4.5.4?

Previously, in typescript 4.4.4, this code compiled successfully: /** * type to get only those properties that are functions */ type FunctionProperties<T> = { [P in keyof T]: T[P] extends (...args: any) => any ? P : never; }[keyof T]; type Re ...

typescriptmapped-types

Ensure the proper utilization of properties

Consider a scenario where I have a structure that defines a user along with their login and given name: export interface User { login: string; name: string; } Now, my objective is to make an API call using the user's login information: const fo ...

typescript

Empty spaces are mandatory here

When experimenting with declaring a function that must be called with a specific context (undefined, null, or global), I made an interesting discovery. I noticed that when declaring a function with this: void, it can be called with any context. However, if ...

typescriptvoid

Problems with the package @types/ckeditor

Encountering some difficulties while utilizing @types/ckeditor from the provided source. https://www.npmjs.com/package/@types/ckeditor The installation of the package was successful, and after importing the type into the necessary file, everything appear ...

angulartypescriptckeditorckeditor4.x

Compiling problem encountered in Typescript due to error TS2705 related to the ES2015 --lib option

When I run tsc -p . to compile a TypeScript file, I encounter the following error: error TS2705: A async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor o ...

node.jstypescriptnode-modulestsconfig

Leveraging React's state to enable temporary invalid numeric input handling

My current approach may be flawed, but I aim to have a parent component and a child component, where the child contains an input field for users to enter numbers. The callback function of the parent component will only be triggered for valid numbers, as ve ...

reactjstypescript

What is the best way to calculate the total sum of dynamically changing inputs in Angular 2?

Is there a way to calculate the total sum from dynamic inputs in angular 2? I'm not sure how to implement this. Thanks! https://i.sstatic.net/eXBjN.png //html component <md-input-container style="width: 80px;"> <input md-inp ...

angulartypescript

Can Flask convert a JSON Array object into a Python string?

When I receive a JSON-encoded parameter in my Flask server via an HTTP POST from the client application, the JSON object structure seems to be causing some confusion. In this example, I have included only the first 2 entries of the JSON object for simplic ...

arraysjsonstringflask

Retrieve the variance between two arrays and store the additions in AddedList and the removals in RemovedList using typescript

I am still getting the hang of Typescript and I am trying to figure out the best solution for my issue. I have two arrays, A and B, and I need to identify the difference between them in relation to array A. The goal is to separate the elements that were ad ...

javascriptarraystypescript

How can I retrieve header values in the canActivate function in Angular?

Depending on the value of userRole received from the header, I need to redirect to different user pages. angular.routing.ts { path: '', pathMatch: 'full', redirectTo: '/login' }, { path: 'user', loadChildren: &apo ...

angulartypescriptrxjs

Understanding the return parameter "typeof SomeClass" in TypeScript

typeof in JavaScript returns a string. The TypeScript typings for Sequelize include return types of typeof Model. What does this mean and what is its purpose? I have looked through the documentation but could not find an explanation. Link to Sequelize Typ ...

typescriptsequelize.js

The header section on a website not behaving as expected in the Chrome browser

For my website, I want it to look like this in Internet Explorer: https://i.stack.imgur.com/hSkVM.png ^^ This is the IE view However, in Chrome, it displays like this: https://i.stack.imgur.com/noQw8.png The issue is with the Top bar on Chrome showing co ...

htmlcssinternet-explorergoogle-chrome

Issue with finding module in TypeScript component import during Jest test

Despite having the correct path to my styled objects, I'm puzzled by the error message that has popped up: Error: Cannot find module '../../shared/models' from 'Astronaut.tsx' import { moonHoldings } from '../../shared/models ...

javascriptreactjstypescriptjestjsnext.js

Extract and preserve elements from an ordered array by segregating them into separate arrays of objects using Angular 8

I have an array called arrayReceived containing 15 objects. My goal is to sort and store the first 6 objects with the lowest amount value in a new array called arraySorted. These objects are sorted based on their amount parameter. There may be multiple obj ...

arraysangulartypescriptangular8