Loading an Angular app causes Chrome devtools to freeze

Currently, I am facing some unusual behavior in my rather large Angular (1.5) application. When I have Chrome DevTools open while loading the app, the CPU usage of that particular tab shoots up to 100%, causing the app to take a minute or more to load. Additionally, the memory usage spikes up to 500 MB and only about 150 MB gets garbage collected once the app is fully loaded.

However, if I load the app without DevTools open, it loads within a couple of seconds and runs smoothly afterward.

The memory usage appears to be stable during normal usage as I have optimized the ngRepeats with custom repeaters to keep the watch count in check.

I have tested this on various machines and operating systems, and even tried loading the app without any Chrome extensions enabled.

This issue seems to be specific to Chrome browsers, as Safari does not exhibit similar problems.

Perhaps running a timeline profile could shed light on the situation? Strangely enough, the problem disappears when attempting to record a timeline profile.

Does anyone have any insights into what might be causing this peculiar behavior?

javascriptangularjsgoogle-chrome

Answer №1

Perhaps the DevTools are retrieving source files from the page during the loading process.

During timeline recording, DevTools deactivate many of its debugging features to improve performance, resulting in faster operation.

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

Having difficulty invoking a JavaScript function at a global level

Currently, I am working on a nodejs application that involves mongoDB integration. In my code, I have created a function to extract specific data from MongoDB and save it in a variable called "docs". Despite multiple attempts to declare the function global ...

javascriptnode.jsmongodbfunctionexpress

If Gulp is running continuously, what output will I receive?

After reading a helpful post on StackOverflow about gulp tasks (viewable here), I came to the conclusion that it's not advisable to omit returning anything in a gulp task. For proper synchronization of asynchronous tasks, the caller should wait. Pres ...

javascriptgulp

Using PHP and jQuery to output content in HTML

I am facing an issue with displaying HTML content fetched from a database using the following code: $("#menuOverlay").append('<?php include('aggiungiPaginaComp.php');?>'); Although the code is functioning properly, when I view t ...

javascriptphpjqueryhtml

leveraging dependency injection to retrieve a function in JavaScript

I'm exploring a way to obtain a function in JavaScript without executing it, but still defining the parameters. My current project involves creating a basic version of Angular's dependency injection system using Node.js. The inject() method is us ...

javascriptnode.jsfunctiondependency-injectionreturn

Having trouble importing zone.js in Angular 14 and Jest 28

I am currently in the process of updating to Angular 14. Everything is going smoothly except for setting up jest. Since I have Angular 14 libraries included in my build, I need to utilize jest-ESM support. Below is my configuration: package.json { &qu ...

javascriptangulartypescriptjestjs

Acquire the URL using Angular within a local environment

I am currently working on a basic Angular project where I have a JSON file containing some data. [{ "name": "Little Collins", "area": "Bronx", "city": "New York", "coverImage": "https://images.unsplash.com/photo-1576808597967-93bd9aaa6bae?ixlib=rb-1.2.1&a ...

javascriptnode.jsjsonangulartypescript

Unexpected error encountered in the return value from the filter function in AngularJS

My goal is to filter a specific Firebase path and check if a certain child exists within that path. I am interested in retrieving only the values that have a child called "responses". The code works fine when the child exists, but throws an error when it ...

angularjsfirebasefirebase-realtime-databasefirebase-util

What causes the 'then' method of my angular service to return a resolved promise instead of the expected value?

I am perplexed as to why the "result" in this code snippet is a resolved promise instead of the actual value: searchService.getLink(vm.queryObject).then(function (result) { console.log(result); }); The implementation for the getLink() function is pro ...

javascriptangularjsangular-promise

Adding content to an empty element will not produce the desired result

I'm trying to show each character of a string, which is stored in an array, one at a time. However, when I use threadsleep(a) with the code found here: http://jsfiddle.net/thefiddler99/re3qpuoo/, all the characters are displayed at once. There seems t ...

javascriptjqueryhtml

Preventing Content Changes When Ajax Request Fails: Tips for Error Checking

I was struggling to find the right words for my question -- My issue involves a basic ajax request triggered by a checkbox that sends data to a database. I want to prevent the checkbox from changing if the ajax request fails. Currently, when the request ...

javascriptphpjqueryajax

Utilize AJAX to update the database through a bootstrap modal interface

My current project involves creating a webpage to display database records with edit buttons that trigger bootstrap modals for user input and status changes. The goal is to use AJAX to update the database with any modifications made. However, I'm enco ...

javascriptjqueryajaxtwitter-bootstrapjsp

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: Could anyone provide suggestions on how to achieve this or share any links related to something similar? I haven't b ...

javascripthtmljquerycss

Angucomplete-alt fails to display dropdown menu

On my website, there is a textarea where users need to input the name of a group project. The goal is to implement autocomplete functionality, so as users type in the project name, a dropdown menu will appear with suggestions of existing projects to assist ...

javascripthtmlangularjs

I used the `MyWindow=window.open` function to display a pop-up window and then navig

On my webpage (http://localhost:8088/hse/public/explorer), I have implemented two buttons: When these buttons are clicked, a new pop-up window will open at (http://localhost:8088/hse/public/explorer/1) onClick="MyWindow=window.open('http://local ...

javascriptjqueryhtml

Ways to stop your Browser from Caching

Developing a Facebook app has been my recent project. One thing that really bothers me is the random occurrences where changes I make to my CSS style sheet or when adding a new Javascript function do not reflect in the browser. This can be very frustrating ...

javascriptbrowser

Angling for Success: How to Test Immediately Invoked Functions within a Directive Controller Using Jasmine

Imagine I have a directive: .directive('myDir', function(TemplateHandler){ return { ... controller: function(ExploreCmd){ this.foo = { bar: function(){...} }; this.foo.bar(); } } }); I want to verify t ...

angularjstestingangularjs-directivejasminespy

Ensuring the validation of JSON schemas with dynamically generated keys using Typescript

I have a directory called 'schemas' that holds various JSON files containing different schemas. For instance, /schemas/banana-schema.json { "$schema": "http://json-schema.org/draft-06/schema", "type": "object", "properties": { "banan ...

javascriptjsontypescriptunit-testingvalidation

Utilizing imported components to set state in React

In my project, I created a functional component named Age and imported it into another functional component called Signup. This was done in order to dynamically display different divs on a single page based on the authentication status of the user. By sett ...

javascriptreactjsreact-hooks

After an upgrade, Ionic fails to start up

I have been working on an app with Ionic Framework and AngularJS 1.x A few weeks back, I updated my ionic cli to version 2.0.0. However, today when I tried running $ionic serve or $ionic build, I encountered an error regarding gulp not being found, even t ...

angularjsnode.jsionic-frameworknpmgulp

Java - RESTful API endpoint that serves images when available and JSON data when images are not available

I am currently working on incorporating a mobile front-end using the Ionic Framework along with the $cordovaFileTransfer plugin. My focus is on fetching and uploading a person's Profile Photo. Uploading the photo is functioning properly, but I am enco ...

javascriptjavajsonrestionic-framework