Tips for inspecting and troubleshooting JavaScript code while working with Typescript

One feature I appreciate about Visual Studio 2017 is its ability to debug directly in TypeScript, which is often very useful. However, there are instances when debugging the underlying JavaScript code becomes necessary. Is there a way to instruct Visual Studio to enable debugging in JavaScript?

Issues like "this" being "_this" and causing debugger errors, along with asynchronous functions resulting in varied underlying code, highlight the need for accessing the JavaScript code for debugging purposes.

Answer №1

Accessing Javascript for debugging purposes is crucial.

Turn off sourcemaps.

  • Adjust settings in your debugger, such as chrome options
  • Modify your tsconfig file with sourceMap: false
  • Edit your webpack config with devtool : 'none'
  • Check any other configurations where sourcemaps may be enabled

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

Error: unable to locate module that was imported from

Every time I try to run the project using this command, an error pops up: > npm run build npm info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a9b7aa87fee9f1e9f0">[email protected]</a> npm info using ...

Utilizing React Custom Hooks for Firestore Data Retrieval

I recently developed a React custom hook that interfaces with a Firestore database. I followed the guidelines provided on the Firebase website, but I encountered an issue upon re-rendering the component. After refreshing my app, the useEffect hook function ...

Route protection is ineffective when dealing with two observables simultaneously

After writing the route guard as shown below, I encountered an issue with the else statement that was not returning a result, even though it should have. Surprisingly, there were no errors either. this.hotelSettingsService.get().pipe(map(res => { ...

I am looking to update my table once I have closed the modal in Angular

I am facing an issue with refreshing the table in my component using the following function: this._empresaService.getAllEnterprisePaginated(1);. This function is located in my service, specifically in the modal service of the enterprise component. CODE fo ...

Debugging Typescript code with line numbers

When opening the console in a browser, typically the javascript line number of a function call or error message is displayed. However, my current setup involves using TypeScript, which gets compiled to Javascript. I am wondering if there is a way to retr ...

Promise<IDropdownOption[]> converted to <IDropdownOption[]>

I wrote a function to retrieve field values from my SPFx list: async getFieldOptions(){ const optionDrop: IDropdownOption[]= []; const variable: IEleccion = await sp.web.lists.getByTitle("Groups").fields.getByTitle("Sector").get ...

Obtaining parameter types for functions from deeply nested types

I'm currently facing a challenge involving deeply nested parameters. When dealing with non-nested parameters, everything functions smoothly without any issues export type test = { 'fnc1': () => void, 'fnc2': () => void, ...

Node.js allows for keeping pipe and sockets open even after streaming an HTTP response

My current challenge involves streaming data from an HTTP response to a cloud storage provider within an internal service. const response = await request<Readable>({ headers: httpOpts?.headers, data: httpOpts?.data, url, method, responseTyp ...

Using typescript, import the "anychart" library

After attempting to include the "anychart" library in my .ts file using the following import statement: import 'anychart'; I noticed that this line of code caused the entire HTML page on my local server to disappear. Here is a snippet from my ...

Efficiently transferring input to a Typescript file

Is there a better way to capture user input in Angular and pass it to TypeScript? <form > <input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" /> </form> The current method involves creating a ...

What steps are involved in generating a FormGroup identical to the one produced by the method?

Implementing a FormGroup within the context of a Mat Dialog window, I am aiming to validate the method that returns the FormGroup through unit tests. The method triggered on button click is as follows: closeDialogAndSendForm(): void { this.dialogWindo ...

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Is there a more efficient way to get all the input values ​​and place them in the appropriate location in my object (localStorage) without having to individually retrieve them as shown in the code below? Below is the function I currently use to update ...

How to use RxJs BehaviorSubject in an Angular Interceptor to receive incoming data

Being a newcomer to rxjs, I grasp most operators except for the specific use case involving BehaviorSubject, filter, and take. I am working on renewing an oauth access and refresh token pair within an Angular interceptor. While reviewing various codes fro ...

Are there any Android applications specifically designed for editing Typescript files?

While this may not be a typical programming inquiry, I have phrased it in a binary manner in hopes of meeting the criteria. I have been utilizing Quoda on my Android device and have encountered the need to edit .ts / Typescript files, which the app does n ...

What are the best strategies for combining multiple TypeScript class decorators?

I have a set of unique class decorators that I apply to multiple classes. It looks something like this: @awesome @cool @amazing export class MySpecialClass { /* ..... */ } However, since I use these three decorators across many classes, I want to condens ...

An error occurred when trying to access object references within a function

Here is a snippet of my code: const fn1 = (param1: string, param2: string, param3: string): Promise<void> => {return new Promise()} const fn2 = (param1: string, param2: string): void => {return} const options = { option1: fn1, option2: ...

Setting the type of a prop dynamically based on another prop value

Consider the following scenario with an interface: interface Example { Component: React.ReactElement; componentProperties: typeof Example.Component; } Is there a way to determine the type of properties expected by a passed-in custom component? For ...

What is the best method for incorporating an Angular Component within a CSS grid layout?

I recently started learning Angular and am currently working on a project that requires the use of a CSS grid layout. However, I'm facing an issue with inserting a component inside a grid area specified by grid-area. My attempt to achieve this in app ...

Adjust the appearance of matSelect when the selection menu is activated

What is the best way to adjust mat-select properties when its options are open? <mat-select class="selector"> <mat-option><mat-option> </mat-select> .selector:focus { color: green; } I attempted using focus, but ...

Is there a specific type that is narrower in scope when based on a string parameter?

tgmlDoc.createElement(tagName) typically returns objects of type any. I am looking to refine the return type in the function below in order to simplify the rest of my code. Is there a way to accomplish this? My attempt is shown below, but unfortunately, ...