The debugger extension for Visual Studio Code in Chrome, [webkit-debug-adapter], received a response from the target application, but was unable to find any valid target

I am currently working on an Angular/TypeScript application and have been able to debug the TypeScript code in Chrome thanks to the map files.

Recently, I decided to install the Debugger for Chrome extension from Visual Studio Marketplace. You can find it here: https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

Despite setting everything up correctly, whenever I try to run the debugger in vscode, I encounter the following error message:

[webkit-debug-adapter] Got response from target app, but no valid target pages found

This error is most likely due to my lack of understanding on how to properly configure the debugger.

Currently, my app is running on port 9000 using Grunt. Below is a snippet of my debugger configuration file:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9000,
        "webRoot": "./app/scripts"
    }
  ]
}

If anyone has any insights or suggestions on how to successfully attach the debugger, I would greatly appreciate your assistance.

angularjstypescriptremote-debuggingvisual-studio-code

Answer №1

After some troubleshooting, I was able to resolve the issue on my own. If anyone else encounters a similar problem, you can find the solution below.

{
"version": "1.0.0",
"configurations": [
    {
        "name": "Run",
        "type": "firefox",
        "request": "launch",
        "url": "http://localhost:3000/",//Update this to your homepage URL
        "runtimeArgs": [
            "--new-instance", //Launch in a new instance
            "--profile=C:/development/", //Specify any directory for profile location
            "--devtools-server-port=9223" //Start debugging on port 9223
        ],
        "webRoot": "src/", //Folder containing source files
        "sourceMaps": true
    }
  ]
}

Answer №2

I successfully implemented angular-cli using the following launch.json configuration:

{

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/", //your application running with ng serve
            "sourceMaps": true,
            "diagnosticLogging": true,
            "runtimeArgs": [
                "--new-window", //Open in new window
                "--user-data-dir=remote-profile",
                "--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
            ],
            "webRoot": "${workspaceRoot}/src/"
        },
        {
            "name": "Attach with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/src/"
        }
    ]
}

Answer №3

According to the information provided in the documentation

If Visual Studio Code is unable to locate the target, you can confirm its availability by visiting http://localhost:< port >/json in a web browser. If you receive a JSON response and identify your target page within it, then the target should be accessible to this extension.

You may be encountering a Cannot GET /json error, but how to resolve it remains uncertain to me.

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

I am facing a problem with React Hooks useRef where I am unable to retrieve the updated state value

