Where is the console output on the new CodeSandbox Cloud Web Editor?

Question

After hitting this link to upgrade a CodeSandbox to the new CloudSandbox Web Editor

I can no longer find the highly useful "Console" and "Problems" windows:

Where did they go?

EDIT:

It seems that this feature is really gone and the only way to see console logs is now to open the browser inspector. If anybody from CodeSandbox is out there listening: this sucks! I've never not wanted to use console.log in a CodeSandbox, but now instead of showing that output conveniently right where I want it, in a small window that doesn't take up much space, I have to clutter up my screen layout with the full browser inspector open. This was perfect before the change -- change it back!

Hoff

right next to the devbox URL, the third icon button ( preview console ), is what you're looking for. – Petrify

Answer 1

The third icon button ( preview console ), is what you're looking for.

Petrify

I don't see it (at least on this link codesandbox.io/p/sandbox/headless-wind-tr1ns) – Mauchi

@Mauchi it's strange. I opened your link and it was exactly there. – Petrify

Also it works only in Chrome. Not in Safari. – Cocke

Be sure the preview is working, otherwise these buttons are hidden – Bulldoze

Answer 2

Console.log are printed in your browsers Devtools console tab. You can open it pressing F12.

Semiconductor

Answer 3

In preview tab, if you hover over the third button from the left or second from the right, you'll see the label "preview console". Press on it and on the bottom the devTools window will pop up. Next, press on the console tab.

Preview

Answer 4

Click on the this icon:

It will open the console:

Chewy

Answer 5

You can open the web viewer to new tab, and then you can inspect the web page.

First, click Dock controls

and then click this icon at url bar

Nothing

Answer 6

It's under DevTools but it's easy to miss cause it's been renamed dev:logs

There's a few ways to open it. From their DevTools documentation:

1. Clicking on the + sign on the right side of any tabbed panel. This presents a list of available DevTools—and clicking on any DevTool will open it in the current tab.
2. Double-clicking anywhere between the tabs and the + button.
3. Pressing Cmd/Ctrl + Shift + S.

Stigmatic

dev:logs shows me the server logs (i.e., the terminal output) -- it does not show me the browser console log (i.e., what I get with console.log in the code itself). – Hoff

Answer 7

1. press the button that is called "Preview Console", which is the 2nd last button.
2. this will open the dev tools like in the browser.
3. then click on "console".
4. here you can see the console output.

// I agree that this is a downgrade from the previous version :p

Chamade

Answer 8

It is at the bottom of the preview page. Here you can see:

Bushire