Cannot find log data via Forge UI KIT in the Chrome browser console

Forge
, ,
1

Good day everyone, Am Trying out Hello World app for Forge UI Kit with the code below.

When I run the code via Forge Deploy, it displays the Hello World but nothing is showed in the Chrome Browser console.

I have check this code at Chrome Browser Web Developer Console but I cannot find it there

console.log(Your are welcome: ${name})

Please is there any other settings that in the Chrome Browser that I should set.
I need to see my console.log() data.

Thanks

Below is the code

import api, { route } from "@forge/api";
import ForgeUI, { render, Fragment, Text, IssuePanel,Button, ButtonSet, useProductContext, useState, Component, useEffect} from "@forge/ui";

import { storage} from '@forge/api';

const App = () => {
 

 const name='Tony More';
 console.log(`Your are welcome: ${name}`);
	  
  return (
    <Fragment>
	
     <Text> Hello World</Text>
	  
  </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);
2

This is not rendered client side, so you won’t see it.

Try Custom UI if you want to see client side console.log messages.

1 Like
3

please Sir @david how do I run or try Custom UI . Any Tutorial or installations on it. Am new to all Atlassian Stuff. Please can you help me out. am using using windows 7 Operating System

Between thanks for the response so far.

4

Take a look here:
https://developer.atlassian.com/platform/forge/custom-ui/

5

Hi @EsedoFredrick,

You shouldn’t need to use Custom UI here.

I answered the same question you asked here: How to show or display store record from Storage API via forge UI Kit - #5 by EsedoFredrick

You can’t see UI kit logs in the Chrome browser dev tools.

In your above example, you can either run leverage Forge tunnel or logs to see the console output.

If you want the output to show on screen, you can just show it as text like the following:

const App = () => {
 const name='Tony More';
 
  return (
    <Fragment>
     <Text>{`Your are welcome: ${name}`}</Text>
  </Fragment>
  );
};