When troubleshooting AJAX in Chrome, only the library lines are displayed in the call stack

While using "XHR breakpoints" to identify which line is triggering an AJAX request, I noticed that the call stack only shows Angular.js library lines. This makes it difficult to pinpoint the exact line in my code that triggered the request. What steps should I take to address this issue?

Additional information:

It may be relevant to mention that the AJAX response returns an error due to a non-existing URL. Furthermore, setting Angular as a blackbox prevents the breakpoint from triggering.

Answer №1

Angular doesn't send the Ajax request right away. Instead, it waits until after the digest cycle is complete.

To identify the code responsible for triggering the request, you can intercept the $http.get method or any other method used for making requests.

debugCall($http, "get"); // place this to execute only once

function debugCall(object, methodName){
    var originalMethod = object[methodName];
    object[methodName] = function(){
         debugger;
         originalMethod.apply(this, arguments)
    }
}

You can also examine the Angular call stack for clues. In a demo like this one, the top function in the call stack may be named eventHandler.

If you navigate to that specific call frame and run event.target.outerHTML in the console, you'll see

<button ng-click="doXhr()">Do XHR 2</button>
. This information will help pinpoint where the request is originating from.

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

Can someone explain the function of statements such as (function () { // code; }.call(this)); within a JavaScript module?

By utilizing the Function.prototype.call() method, it becomes possible to create a function that can be applied to various objects. I delved into the code of , which had been minified and required to be un-minified for examination. The structure of the co ...

Is there a glitch in the console when sorting an array of dates?

I'm puzzled by the fact that the console is displaying a sorted array in both logs. It doesn't make sense to me because it should not be sorted at the first log, right? static reloadAndSortItems() { let array = []; const items = Store. ...

html inserting line break using label

I am attempting to dynamically set text to a label using jQuery. However, I am having trouble getting the <br> or \n to create new lines. Instead, all the text displays on the same line and wraps around. If you want to see my code in action, ch ...

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

This is my first venture into the world of HTML and JavaScript, so I am asking for your patience. I am trying to incorporate the Datepicker widget from jQuery UI, following the instructions on the Getting Started page. There seems to be an issue with lin ...

Removing and shattering data from a JSON file at a designated location in AngularJS

I have received json data that is structured like this (and unfortunately cannot be modified): Desc: First data - Second data My current method of displaying this data involves using the following code: <div ng-repeat="b in a.Items">{{b.Desc}}< ...

AngularJS ng-repeat with dynamic ng-model is a powerful feature that allows for

I am attempting to dynamically generate the ng-model directive within an ng-repeat, but I am encountering a browser error. Our goal is to dynamically retrieve attributes of a certain type and set them in the DOM. The specific error I am receiving is: Err ...

I am looking to incorporate a dropdown feature using Javascript into the web page of my Django project

According to the data type of the selected column in the first dropdown, the values displayed in the columns of the second dropdown should match those listed in the JavaScript dictionary below, please note: {{col.1}} provides details on the SQL column data ...

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

Unable to invoke any fineUploader functions within a callback function

My autoUpload is currently set to false because I prefer uploading the images manually to my backend. To achieve this, I need the file object first. In the onSubmitted event callbacks, I am attempting to pass the image's ID to the getFile method to re ...

The issue of Ejs partial header and footer file only functioning in one file and not the other (both at the same directory level)

I'm in the process of setting up a view page for a post on the main page of a website. Both pages share the same header and footer files, located at the same directory level. However, while one page is functioning correctly, the other is not. The erro ...

Json object not recognized

I am in the process of developing a basic application where the user can interact with a button to retrieve a JSON object from the database. The object's structure is displayed below. However, the system is failing to recognize the object, resulting i ...

Auth0 encountering issues retrieving ID token and user metadata

Currently in the process of integrating Auth0 into a Vue.js/Node.js application, I have successfully enabled user registration and login functionality (to /callback). Although the manual addition of data to the user metadata section is functional at this s ...

`CORS (Cross Origin Resource Sharing)`

Hi there, I've been researching "CORS" and I believe I have a good grasp of the concept. However, I am encountering some difficulties when trying to make a cross domain POST request. To test this, I have set up two test sites on my local IIS: http:/ ...

What is the best way to display a header element in front of an article element?

I'm struggling with making my header element sticky and appear in front of my article. Modifying the z-index hasn't given me the desired result so far. Is the z-index ineffective when dealing with floating elements? Or is there a workaround to m ...

Mistakes in serializing arrays for javascript in an ajax request

I am trying to send an array of JavaScript objects in an Ajax call. This is how I create my array: var itemsToEdit = []; $(".editedItem[value='true']").closest("tr").each(function() { var itemToEdit = { id: $(this).find(".i ...

The model's function received the error message "Not a valid function."

My project involves NodeJS, Express, and Sequelize(mysql2)... I am encountering an issue where I keep receiving the error message "is not a function". I have created a model and defined a function in the model as shown below: module.exports = (sequelize, D ...

Having trouble retrieving information from the Redux store and displaying it in the user interface component

I'm currently diving into the world of Redux and working on a tracker app, but I've hit a roadblock that's had me stuck for days. Your help would be greatly appreciated. Thank you. store.js import { createStore, applyMiddleware, compose } f ...

What is the reason that the <script> tag cannot be directly inserted into the .html() method?

As I continue to learn front-end development, I've created my own version of JS Bin. When the 'run' button is clicked, a statement is executed to showcase the HTML, CSS, and JavaScript in an iframe (the output window): ("iframe").contents() ...

Incorporating invisible surprises into a fixed menu that reveal themselves as you scroll

I am working on implementing a top navigation and a sticky sub-navigation feature. The goal is to have the sticky nav become the top nav when the user scrolls down the page, similar to the functionality on this website - The issue I'm facing is with ...