Weird console.log behavior, incomplete objects

I have an Angular service that is using Restangular to send a GET request to my backend and get the response, I’m using Restangular.one('/users/3').get().

In the then block I’m just returning property result of Restangular’s response object.

The problem lies here, the user returned have a property additional_properties, but actually any code using the service finds this property empty!! Although it is NOT empty when examined at the network tab.

When console.log-ing the object, I can see it dimmed or faded, BUT when I expand the property, I don’t find the dimmed/faded properties!!!

Here are the screenshots…
This is the code being run:
enter image description here

This is the console output:
enter image description here

This the request in networks tab:
enter image description here

Notice in the second image, the first logged variable has the int_... property name but dimmed or faded, BUT the returned object does NOT have the property.

What do you think that might be?

How to find the JS function being called from Chrome Dev Tools in Angular application?

I’m working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.

Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I’m having trouble finding what’s going on.

I’ve read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.

Is there a way to see what JS is getting fired with a particular event on the page within Chrome’s Devtools?

Is there a way to set a conditional breakpoint based on a value in a Javascript Closure in a browser?

Is there a way to set a conditional breakpoint based on a value in a Javascript Closure in a browser? There’s an html element node in the closure whose ‘name’ property value changes for every AngularJS $formatters action execution. I would like a breakpoint to get hit only for a certain element.

The code snippet is in AngularJS attribute directive.
The breakpoint is on the originalValue line.

This screen capture shows the Closure in the Call Stack in Chrome Dev Tools. There’s a property ‘name’ (not shown) which has the element’s name.
I am looking for a breakpoint expression like this (Obviously not correct) : Closure (link).element.0.name == 'customerName'

enter image description here

enter image description here

How to find common objects between heap snapshop in Google Dev Tools?

I am working on a Memory leak issue in my Angular 1.4.7 application. I have recorded couple of heap snapshots and i can see that the Array is keep increasing between my snapshots. How to identify the objects which are common between snapshots?

The comparison view only shows the Added and Deleted objects between snapshots. I was looking for common objects between the snapshots so that i can look which are my array’s are still not being collected. Any idea?

I am trying to use the Summary view on a specific snapshot and finding objects which are in other snapshots too.

Your inputs will be greatly appreciated.

RA

Snapshot1
Snapshot2
Snapshot3

AngularJS accessing scope from $http.get function

I’m trying to change variable in scope from $http.get.then function, but it writes undefined. target.html loaded succesfully, I have tried and read response.

$scope.loaded_view = "before";
$scope.getView = function(name) {
        $http.get(chrome.extension.getURL("/views/" + name + ".html")).then(function(response, stat, xhr) {
            $scope.loaded_view = "after";
        });
        console.log($scope.loaded_view); //--> before
    }

$scope.getView('target');

Adding angular to extension content script code

I want to be able to manipulate the text fields on a website through chrome-extension. But since the website is written in angular, I would need to edit the text field using the angular code.
For using angular in the code, I would need to define the angular script in the scope of my extension. I’m declaring in the following way.

var s = document.createElement('script');
s.src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js";
(document.head || document.documentElement).appendChild(s);

But this again throws the error that angular is not defined and my functions would not run. Please show me how to define angular and where to define it.

Suddenly Angular’s Chrome Debugger extension is acting weird in visual studio code

since a couple of days, I can’t properly debug any of my projects using Angular’s Chrome Debugger extension in visual studio code, if I set a breakpoint at one line of code, it breaks in completely different line and also, i have to refresh the page the first time for it to work!

Angular CLI Version : 1.7.4
Visual Studio Version: 1.22.1

This is my launch.json, it was working all this months with this configuration, the only thing i recall that changed was an update in visual studio code from 1.21 to 1.22, but i rolled back to 1.21 and still the problem is there, has someone experienced those issues?

{
    "version": "0.2.0",
    "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:4200",
          "sourceMaps": true,
          "trace": true,
          "webRoot": "${workspaceRoot}/src",
          "userDataDir": "${workspaceRoot}/.vscode/chrome",
          "sourceMapPathOverrides": {
              "webpack:///*":"/*"
          }
    },
    {
      "name": "Attach to Chrome, with sourcemaps",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "sourceMaps": true,
      /*"diagnosticLogging": true,*/
      "webRoot": "${workspaceRoot}",
      "url": "http://localhost:4200/*",
      "sourceMapPathOverrides": {
          "webpack:///*": "/*"
      }
  }      
  ]
}

Detecting SPA UI page change for chrome extension

I have a chrome extension that is configured to run at

http://my.url/ui/foo

The /ui namespace is used by a section of the site that is managed by AngularJS. As such, transitioning between routes within /ui is managed client-side.

When the page at /ui/foo is first loaded, the chrome extension fires appropriately. However, if I transition in the client side from /ui/foo to /ui/bar and then back to /ui/foo, the chrome extension inject script is not re-firing. I assume it is something to do with the lack of document_start, document_end and document_idle hooks when transitioning locally between angular routes.

What is the best/appropriate/correct way for me to get my chrome extension to detect a local route change and re-fire, the same as it would if I went from /ui/foo to /something-not-client-managed to /ui/foo again?

How to get auto fill value by Angularjs in Google Chrome?

I have a problem with “auto fill” function by Google Chrome. It is impossible to get password value by angularjs. It is being possible only after clicking any place in the page(Document).
May be it is bug of Chrome.
How can I solve the problem.

Bellow see Chrome version.
Version 64.0.3282.140 (Official Build) (64-bit)

How to convert Javascript array into CSV file and download it from Chrome Extension?

Hello i am new to Chrome Extension and developing it in angularjs and i am trying to convert array into csv file and download it from Chrome Extension.

i have tried by

var csvData = new Blob($scope.result, { type: 'text/csv' }); 
var csvUrl = URL.createObjectURL(csvData);
chrome.downloads.download({ url: csvUrl });     

then another method i got from SO

    var finalVal = '';

    for (var i = 0; i < $scope.result.length; i++) {
        var value = $scope.result[i];

        for (var j = 0; j < value.length; j++) {
            var innerValue =  value[j]===null?'':value[j].toString();
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 0)
                finalVal += ',';
            finalVal += result;
        }

        finalVal += 'n';
    }

    console.log(finalVal);

    var download = document.getElementById('download');
    download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
    download.setAttribute('download', 'test.csv');

But both of them didnt work properly, i have following permission in manifest.json

permissions": [
        "http://*/*",
        "https://*/*",
        "unlimitedStorage",
        "contextMenus",
        "cookies",
        "tabs",
        "notifications",
        "activeTab",
        "downloads",
        "background"
    ]

while the first method download a file but it contains

[object Object][object Object][object Object]

I need to export my $scope.result into a csv file