Console.log doesn't work, devtools console shows no errors

Question

A bunch of code isn't working and I'm trying to identify where the problem lies but console.log() isn't logging any results in Chrome Dev tools, am I doing it correctly?

$(window).scroll(function() {
       $('section').each(function(){
            var id='#'+$(this).attr('id'),
                off=$(id).offset().top,
                hei=$(id).height(),
                winscroll=$(window).scrollTop(),
                dif=hei+off-($(window).height());

            if (winscroll >= off && winscroll<=dif) {
                console.log('first broken');
                $(id+' .sticky').removeClass('abs').addClass('fix');
            } else if (winscroll > dif){
                console.log('second broken');
                $(id+' .sticky').removeClass('fix').addClass('abs');
            } else {
                console.log('third broken');
                $(id+' .sticky').removeClass('fix abs');
            }   });
        });

EDIT FULL CODE ADDED

$(document).ready(function() {

    // If a browser supports 3D transforms use the fancy menu if it doesn't, use standard accordion menu instead
    if($('html').hasClass('csstransforms3d')){

        $( "#mp-menu" ).removeClass( "snap-drawers" ).addClass( "mp-menu" );

        $('nav ul li ul').css('border-bottom','1px solid rgba(255, 255, 255, .05)');
        $('nav ul li ul').css('background','none');

        // Insert elements where necessary to create the right structure
        $('#mp-menu').wrapInner('<div class="mp-level" />');
        $('#mp-menu').find('li > ul').wrap('<div class="mp-level" />');

        $("#mp-menu ul li .mp-level").prepend(function () {
            return '<span class="menu-title">' + $(this).prev().text() + '</span> <a class="ico mp-back" href="#">Back</a>';
        });

        // load in necessary JS files
        $.getScript('http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/multi-level-menu.js');

    } else {

        // load in necessary JS files
        $.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/jquery.navgoco.min.js", function() {
            $("#demo1").navgoco({accordion: true});
        });

        $.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/snap.min.js", function() {

            // Snapper settings     
            var snapper = new Snap({
              element: document.getElementById('scroller'),
              disable: 'right',
              maxPosition: 291
            });

            var addEvent = function addEvent(element, eventName, func) {
                if (element.addEventListener) {
                return element.addEventListener(eventName, func, false);
              } else if (element.attachEvent) {
                  return element.attachEvent("on" + eventName, func);
              }
            };

            // Toggle button
            addEvent(document.getElementById('trigger'), 'click', function(){
                if( snapper.state().state=="left" ){
                    snapper.close();
                    $( ".menu-trigger" ).removeClass( "active" );
                } else {
                    snapper.open('left');
                    $( ".menu-trigger" ).addClass( "active" );
                }
            });

            addEvent(document.getElementById('scroller'), 'click', function(){
                if( snapper.state().state=="left" ){
                    $( ".menu-trigger" ).removeClass( "active" );
                }
            });

            /* Prevent Safari opening links when viewing as a Mobile App */
            (function (a, b, c) {
              if(c in b && b[c]) {
                  var d, e = a.location,
                      f = /^(a|html)$/i;
                  a.addEventListener("click", function (a) {
                      d = a.target;
                      while(!f.test(d.nodeName)) d = d.parentNode;
                      "href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
                  }, !1)
              }
            })(document, window.navigator, "standalone");

        });

    } // end if

    fitHeight();

    $(window).scroll(function() {
        $('section').each(function(){
            var id='#'+$(this).attr('id'),
                off=$(id).offset().top,
                hei=$(id).height(),
                winscroll=$(window).scrollTop(),
                dif=hei+off-($(window).height());

           console.log('msj');

            if (winscroll >= off && winscroll<=dif) {
                $(id+' .sticky').removeClass('abs').addClass('fix');
            } else if (winscroll > dif){
                $(id+' .sticky').removeClass('fix').addClass('abs');
            } else {
                $(id+' .sticky').removeClass('fix abs');
            }
        });
     });

});

// Trigger FitHeight on browser resize
$(window).resize(fitHeight);

EDIT

Some bits of the full code (above) refer to other JS files and code returns no errors when run with these files present. After troubleshooting I see the console message before the scroll function but I do not see the console message within the scroll function.

