Console Overlaps Webview

I am making P5.js Javascript games and other similar projects with my students. When we toggle on and off the developer tools, the developer tools themselves overlap the webview. We therefore can not use the console for debugging things that appear in the bottom part of our screen as they are covered up by the console.

Is there someway to reduce the height of the console and/or undock it from the rest of the webview and/or force it to be below entire webview with a scroll bar? We can move the entire webview but it takes the console along with it.

1 Like

Hi @Scouprie, I understand what your issue is. Unfortunately, there is no way to stop the developer tools from overlapping the webview as far as I know.

You can, however, change the transparency of the devtools panel by clicking ‘settings’ on the devtools, then ‘transparency’ and set your desired value.

If this doesn’t work for you or your students, you can open your website in a new tab and use your browser’s developer tools.

1 Like

Hi @Scouprie , welcome to the forums!
You can get your student to open the website in a new tab, and use Developer’s tools from there.
Hope this helps!

1 Like

If you want to stay in the same window, you could try right-clicking on the webview, pressing Inspect, and then you will have different-looking DevTools, but you can drag around the window and you don’t have to use the Replit one. (Unless Inspect Element is blocked at your school, but you can try it)

Unfortunately, the developer tools are unavailable at our school. There is a work around but a within Replit solution would be much better.


You could try making a new topic in Feature Requests if you want. Other than that, there’s not really another way