TypeScript breakpoints unable to establish connection

I am encountering an issue with my tsconfig.json file. Here is its current configuration:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "amd",
        "sourceMap": true,
        "declaration": true,
        "outDir": "../sdk_webroot/js",
        "rootDir": "js",
        "sourceRoot": "/js"
    },
    "exclude": [
        "vendor"
    ]
}

Despite setting up WebStorm for JavaScript debugging and mapping /sdk_webroot/js to the correct server directory, breakpoints in TypeScript do not connect properly (e.g. no response and missing red marker). On the other hand, breakpoints set in JavaScript within the sdk_webroot directory function as expected.

I have spent some time trying different approaches like adjusting sourceMappingURL and searching online for a solution, but unfortunately, I haven't found a fix yet. It seems that Chrome is also unable to load the .map files.

Is there something crucial that I may be overlooking?

javascripttypescriptwebstorm

Answer №1

After some trial and error, I managed to resolve the issue with the following solution:

    "outDir": "../sdk_webroot/js",
    "rootDir": "/js",
    "sourceRoot": "/../sdk/js"

It turns out that the sourceRoot value is included in the .map files, and when it's in a subdirectory, it no longer points to the correct .ts files. Interestingly, WebStorm was still able to correctly link the sources, though breakpoints were not functioning as expected. Quite frustrating.

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

Is there a way I can replace this for loop with the array.some function?

I am looking to update the filterOutEmails function in the following class to use array.some instead of the current code. export class UsertableComponent { dataSource: MatTableDataSource<TrialUser> createTableFromServer = (data: TrialUsers[], ...

arraystypescriptfunctional-programming

The inability to receive a response from the OpenAI API in NextJS is causing frustration

I tried following a tutorial to implement functionality in T, but I am facing issues with getting a response from the API. I am unsure if there has been an update to the OpenAI API that is causing this problem. Any assistance would be greatly appreciated. ...

javascripttypescriptnext.jsopenai-api

JavaScript FormData class does not recognize disabled and checked states on Bootstrap 5 switches

I am implementing a Bootstrap 5 switch input that I need to be mandatory, meaning it should be checked by default and not uncheckable. The official documentation suggests combining the attributes checked and disabled. However, it seems like the Javascrip ...

javascriptform-databootstrap-5

In Angular, you can achieve two-way binding between a mat tab group and an array in your typescript file. But what's the best way to programmatically switch to a specific mat-tab using types

Check out the code snippet below. I have a mat tab group with a mat tab corresponding to each ValidationStep object in the validationSteps[] array in my TypeScript file through two-way binding. Whenever I add a new element to the array, a new tab is dynam ...

angulartypescriptangular-material2

Initialization of Arrays with Default Values

I have taken on the task of converting a C++ program into JavaScript. In C++, when creating a dynamic array of type float/double, the entries are automatically initialized to 0.0; there is no need for explicit initialization. For example, a 1-D vector of ...

javascriptarrays

Limiting the length of numbers in Material UI

Is there a way to restrict user input to only numbers with a maximum length of 3 in Material UI? <TextField id="score" label="score" className={classes.textField} name="totalScore" margin="normal" defaultValue={score} /> We specifically ...

javascripthtmlreactjsmaterial-ui

Navigating through a large number of distinct items in Three.JS

I have hit a roadblock in my project development. I am striving to create a level using various phong materials on objects of unique sizes and shapes. However, Three.JS's default texture handling causes them to stretch out and look distorted on meshes ...

javascriptthree.js

When navigating back in Next.js, the URL changes but the content remains the same

I'm currently troubleshooting an issue where the content is not updating when I navigate back using the browser's back button or by setting a button with router.back. The URL updates correctly, but the content remains the same. When I refresh the ...

javascriptreactjsnext.jsback-buttonnext-router

Ways to patiently wait in a for loop until the ajax call is completed

I am a beginner in web development and currently working on a small website project that involves using ajax to display new comments. Below is the function I have created: function show_comments() { $('div#P_all_posts>div').each(function () { ...

javascriptphpjqueryhtmlajax

Exploring the world of functional programming within nested arrays

I have been shifting towards functional programming over imperative programming recently. Imagine I have a nested array data structure and my goal is to update the values of the innermost arrays. What approach would be most effective? Here is the imperat ...

javascriptarraysfunctional-programming

Crafting artistic shapes using the Canny Edge Detection technique on Canvas

Can someone provide some guidance on using Canny Edge Detection to generate shapes in Canvas? ...

javascripthtmlimage-processingcanvascanny-operator

Utilizing JavaScript to enable HTML checkbox to be checked automatically

I am currently working on a constructor that generates checkboxes within a loop. My issue lies in attempting to set these checkboxes as checked, however, it doesn't seem to be functioning correctly. Below is the code snippet: funct ...

javascripthtmlcheckbox

learning how to combine two json arrays of objects and showcase them in a react component

What is the best way to combine this data and present it in a table with a map using React? The text will be in the first column and the count in the second. const handleSubmit = async (event) => { event.preventDefault(); let URL1 = " ...

javascriptreactjsoop

AngularJS Skype URI Button Problem

Implementing a Skype button in my project using AngularJS has been challenging. Here is the code I am currently working with: HTML: <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script> <skype-ui ...

javascriptangularjsskypeskype-uri.js

What is the best way to ascertain the variance between two Immutable.js Maps?

I currently have two unchangeable maps: const initial_map = Map({x: 10, y: 20)} const updated_map = Map({x: 15, y: 20)} Can anyone advise on how to find the changes between the two maps? The expected outcome should be: Map({x: 15}) ...

javascriptimmutable.js

Shopping Directive Coverage Discrepancy

In my application, there is a shop item directive that includes a price attribute. When a user interacts with the directive, the total cost (a variable stored in the main controller) should be updated by the price of the item that was clicked. Unfortunate ...

javascriptangularjs

How to place an element in a specific location within the DOM using JavaScript

How can I position a created element in a specific place within the DOM using this code? Currently, it appends at the bottom of the page. var x = document.getElementById('options_10528_1'); var pos = document.getElementById('options-10528- ...

javascript

How to ensure an object is consistently rendered above all others using Three.js

Currently working on adding a dynamic command arrow that follows the cursor on the display. However, I have encountered an issue where it gets obscured by other elements on the screen. Is there a method to adjust the z-buffer or implement a workaround to ...

javascriptthree.jsrender

Cyber Platform

I recently encountered a challenge while working on my web project. What are some areas that can be improved? import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import {map} from 'rxjs/op ...

angulartypescript

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form

I am currently working on a user data collection project that involves filling out multiple forms. Each form has its own dedicated HTML page for personal details, educational details, and more. After entering personal details and clicking next, the data ...

javascripthtmlangularjsforms