Visual Studio Code unable to locate source maps for typescript debugging

Looking for some help debugging a basic Hello World TypeScript file. Whenever I try to set a breakpoint, it seems like VS Code is having trouble locating the source map, even though it's saved in the same directory. I'm using Chrome as my browser for this project and here's a snippet from my launch.json file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch with Chrome",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": true,
            "file": "${workspaceRoot}/HelloWorld.ts"
        }
    ]
}

I've tried different methods like starting the debugging session first and then setting a breakpoint, along with making sure there are no other instances of Chrome running during the debug process.

Below you can see the contents of the map file:

{"version":3,"file":"HelloWorld.js","sourceRoot":"","sources":["HelloWorld.ts"],"names":[],"mappings":"AAAA;IACW,MAAM,CAAC,IAAI;QACd,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC3B,MAAM,CAAC,CAAC,CAAC;IACb,CAAC;CACJ;AAED,OAAO,CAAC,IAAI,EAAE,CAAC"}

And lastly, the code from my HelloWorld.ts file:

class Startup {
public static main(): number {
    console.log('Hello World');
    return 0;
}

}

Startup.main();

I am currently at a loss for what else I could do to ensure that VS Code processes the map correctly.

Answer №1

To execute a .js (or .ts) file in Chrome, it cannot run on its own. You must specify the file to point to an HTML file path or initiate a webserver and define the url to its address.

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

selecting unique elements using classes is not possible with jquery

I am experimenting with using ajax on dynamically generated html elements from django. I have tried selecting the instances by class, but for some reason, it is not working as expected. Can anyone point out my mistake here? javascript $(document).ready(fu ...

The inline style fails to take effect on input elements that are generated dynamically

Consider: $( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() { var q = $( this ).html(); $( this ).html( "<input type='number' style='text-align:right width:50px' min='1' value='" + q + " ...

Create a custom countdown using Jquery and Javascript that integrates with MySQL and PHP to display the datetime in the format Y-m-d

Hey there, I'm looking to create a countdown script using dates in the format (Y-m-d H:m:s). The goal is to retrieve the current_datetime and expire_datetime in this format and incorporate them into some JavaScript or jQuery plugin to display a countd ...

Subclassing Observable in RxJS 5: Parent class instances are returned by static methods

I've been experimenting with subclassing the RxJS Observable class and overriding the lift method, as explained here. While I can successfully add new operators to the prototype, when trying to create a new Observable using my subclass (such as MyObs ...

Why is the Angular directive '=&' value binding to the scope showing as undefined?

An Angular directive has been defined within my application: (function() { 'use strict'; angular .module('almonds') .directive('security', ['$animate', 'AuthFactory', directive]); fun ...

Customize RequireJS dependencies for flexible dependency injection

Currently, I am faced with integrating a component that would greatly benefit from Dependency Injection (DI) into an existing framework where DI was not considered during its initial design. The configuration defining dependencies is sourced from a backend ...

What could be causing the constant undefined response when using ajax to post to php?

I have been using a mouseover event on a span element to trigger an ajax post call to a php page. However, I keep getting undefined values - first for responseText when using a simple echo to get the response, and now with responseXML. Can someone please h ...

Using Vue.js watchers can sometimes cause an endless loop

I'm working on a unique aspect ratio calculator. How can I ensure my code doesn't get stuck in an endless loop when dealing with 4 variables that are dependent on each other? To address this, I implemented 4 watchers, each monitoring a specific ...

Implementing state management in ReactJS

I'm a newcomer to ReactJS and I've encountered an issue with the setState function in my code. The expectation was for the value to increment by 1 every second, but that isn't happening. import React from 'react'; import ReactDOM ...

Using Selenium Webdriver to initiate the play function of a video by clicking on the control

Is there a way to play the video on this page by clicking the play button? I noticed a 'playpause' control in the JavaScript, but I'm unsure how to activate it. <div id="videoModal" class="reveal-modal expand open" style="display: block ...

Create a regular expression in Javascript that only matches strings that do not contain any periods

Struggling with setting up an express route for localhost:3000/test and utilizing regex to handle specific URL patterns. Need assistance combining regex with Express params functionality. router.get('/test/:path[\s^.]*$', function () { ...

Unable to retrieve the chosen option from the datalist

I am encountering an issue with a datalist where I can't seem to retrieve the value that is currently selected when a button is clicked. Despite following recommendations from various posts on Stack Overflow, my code still returns undefined. Interesti ...

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

I'm having some issues with my code. I am attempting to use passport authenticate in order to save patient information that is specific to the token generated for each individual. router.get("/current", passport.authenticate("jwt", { session: false }) ...

Clicking to reveal a v-date-picker v-menu and automatically focusing on a v-text-field within it?

I implemented a date-picker component in my app following the instructions from Vuetify. To enhance usability for desktop users, I removed the readonly attribute to allow manual input. Now, desktop users can easily navigate through form fields using th ...

What is the best way to incorporate npm packages and ES6 features into Django?

As I work on the frontend development of my Django application, I am keen on incorporating the official material design components. Yet, I am faced with a challenge in seamlessly integrating these components. I am looking for a way to import the npm packa ...

Using PHP as a data source, implement a feature in Google Maps that

I am currently working on incorporating an array of markers that are generated in PHP to a Google map. Below is the JavaScript code for my map: var map; var markers = []; var mapOptions = { //center: new google.maps.LatLng(locations[0].lat, locations[0 ...

Issues with tracking changes in Vue.js when using reactive variables

After triggering a click event, I am attempting to choose a message from a json file. However, I am encountering an issue where the first click does not seem to select anything. Upon the second click, the selected messages are duplicated, and this pattern ...

Merge two separate Vue applications into one cohesive application

I have developed two separate Vue apps independently from each other. User Interface Admin Interface Each app has its own routes, store, configs, etc. I came across this helpful comment here which discusses treating each app as a component within a mai ...

Can the script be loaded into a TypeScript file?

I'm currently in the process of integrating this script tag into my Angular 2 project, but I'm searching for a way to incorporate it into the typescript file so that I can access its methods within the .ts file. <script type="text/javascript" ...

I am attempting to input the form data, but all I see on the console is "null" being printed

I am facing an issue where the console.log(data) statement is printing null on the console. I am trying to send the form data (with id "myform") to a Java backend post method, but for some reason the code is not functioning correctly. Can anyone identify ...