Console and Developer Tools is confusing

Problem description:
When developers are working on a react app, they always try to look for console.log’s in the Console tab, not knowing that there is a ‘Developer Tools’ wrench icon where they are supposed to dig. This is quite annoying and sometimes takes a long time for them to figure out where that is.

Expected behavior:
Display a message in the ‘Console’ asking the use to open ‘Developer tools’ to view console logs. And add a shortcut in Console to the Developer tools.

Actual behavior:
Developers are lost

Steps to reproduce:

Bug appears at this link:
Create a new Repl for React app

Browser/OS/Device:

2 Likes

What you are asking for is a change to React. This is nothing to do with Replit. The way it works is if the console.log is in a function that is sent to the user, e.g, a component, the log is in dev tools. Otherwise, it is in the console when the code runs on the server.

1 Like

No. Am just asking a UX change. Better message in Console. You currently do show a pop up on first login pointing to developer tools, but most users just close it. And when its time to use it, they are wondering where their console.log’s went.

Developers by default assume that the console.logs will show in the Console tab. Atleast new developers are unable to figure out where to find those. I have seen this issue umpteened time during my interviews.

2 Likes

Again, that’s just because they’re developing something that runs on the client. This is simple to understand, even for new devs. And, they shouldn’t be jumping in without enough knowledge of the tools they’re using.

1 Like

I think you’re misunderstanding their request. I believe what they want is for HTML Repls’ logs to show up in the console tab.

1 Like

But that’s just silly. Then you don’t know if it’s being logged by the server or cleint.

2 Likes

Well then there should be a different pane called DevTools.

1 Like

There is a dev tools section… It’s inside of the webview

2 Likes

I meant for it to be a separate window apart from the webview.

1 Like

No, that’s a bad idea. The Dev Tools should be a part of the webview so that the user can use the Inspect functionality inside of the web view without requiring another pane/tab.

1 Like