Wie debugge ich diesen Controller in AngularJS?

Question

Ich habe das HTML wie folgt:

    <div class="col-md-4">{{ctrl.serviceInstance.additionalPorts}}<span 
          ng-if="ctrl.serviceInstanceOfActiveDeployment != null && !ctrl.compareArrays(ctrl.serviceInstanceOfActiveDeployment.additionalPorts,ctrl.serviceInstance.additionalPorts)" 
          class="glyphicon glyphicon-alert alert-icon" 
          uib-tooltip-html="'Active Deployment has a different set of Additional Ports.'"></span> 
        </div> 

Und ist die Steuerung wie folgt definiert:

function _compareArrays(arr1,arr2){ 
    if (arr1 === null && arr2 === null) 
     return true; 
    if (arr1 != null && arr2 != null) { 
     arr1.sort(); 
     arr2.sort(); 
     var result = arr1.length == arr2.length && arr1.every(function(element, index) { 
       return element === arr2[index]; 
      }); 
     return result; 
    } 
    return false; 
} 

Ich möchte überprüfen, welche Werte für die Variablen übergeben werden arr1 & arr2. Der Code wird in meinem Browser minimiert, und ich kann nicht direkt in der Konsole des Browsers auf die Variablen zugreifen. Wie kann ich auf diese zugreifen?

Danke!

Answer 1

Ich habe ng-inspector verwendet, um die Werte des Controllerbereichs zu erhalten, und es gibt eine sehr gute Baumdarstellung derselben.

Answer 2

function _compareArrays(arr1, arr2) { 
 
    console.log('this is arr1' + arr1); 
 
    console.log('this is arr2' + arr2); 
 
    if (arr1 === null && arr2 === null) 
 
    return true; 
 
    if (arr1 != null && arr2 != null) { 
 
    arr1.sort(); 
 
    arr2.sort(); 
 
    var result = arr1.length == arr2.length && arr1.every(function(element, index) { 
 
     return element === arr2[index]; 
 
    }); 
 
    return result; 
 
    } 
 
    return false; 
 
}

sollte mit console.log Aussagen über

wie geschrieben erfolgen