Only jquery console.log statement is not working in AEM. Other lines of code executes well. Is there a way to debug this issue?

[BinaryAlchemy11]

Is there a way to debug the following code where the line for the console.log doesn't log the message "Test message" in console? But the next line alert("Test Alert") works fine.

$(document).ready(function() {

         console.log("Test message");

         alert("Test Alert");

});

One more thing to notice is in below code, "0000" is printed in output but not "99":

<script>
$(document).ready(function(){
          console.log("99");
});
console.log("0000");
</script>

I have tried changing the version of the jquery CDN link to the previous versions and am still facing the same issue.

Using this version of jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

[PRATHYUSHA_VP]

Hi @BinaryAlchemy11 

The above code snippet should work as expected. If the jquery library is loaded console.log will print the statement. 

Try to debug from the developer console in chrome and check the statement is passing through. If there's any error please post the screenshot

Hope this helps

Thanks

[BinaryAlchemy11]

Hi @PRATHYUSHA_VP ,

I have the jquery library loaded as well:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Also, have tried debug in developer console. It does go through the console.log line however it does't print the output in console.

Best Regards,

Anish

[PRATHYUSHA_VP]

As per above update in QnA where in you have observed 0000 is printed but not 99 ,

that means document is not ready when you're trying to print this statement. 

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate

<script>
$(document).ready(function(){
          console.log("99");
});
console.log("0000");
</script>

Please find relevant explanation over here, also try to display console when DOM is loaded, we can find root cause of it 

https://api.jquery.com/ready/

Hope this helps

Thanks

[BinaryAlchemy11]

Is there any other way to confirm this is the issue case? 

-Anish

[Rajumuddana]

Hi @BinaryAlchemy11 ,

as @PRATHYUSHA_VP mentioned below you shall try pudding a debug point in the browser console (F12) and debug your JS file, 

FYI -

Thanks,

Raju.

[BinaryAlchemy11]

Yes I have tried doing so and the it goes through the line for console.log but doesn't print output.

-Anish

[Tethich]

Hi @BinaryAlchemy11 

There is a chance that somewhere in your code, maybe another clientlib, to have a line like the one below, that disables all console.log outputs:

console.log = function() {}

Worth checking this out as well.

[BinaryAlchemy11]

@Tethich:

I was thinking the same as well. Was thinking something might have disabled the console.log part on the site. However, I am unable to find any console.log = function() {} in the clientlibs used.

Is there any other js code that could have possible disabled the console.log?

-Anish

[EstebanBustamante]

Hi, 

If you are using Chrome, make sure you have set it up to display all the log statements in the browser console. If this is a testing environment you can always add the "debugger;" statement to stop the execution of the JS and see what's going on with the console statement.

Hope this helps

[BinaryAlchemy11]

Just checked and it is selected to display all logs. Have tried using debugger and the line right after it executes but not the console.log despite going through it.

-Anish

[h_kataria]

Hi @BinaryAlchemy11 
Could you check if "info" is unselected by any chance for log level in your developer console. It should be selected. 

[BinaryAlchemy11]

This section for Default Levels is greyed out for me.

-Anish

[h_kataria]

Do you see any other errors on your console ? My assumption would be your code executes before your jquery is loaded on the page. 

[BinaryAlchemy11]

Is there a way to debug that the code executes before jquery is loaded?

Also, the only errors I see is one with 404 on an html page (not relevant to this looks like completely separate page) and 403 error

One thing that I noticed in debugger mode is that the console.log line outside of the .ready() seems to execute first then the code inside the ready() is processed (but without output):

<script>
$(document).ready(function(){
          console.log("99");  ===> This line runs after the console.log("0000") below
});
console.log("0000"); ===> This line runs first in debugger mode
</script>

With the scenario above, it looks like the code is waiting for the jquery to be loaded and processing after being loaded.

Please do let me know if you think otherwise.

[h_kataria]

if your console.log("99") statement is executing without any errors, then I don't think it could be a loading order issue, otherwise you might have seen some error like $ is not defined.
Based on whatever inputs you have provided, I frankly don't see any issue on why it will not work. 
Few things I can suggest:
Change console.log to alert('Whatever')
If above works then most probably document ready does not have any issue.
Then while debugging, when debugger is paused at console.log("99") statement, before executing that, go to your console and just type in console.log. It should show something like,

If you see something else, then probably some modification might be happening in the time when your page starts to load and before your DOM gets ready. In that case you can just double click on it to check where the culprit is. 
Hope this helps.

[BinaryAlchemy11]

Debugging the way you have recommended. This is the result:

Looks like the console log that outputs have "f log() {{native code}}" in there however the one that doesn't have output have "f () {{native code}}" in there. Looks like somehow the log is not executed. 

In debug mode:

log that prints output:

log that doesn't print output:

  

[h_kataria]

It seems some function binding is taking place to your console.log by the time your DOM gets ready. You should be able to double click your f () {{native code}} during debugging and it should ideally take you to the file where new function is defined and can check within your team to the person responsible for it to understand it better.

[BinaryAlchemy11]

Can you provide screenshot on what you are referring to? I tried double clicking on f() {{native code}} and it doesn't take anywhere.

[BinaryAlchemy11]

Was finally able to solve the issue. Had to use process of elimination to find out what was causing the issue. 

The issue was with the use of "context='unsafe'" and was resolved after changing to "context='html'".

[kautuk_sahni]

@BinaryAlchemy11 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!