angularjs google-chrome-devtools angularjs-controller

Why doesn't Chrome DevTools show all the properties of an object?

Here is a screenshot of Chrome DevTools, caught on a breakpoint.

As I indicate in the annotations, the Watch pane shows that the variable markerClusterer has a property clearMarkers, but in Scope pane, the property isn't listed anywhere.

Why?

If it makes a difference, I'm using the AngularJS 1.7.5 framework, and this section of code is in a controller. Code pasted below the screenshot. I don't need any comments about angular style or best practices -- this is just a proof of concept based on a demo online. I'm only posting the code in case it helps to explain why DevTools isn't showing all the properties that exist.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>Dynamic ngMap demo</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

</head>

<body>

<div ng-controller="mapController">
    <div map-lazy-load="https://maps.google.com/maps/api/js?key=hidden" ng-if="show()">

        <map zoom="2" center="[43.6650000, -79.4103000]">

        </map>
    </div>
    <button ng-click="update()">update</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"
        integrity="sha256-7/yoZS3548fXSRXqc/xYzjsmuW3sFKzuvOCHd06Pmps=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"
        integrity="sha256-RflTGBQTyWuRHcjjgRTBrkLLntUWrNMmqMBV6vB7+Lw=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/ngmap@1.18.5/build/scripts/ng-map.js"
        integrity="sha256-n5o9oKQB0Zkoty1KgnVig31eV4ceJzLWtzWAq6E2gqs=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/markerclustererplus/2.1.4/markerclusterer.js"
        integrity="sha256-NcAKtiP/C7H0jWpFCoXdc0Oi6DMIyXTc3yhyF6F9efI=" crossorigin="anonymous"></script>

<script>

  MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m';  //changed image path
</script>

<!-- scripts/markers.js just defines an array:
var markers = [...]
-->
<script src="scripts/markers.js"></script>
<script>
  var app = angular.module('myApp', ['ngMap']);

  app.controller('mapController', function ($scope, $http, $interval, NgMap, $timeout) {

    $scope.dynMarkers = [];

    function data() {
      return _.sampleSize(markers, 1000)
    }

    var markerClusterer;

    function update() {

      if (_.isFunction(_.get(markerClusterer, 'clearMarkers'))){
        markerClusterer.clearMarkers();
      }
      showing = false;
      showing = true;

      let sampled = data();
      $scope.dynMarkers = [];

      NgMap.getMap().then(function (map) {

        for (var i = 0; i < 1000; i++) {
          var latLng = new google.maps.LatLng(sampled[i].position[0], sampled[i].position[1]);

          let marker = new google.maps.Marker({position: latLng});
          console.log(marker);
          $scope.dynMarkers.push(marker);

        }

        markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {});

      });


    }

    update();

    _.extend($scope, {
      update,
      markerClusterer
    });
  });


</script>
</body>
</html>

Solution

I figured it out while I was authoring the question...

Expanding __proto__ shows the missing property!