javascriptreactjsreact-nativeace-editorreact-native-webview

how to implement console log in html ace-editor in react native webview

I am implementing ace editor in react native webview. I have redefined console log to show console log in html. As you can see in the image. I am implemented function to clear console logs and execute function to show the logs. editor The problem is that when I make changes in the ace editor then it show only last console log.

console log screenshot console log

How can I see all logs when I make changes in the ace editor tab. What I am doing wrong,

expo snack: https://snack.expo.dev/@alihaxan/maxdal-april

Thanks, Ali

Solution

  • Start your android simulator or device and run the application. If you are on a physical device, shake it. On the emulator, click and press [Ctrl]+[M]. Click the second option, Debug JS Remotely. enter image description here

    This will open up a web browser pointing to localhost:8081/debugger-ui. If Chrome is not your default browser, open the URL with Chrome. This may work with Chromium browsers but I’m not sure.

    enter image description here

    In Chrome, open a new tab and navigate to chrome://inspect/#devices. In the Simulator or Device, navigate to the screen with the WebView and navigate to a URL. Under devices WebView should appear, click on inspect.

    enter image description here

    This will bring up a new window for the DevTools showing a preview of the WebView. You can’t interact with it, but you can interact with the simulator or emulator. This will bring up the console panel and from there you can see console logs from the WebView.