fitHeight();

    console.log('About to bind scroll effects'); // I SEE THIS MESSAGE

    $(window).scroll(function() {

        console.log("scroll bound, now loop through sections"); //BUT NOT THIS ONE

        $('section').each(function(){

rarely some strange error happens and restarting browser helps. — ViliusL, Oct 29 '13 at 15:20
You may have used the filter function in the console which will hide anything that doesn't match your query. Remove the query and your messages will display. — James Barrett, Apr 04 '19 at 11:04

score 124 · Answer 1 · edited Apr 26 '19 at 20:10

124

In my case, all console messages were not showing because I had left a string in the "filter" textbox.

Remove the filter it by clicking the X as shown:

edited Apr 26 '19 at 20:10

Jeff Ward

16,563
6
48
57

answered Mar 01 '19 at 18:25

Andrew Magill

2,254
4
21
28

3

this. fortunately or unfortunately, if once you set a filter on developer console of a tab, the filter will continues to be effective in consecutive tabs and its console. – ー PupSoZeyDe ー Nov 16 '20 at 06:12
7

Facepalm! I typed in something in the filter box few days ago. And it killed 1hr today until I saw this answer. Thanks. – Abinash Dash Sep 06 '21 at 15:56
2

Good heavens! Why does the filter value persist across not just tabs and consoles, but also closed / reopened instances? – Forty3 Sep 21 '22 at 15:31

James Donnelly · Answer 2 · 2013-10-29T15:29:38.680

88

Sounds like you've either hidden JavaScript logs or specified that you only want to see Errors or Warnings. Open Chrome's Developer Tools and go to the Console tab. At the bottom you want to ensure that JavaScript is ticked and also ensure that you have "All", "Logs" or "Debug" selected.

Example Screenshot

In the image above I have JavaScript, Network, Logging, CSS and Other ticked and "All" selected.

Another potential problem could be that your $(window).scroll() function isn't wrapped within a .ready() function (as documented here):

$(document).ready(function() {
    $(window).scroll(function() {
        ...
    });
});

When pasting your code into JSFiddle and giving some dummy content, your code works perfectly fine: JSFiddle demo.

Edit:

The question was edited. The new code given throws two errors:

Uncaught ReferenceError: fitHeight is not defined Uncaught TypeError: Cannot read property 'addEventListener' of null

Because of this, the code stops execution prior to reaching any console.log call.

edited Oct 29 '13 at 15:29

answered Oct 29 '13 at 15:12

James Donnelly

126,410
34
208
218

I thought that but I have everything checked and visible. – egr103 Oct 29 '13 at 15:14
@egr103 please see my modified answer. :) – James Donnelly Oct 29 '13 at 15:15
It's already within a .ready(). Not sure what the hell is going on, I've updated my code in full in my question. – egr103 Oct 29 '13 at 15:23
@egr103 your full code throws two errors: `Uncaught ReferenceError: fitHeight is not defined` and `Uncaught TypeError: Cannot read property 'addEventListener' of null`. – James Donnelly Oct 29 '13 at 15:28
These errors refer to the files that aren't loaded with this code in the question and work fine when present. No errors are seen in the log. If I put a log message before the scroll function and after ther other pieces of unrelated code, the message appears but no messages appear within the scroll function itself – egr103 Oct 29 '13 at 15:37
@egr103 possibly silly question, but are you actually scrolling the page? – James Donnelly Oct 29 '13 at 15:38
In Chrome if you don't have the developer tools opened when loading the site, you won't get any log output. – Darkgaze Nov 07 '16 at 19:39
I just bumped in this question while searching for a similar problem with Firefox developer tools. It turns out that Console.log() does not write in the JS section but in the Logging section. – Alex Perrin Jan 09 '18 at 14:59
In Chrome 91.0.4472.124 the bottom menu in the first part of the answer doesn't exist. – Jul 17 '21 at 01:55
wasted my 2 hours checking the output until I reached here, and turned it 'on' in chrome.. Don't know for what reason I had turned it off earlier!! to confuse my slef! Thanks.. – Irf Mar 01 '22 at 07:14
This question ate my week, and this answer helped me even after 10 years. Thankyou. – Vivek K. Nov 15 '22 at 04:41

score 11 · Answer 3 · edited Aug 30 '20 at 05:51

11

Click on the restore button. console.log will start to work.

enter image description here

edited Aug 30 '20 at 05:51

4b0

21,981
30
95
142

answered Aug 30 '20 at 04:45

bprathapoo

111
1
2

It worked... but... why??? Obviously something out of whack. – Wes Jul 20 '21 at 06:06

score 10 · Accepted Answer · answered Oct 29 '13 at 16:51

I feel a bit stupid on this but let this be a lesson to everyone...Make sure you target the right selector!

Basically the console wasn't logging anything because this particular code snippet was attempting to grab the scrolling area of my window, when in fact my code was setup differently to scroll an entire DIV instead. As soon as I changed:

$(window).scroll(function() {

to this:

$('#scroller').scroll(function() {

The console started logging the correct messages.

score 6 · Answer 5 · answered Nov 02 '21 at 17:59

6

2021 solution

open developer tools
navigate to "console"
most likely "Verbose" is not ticked, so activate it

answered Nov 02 '21 at 17:59

dcts

1,479
15
34

score 4 · Answer 6 · answered Oct 25 '20 at 21:59

4

It was because I had turned off "Logs" in the list of boxes earlier.

answered Oct 25 '20 at 21:59

Adamantus

813
1
12
30

score 3 · Answer 7 · answered Jan 23 '18 at 16:39

In my case I was developing a Polymer WebComponent, which is included using <link rel="import"> into the main HTML document. Turns out that the WebComponent HTML file was being cached for some reason, even though I had changed it since the cached version.

To solve it I opened the Developer Console (in Chrome), right clicked on the reload arrow next to the URL bar and selected "Empty cache and hard reload" - problem solved.

score 3 · Answer 8 · edited Nov 14 '21 at 03:02

3

Somewhere console.log had been overridden in a js file somewhere (that I haven't been able to locate).

But I could test by putting console.log in the console and I only got an empty function: f{}

I added this to the top of my own js file to correct it (absolute hack, but worked for me):

var console = window.console;

edited Nov 14 '21 at 03:02

tdy

36,675
19
86
83

answered Nov 13 '21 at 10:14

louie172

89
1
8

score 1 · Answer 9 · edited Oct 04 '19 at 17:49

1

Just you need to select right option to show the log messages from the option provided in left side under the console tab. You can refer the screen shot.

edited Oct 04 '19 at 17:49

vladwoguer

951
1
14
28

answered Oct 04 '19 at 17:17

Sandeep Singh

11
2

score 1 · Answer 10 · answered Jun 26 '20 at 07:17

I just had a same issue of none of my console message showing. It was simply because I was using the new Edge (Chromium based) browser on Windows 10. It does not show my console messages whereas Chrome does. I guessed it was an issue with Edge because I had another odd issue with Edge because it treated strings with single quotes and double quotes differently.

score 0 · Answer 11 · answered Oct 29 '13 at 15:26

0

Consider a more pragmatic approach to the question of "doing it correctly".

console.log("about to bind scroll fx");

$(window).scroll(function() {

       console.log("scroll bound, loop through div's");

       $('div').each(function(){

If both of those logs output correctly, then its likely the problem exists in your var declaration. To debug that, consider breaking it out into several lines:

var id='#'+$(this).attr('id');

console.log(id);

var off=$(id).offset().top;
var hei=$(id).height();
var winscroll=$(window).scrollTop();
var dif=hei+off-($(window).height());

By doing this, at least during debugging, you may find that the var id is undefined, causing errors throughout the rest of the code. Is it possible some of your div tags do not have id's?

answered Oct 29 '13 at 15:26

shanabus

12,989
6
52
78

woah, you just added a lot more code samples... this answer may be invalid. – shanabus Oct 29 '13 at 15:27
Thanks. Well, the line: console.log("about to bind scroll fx"); is outputted but the other log message doesn't output. What does this mean? – egr103 Oct 29 '13 at 15:30
That likely indicates you haven't scrolled or its not firing the scroll function. do you get other javascript errors? – shanabus Oct 29 '13 at 18:29

score 0 · Answer 12 · answered May 05 '20 at 23:10

0

As a complete new at javascript, I just had the same problem on my side here. The mistake I did, was that I used:

<script type="text.javascript">
  console.log("bla bla bla");
</script>

instead of:

<script>
  console.log("bla bla bla");
</script>

using the

type="text.javascript"

had the result of not producing the log in the console.

answered May 05 '20 at 23:10

ilival

32
4

please make it correct – Haseeb Tariq Dec 30 '21 at 10:00

Klesun · Answer 13 · 2020-09-12T16:57:36.527

0

In my case it was caused by console.groupCollapsed().

And collapsed messages don't get detected by ctrl+f apparently.

Maintaining unfamiliar code is scary sometimes...

It even collapsed the exception message, absence of which made me put those console.logs in the first place ^_^

edited Sep 12 '20 at 16:57

answered Sep 12 '20 at 16:52

Klesun

12,280
5
59
52

score 0 · Answer 14 · edited Sep 03 '21 at 12:15

0

if using $ parameter in console.log within html, then single quotes(') and double quotes("") will not work.

use quotes like (` `)

example: console.log(`${address}`);

This will help when using the $ parameter and anyone facing issues in console.log.

edited Sep 03 '21 at 12:15

Lyndon

183
3
14

answered May 01 '21 at 00:06

Avneet

393
4
15

Console.log doesn't work, devtools console shows no errors

14 Answers14

Edit:

2021 solution

Linked

Related