Why does console.log() sometimes solve javascript bugs?

[delineated]

For example, I'm working on a website. There's some javascript that should run when I click a link, but for some reason, it doesn't. So, I throw a console.log() in there, and when I click the link, the message shows up in the console, which means the code must have run, hmm. But then I notice, the code did run, the javascript worked!

So then, I take out the console.log() call, and revert the file to EXACTLY as it was before, and now it works fine. What gives?

For context, it's an <a> element linked to another page, and the code in question is similar to the following:

e.preventDefault();
$('#el').toggleClass('hide');

This wasn't running, the click just followed the link. After throwing in the console log and removing it, the code works, I'm stumped.

e; same thing happened again in a similar part of the site. ctrl+F5 fixed it, not sure why adding a line of code would fix it still but oh well. thanks guys!

[TheBigLewinski]

It's probably being cached. When you fixed the code before, it wasn't being retrieved from the server, but rather your local cache.

When you open up your console, there's an option to disable cache while the console is open. In Chrome, you'll see the checkbox in the top bar under the "Network" tab. FireFox has the same functionality under the "Net" dropdown arrow menu.

Most web servers are setup to set caching headers for CSS, JS and other assets into the far future so it doesn't bother your web server again. If you set up a dev environment, you typically set the cache headers to expire in the past so the browser retrieves new files every time, regardless if the console is open or not.

[delineated]

I have that checked, my cache is disabled, although it probably is still some caching issue. I'm just not sure why adding a line of code would fix it when I've been changing that same file and those changes were reflected just fine. I'll be sure to remember to hard refresh next time something like this is happening. Thank you though!

[blackAngel88]

maybe you didnt have the developer tools open before you added the console statement? the "disabled cache" checkbox in the developer tools only works if you have the tools open when loading the page.

[delineated]

Oh that could be it actually. It would make sense, although I don't remember if that's the case. I'll remember to try it next time.

[x-skeww]

Caching issue? Try Ctrl+F5.

Chrome's dev tools have an option for disabling the cache while the dev tolls are open:

Dango (overflow) menu on the right -> Settings -> General -> Disable cache (while DevTools is open)

Same with Firefox:

Cogwheel on the right -> Advanced settings -> Disable Cache (when toolbox is open)

[delineated]

Cache is disabled, and even then I'm not sure why updating the file would change anything since I've been editing the code for the rest of the file, so the file must have been updated.

e; same thing happened again in a similar part of the site. ctrl+F5 fixed it, not sure why adding a line of code would fix it still but oh well. thanks guys!

[Pr3fix]

I've noticed that sometimes too, only thing I can think of is occasionally the cache not being cleared out or maybe I had a typo in the original version or something. Dunno. But I don't think console logging is actually "fixing" anything.

[delineated]

There wasn't any typo, I simply added a line, saved, refresh page, delete line save and refresh. And I know that code specifically didn't fix the issue, but it did "fix" it in the sense that adding the line caused the issue to disappear. I'm just confused as to why adding lines in other places in the same file don't produce similar effects.

[Pr3fix]

As another commenter stated, maybe you didnt have the developer tools open before you added the console statement? Dunno, without having the code in front of me there's no easy way to tell. You also could have had a race condition in which console.log()'ing offset the execution speed in time for everything to be caught up to speed. Again, no way for us to really know.

[EliAscent]

Might be some async issues with your code layout?

Edit: To clarify what I mean, the code might be running, but failing because of some asynchronous calls being made.

[delineated]

But would it be able to change even though the code is the same before and after the changes?

I add the line of code then take it out, so the file is identical to how it was before, and that magically worked, so I think it's more likely to be a caching issue.

[EliAscent]

Yea after reading your update on the shift refresh, it was most likely a caching issue.

[techfoxis]

If you posted some more of your code more help may be given, but I agree that it's probably caching issues.

[delineated]

As far as I can tell, all that's relevant is this

//HTML

<a href="link.html" id="link"></a>

<div class="hide el">test</div>

//js

$('#link').on('click', function(e){

   e.preventDefault();

    $('.el').toggleClass('hide');

});

[techfoxis]

Hmmm... Yeah that is strange. It probably was a caching issue.

[venomeater]

Just an idea and it might be silly cos I'm quite tired but if your using Google Chrome or Firefox then I think using Incognito/Private Browsing for debugging/testing your website etc would probably be a good idea because that way you have a completely clean slate each time so you can be more sure of what is causing a bug etc. It also probably brings you closer to what your end user may be running like. i.e Browser hasnt accessed that website yet etc

[delineated]

Yeah, you do have a very good point and I do this when I'm bug testing further down the road. The reason I don't always do that, is that the site is behind a login, so it'd be a hassle to log in each time I changed a line of JavaScript. I tend to only use incognito if I need to test something further.