Console.log not working at all
Solution 1
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.
Solution 2
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:
Solution 3
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.
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.
Solution 4
Click on the restore button. console.log
will start to work.
Solution 5
It was because I had turned off "Logs" in the list of boxes earlier.
Related videos on Youtube
egr103
Updated on November 14, 2021Comments
-
egr103 over 2 years
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(){
-
ViliusL over 10 yearsrarely some strange error happens and restarting browser helps.
-
egr103 over 10 years@ViliusL I wish it were that simple
-
James Barrett about 5 yearsYou 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.
-
-
egr103 over 10 yearsI thought that but I have everything checked and visible.
-
James Donnelly over 10 years@egr103 please see my modified answer. :)
-
egr103 over 10 yearsIt's already within a .ready(). Not sure what the hell is going on, I've updated my code in full in my question.
-
shanabus over 10 yearswoah, you just added a lot more code samples... this answer may be invalid.
-
James Donnelly over 10 years@egr103 your full code throws two errors:
Uncaught ReferenceError: fitHeight is not defined
andUncaught TypeError: Cannot read property 'addEventListener' of null
. -
egr103 over 10 yearsThanks. 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 over 10 yearsThese 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
-
James Donnelly over 10 years@egr103 possibly silly question, but are you actually scrolling the page?
-
shanabus over 10 yearsThat likely indicates you haven't scrolled or its not firing the scroll function. do you get other javascript errors?
-
Darkgaze over 7 yearsIn Chrome if you don't have the developer tools opened when loading the site, you won't get any log output.
-
Alex Perrin over 6 yearsI 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.
-
ー PupSoZeyDe ー over 3 yearsthis. 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.
-
Montana Burr almost 3 yearsIn Chrome 91.0.4472.124 the bottom menu in the first part of the answer doesn't exist.
-
Wes almost 3 yearsIt worked... but... why??? Obviously something out of whack.
-
Abinash Dash almost 3 yearsFacepalm! I typed in something in the filter box few days ago. And it killed 1hr today until I saw this answer. Thanks.
-
Shawn Xu over 2 yearsThanks, this solved my problem in an unexpected way.
-
Haseeb Tariq over 2 yearsplease make it correct <script type="text/javascript">
-
Irf over 2 yearswasted 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..
-
Reiko Dev about 2 yearsOh god, why in the heck there is some default String to search on the search box?? Ty bro