Trying to use useRef with React hooks, I encountered an issue where the state of the child component changes when calling the setAccountVal method, but upon alerting the value it remains as "Ege". Any ideas on how to resolve this? import React, { useS ...

reactjstypescriptecmascript-6react-hooksreact-ref

The Bootstrap-Datepicker in AngularJS is not functioning properly, as it is unable to detect user

I am currently working on developing an AngularJS application utilizing the bootstrap-datepicker library. Below is the HTML code I have created: <div id="test" class="input-append date"> <input type="text" ng-model="datepicker.date" class="spa ...

angularjstwitter-bootstrapbootstrap-datepicker

Removing empty options from a select dropdown in Angular 9

In the process of working with Angular 9, I am currently in the process of constructing a dropdown menu that contains various options. However, I have encountered an issue where there is a blank option displayed when the page initially loads. How can I eli ...

typescriptangular9

Managing onChange in a ReactJs project

Currently, my React tsx page features input boxes like the following: <textarea value={this.state.myData!.valueOne} onChange={(e) => this.handleValueOneChange(e)}/> <textarea value={this.state.myData!.valueTwo} onChange={(e) => thi ...

javascriptreactjstypescript

Exploring the Power of PrimeNG and Observables in Angular 4 with RxJS

After configuring my Angular 4 project with a service like this: const usersURL = 'http://my.super.url.php'; @Injectable() export class UserService { users: Observable<User[]> constructor (public http:Http) let tick$ = Observ ...

angulartypescriptrxjsprimeng

Testing the Angular router-outlet using Jasmine

When testing web-app navigation using Jasmine spec with RouterTestingModule, I am facing challenges with nested fixture.whenStable().then(() => {}). For instance: After clicking on multiple links where the router-outlet changes the displayed component ...

angulartypescriptasynchronousjasminerouter-outlet

Having trouble accessing undefined properties? Facing issues with the latest Angular version?

Why am I encountering an error and what steps can be taken to resolve it? Currently using the latest version of Angular. ERROR TypeError: Cannot read properties of undefined (reading 'id') Here is the JSON data: { "settings": [ { ...

jsonangulartypescript

nodemon failing to automatically refresh files in typescript projects

I am currently developing an app using NodeJs, express, typescript, and nodemon. However, I am encountering an issue where the page does not refresh when I make changes to the ts files. Is there a way for me to automatically compile the ts files to js an ...

node.jstypescriptnodemon

AngularJS is a powerful tool for implementing URL restrictions in web applications

After logging in, if I copy the URL of the welcome page and paste it after logging out, it correctly redirects me to the login page as expected because I check for the user's name in local storage. However, the issue now is that I cannot access the re ...

angularjs

Creating a versatile protractor framework to streamline multiple project implementations

There's a concept in the works for creating a 'protractor core' that will be utilized by various projects for UI testing. Currently, I have an Angular project called 'project1' with e2e tests (cucumber-protractor-typescript) that c ...

angularjstypescriptprotractorcucumber

Utilizing Angular's ng-Grid with Promises

My current setup involves fetching a JSON file through a service to serve as the data source for my grid. The service successfully fetches the data, and the grid renders its basic layout correctly. However, there seems to be an issue with populating the gr ...

javascriptajaxangularjsng-grid

Navigating Angular without the use of the hash symbol in the URL

For my project, I decided to use the angular seed template. I attempted to set up routing without using a hash in the URL. In my app.js file, I included the code $locationProvider.html5Mode(true);, and in my index.html file within the head section, I added ...

angularjsroutes

How to convert an attribute of an object within a list to a string separated by commas in TypeScript and Angular

I am working with an array of person objects in Angular 5 and displaying them in HTML using ngFor. The Person objects also contain an array of Role objects. persons:Array<Person>=[]; Each Role object is structured like this: export class Role{ ...

angulartypescriptangular5

Include additional information beyond just the user's name, profile picture, and identification number in the NextAuth session

In my Next.js project, I have successfully integrated next-auth and now have access to a JWT token and session object: export const { signIn, signOut, auth } = NextAuth({ ...authConfig, providers: [ CredentialsProvider({ async authorize(crede ...

typescriptnext.jsnext-auth

An error was encountered: Unable to assign value to the property "once" of [object Object] because it only has a

`Encountering an Uncaught TypeError: Cannot set property 'once' of [object Object] which has only a getter at HTMLDivElement.addEventListener (polyfills.js:1:146664). This issue is being faced during the process of upgrading the Angular version. ...

javascriptangularangularjsnpm-installnpm-scripts

An error occurred while using the Restangular ResponseInterceptor to manage loading state

In my controller, I use the following code (with ng-repeat in the view): $scope.projects = Restangular.all('projects').getList().$object; Also, I receive this object from a mongolab API: [ { _id: { "$oid" : "546a3bdee4b0bfd97138 ...

angularjsrestangular

Rendering templates using AngularJS within a Play Framework 2 project

I am currently in the process of transforming my application built on Play Framework 2.5 into a single page application using AngularJs. Here is an overview of what I was previously doing: Displaying a list of posts, utilizing Scala Template's @for ...

angularjsplayframeworkplayframework-2.0scala-template

What is the purpose of `status: :ok` in the `render json:` method in Rails?

What exactly does status: :ok achieve in the context of render json: {round: @round}, status: :ok? While sometimes it seems unnecessary, there are instances where including it is crucial to avoid errors like the following: ActionController::UnknownFormat ...

ruby-on-railsangularjsjson

Tips for utilizing an object key containing a dash ("-") within it

Here is an example of the object structure: { approved_for_syndication: 1 caption: "" copyright: "" media-metadata: (3) [{…}, {…}, {…}] subtype: "photo" } How can I properly a ...

javascriptreactjstypescript

Warning message regarding unhandled promise rejection in NestJS websockets

I've encountered a puzzling issue while attempting to integrate an 'events' module into my application to utilize websockets. Upon adding the module, an unexpected error surfaced: (node:59905) UnhandledPromiseRejectionWarning: Unhandled pro ...

javascriptnode.jstypescriptwebsocketnestjs