Help With Chrome Developer Tools?

1

Hi, I’m having an issue where my browser’s developer tools isn’t output-ing console.log messages or showing returns from functions. I’ve attached a picture in the hopes that someone has experienced similar before and can point me in the right direction.

ChromeDevToolsIssue
ChromeDevToolsIssue1920×1080 499 KB

Specifics:
Windows 10 Pro;
Google Chrome is up to date Version 76.0.3809.132 (Official Build) (64-bit);
Filter is set to “All Levels” (As seen in picture)

Does anyone know what’s up on this?

I’m brand new to trying to use the Chrome Dev tools. Everything up to this point has been either theoretical, coded in CodePen.io or in visual studio. Thanks in advance.

2

The problem is how you are running the code. You have loaded the JavaScript file in Chrome. That just displays the code in the browser as text. It does not execute the JavaScript code.

If you want to see the logs in Chrome, create a HTML file that loads your ‘testfunctions.js’ script. Open the HTML file in Chrome and view the Chrome console again.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Print Console Logs</title>
</head>
<body>

</body>
<script src="testfunctions.js"></script>
</html>

Also, you can run the code directly in Visual Studio Code. In your Powershell terminal session type: node ./testfunctions.js

Node.js will run the code and print the logs in your terminal.

3

Thank you so much! I really appreciate it.

1 Like