How do you output to console from within angular code?

Question

I am new to Angular and having trouble figuring out how to test things in console with it. I am used to outputting variable values to the console as I code to check that the values are what I think they'll be. For example, if I want to get the length of an array I would just do console.log(myArray.length) inside of my code. If I put that inside of my controller function, nothing happens. And nothing happens if I put it inside of a function inside of my controller? I know I can inspect a particular element with $0 but that doesn't help in testing the code, I don't want to have to type the code into console to test aspects... Right now I am not using Angular in the context of the MEAN stack - I'm just using html, js, bootstrap and angular inside of MAMP; so, I'm not using node or a testing framework. Do I need to? And if so, can I use a testing framework without configuring the project environment with node/express? Thanks for your help.

angular.module('foil')

.controller('DonorListCtlr', function($scope, $http, $log, $httpParamSerializerJQLike){

    $scope.donors = []; 


    $http.get('api/list_donors.php').then(function(response){
        $scope.donors = response.data;
    });

    //create list of tabs
    $scope.tabs = [];

    $log.log('your stuff');

    $scope.gifts = [];  

    $scope.openTab = function(donor) {
        var newDonor = angular.copy(donor);
        $http.post('api/get_gifts.php', $httpParamSerializerJQLike({id: donor.id}), 
        { headers: { 'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(response) {
            $scope.tabs.push({donor: newDonor, gifts: response.data});
        });

    };

    //add ability to close tab  
    $scope.closeTab = function($index) {
        $scope.tabs.splice($index, 1);
    };


    //submit form fields to process php to update donor details
    $scope.saveDonor = function(donor) {
        $http.post('api/process.php', 
        $httpParamSerializerJQLike({
            'donor_first': donor.donor_fname,
            'donor_last': donor.donor_lname, 
            id: donor.id 
            }), 
        {headers: { 'Content-Type': 'application/x-www-form-urlencoded'}} ).then(function() {
            for(var i=0; i< $scope.donors.length; i++) {
                if($scope.donors[i].id === donor.id) {
                    $scope.donors[i] = donor;
                    break;
                }
            }
        });
    };
});

So you are trying to say that console.log() is not working inside the controller!!. Either I didn't get the context of the question properly or I am missing somthing. Could you just explain it again? — Muhammed Neswine
– Muhammed Neswine, Commented Mar 17, 2017 at 18:58
What browser are you using? You are looking at the console that opens if you press F12, right? Do you know how to set breakpoints there, to see if your JS code gets run? — stholzm
– stholzm, Commented Mar 17, 2017 at 19:01
Muhammed, yes; and stholzm, I'm using Chrome (v56) on a macbook. — user1574371
– user1574371, Commented Mar 17, 2017 at 19:13
The most common cause of console.log not working is that the app or controller didn't load properly. Try angular.element($0).scope() in the inspector console to see the scope variables in an app. If undefined then no app is running on the element. — georgeawg
– georgeawg, Commented Mar 17, 2017 at 20:56

Vineet Agrawal · Accepted Answer · 2017-03-17 20:16:27Z

2

If you have return like this in controller and included this controller in HTML page. Then without setting any environment you console.log should be working. In controller write like: 'use strict';

angular.module('testApp', [])
    .controller('TestController', function() {
        console.log("Hello");
    });

In HTML write like:

<!DOCTYPE html>
<html lang="en" ng-app="testApp">

    <head>
        <!--whatever files you need to add for css and bootstrap-->
    </head>
    <body ng-controller="TestController">
        <script src="angular.js"></script>
        <script src="controller.js"></script>
    </body>
</html>

Then you console.log("Hello"); Should show the message in the console. If this is not your answer then post your code with creating a plunker

answered Mar 17, 2017 at 20:16

Vineet Agrawal

1568 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1574371 Over a year ago

Yes! This works as it should! :-) Only I don't understand why it doesn't in my own controller?

user1574371 Over a year ago

Does $scope encapsulate so much that you can't console log items within?

Vineet Agrawal Over a year ago

No you can print anything using console and wherever you want. You try printing console.log inside $http.get function after response or you try just above $http.get call

user1574371 Over a year ago

Thank you Vineet. I couldn't understand why console.log wouldn't work and now I see that it can. I needed to clear the browser cache/history and now it works in my controller as well as the example you provided.

xXx · Accepted Answer · 2025-09-14 12:21:44Z

0

Try $log.log('your stuff');

Make sure you inject $log into controller.

Add something like this

$scope.donors = []; 
$scope.GetDonors = function (){
    $http.get('api/list_donors.php').then(function(response){
        $scope.donors = response.data;
    });
};    
$log.log($scope.donors);

you have to invoke GetDonors from outside which will set your donors.

edited Sep 14 at 12:21

xXx

1,1611 gold badge11 silver badges25 bronze badges

answered Mar 17, 2017 at 18:57

Krishna

5493 silver badges14 bronze badges

5 Comments

user1574371 Over a year ago

angular.module('foil') .controller('DonorListCtlr', function($scope, $http, $log, $httpParamSerializerJQLike){ $scope.donors = []; $http.get('api/list_donors.php').then(function(response){ $scope.donors = response.data; }); //create list of tabs $scope.tabs = []; $log.log('your stuff'); $scope.gifts = []; ...more

user1574371 Over a year ago

nor can I add all of the code for the controller - too many characters.

Krishna Over a year ago

edit your post and add code. select code do a ctrl+k and then post it.

user1574371 Over a year ago

I edited the initial post to include the code. My aim right now is to have the console output the length and contents of $scope.tabs so I can 1. limit the number of open tabs and 2. prevent the same link from opening two or more identical tabs.

user1574371 Over a year ago

Krishna, Thank you. I cleared the cache and history and this approach worked too. Thank you also for the guidance in posting questions.

Collectives™ on Stack Overflow

How do you output to console from within angular code?

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related