为什么 Chrome DevTools 不显示对象的所有属性？答案

【问题标题】：Why doesn't Chrome DevTools show all the properties of an object?为什么 Chrome DevTools 不显示对象的所有属性？
【发布时间】：2019-05-07 13:28:51
【问题描述】：

这是 Chrome DevTools 的屏幕截图，在断点处捕获。

正如我在注释中指出的那样，Watch 窗格显示变量 markerClusterer 具有属性 clearMarkers，但在 Scope 窗格中，该属性未在任何地方列出。

为什么？

如果有什么不同，我使用的是 AngularJS 1.7.5 框架，这部分代码在控制器中。代码粘贴在屏幕截图下方。我不需要任何关于角度风格或最佳实践的 cmets——这只是基于在线演示的概念证明。我只是发布代码以帮助解释为什么 DevTools 没有显示所有存在的属性。

<!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>

【问题讨论】：

标签： angularjs google-chrome-devtools angularjs-controller

【解决方案1】：

我在编写问题时想通了...

扩展__proto__ 显示缺失的属性！

【讨论】：