Where is the StackBlitz console?

Question

At the end of the Angular's "Getting started/try it/using forms for user inputs", we are asked at the end to "open the console to see an object containing the name and address you submitted.". But I only have a terminal where the app is running, and a classic terminal at my disposal.

Where is the console which shows the log of (in cart.component.ts line 28):

console.warn('Your order has been submitted', this.checkoutForm.value);

It's not in the inspect page.

[Edit]

To me it's not at the bottom of the page as Robert proposed. Maybe there's a console option to enable somewhere?

Calabresi

Answer 1

When you use the "ready-made sample project in StackBlitz" from Angular "try it/Getting started", it doesn't have a console.

The console is present as Roberts screen shows when you create a new project from StackBlitz.

Calabresi

Answer 2

I experienced the same thing, where the forked "Getting Started" Angular project on StackBlitz didn't show a console option. To see a console I clicked "open in new tab" in the top right, and then I used the browser console (e.g. to see Chrome's console right click on the output page and select 'Inspect', then click on the 'Console' tab).

View open in new tab button location

View example chrome console;

Soursop

That is so annoying, I don't want it in a new tab, I want it in the same view like it used to be. – Mcsweeney

Answer 3

It should be at the bottom of the page:

Update If you happend to use Vite etc. WebContainers then open the DevTools (F12):

Omaomaha

Ignore downvote, which browser you use? have you tried to reload the whole page? try to start a brand new project is it there? – Omaomaha

How did you get the terminal? – Unreal

@Unreal press F12 – Omaomaha

That is an old screen shot. The Console is no longer available to new stackblitz projects. You can use chrome developer tools, but the convenience of having it below the preview is no longer an option that I can find – Parvis

@Parvis this was posted in 2022, but you can still open the devtools and see the console output there – Omaomaha

Answer 4

As a workaround you could use alert:

alert(this.checkoutForm.value.address);

The alert method displays a popup box with whatever message you pass it. More info here

Manichaeism

Answer 5

Opening your browser console is one option, but then you end up with all the output from the entire page, which can make it frustrating to read and also affects the speed of the output. This is something the old inline console helped avoid.

A solution to this is to click the second from right button in the preview pane to 'Open preview in new tab'.

Once opened, open the console in the new tab and you'll only see the output from your code.

Lumbricalis