How to get Webview devtools to stay even when the program is run?

Replit Help
1

Hi @SnakeByte
Yeah, I do it similarly. However, once I click the run button, the console panel vanishes once more. To restore it, we have to click the spanner icon again.

So, is there a way, to pin the console panel so that it stays down there and we don’t need to bring it back again and again manually ?

1 Like
2

AFAIK, there is no way to do this right now. You could make a Feature Requests, though

4 Likes
3

For a temporary solution you could write some quick JS that, when the Run button is pressed, also click the devtools button. If you need it I can whip that up for you…

2 Likes
4

Yeah, it will be very helpful

2 Likes
5

I gotchu bro, just give me a few mins

1 Like
6

Try this out:

xjavascript:(function(){document.querySelector("#__next").children[0].children[1].children[1].children[0].children[1].children[0].addEventListener('click', () => {setTimeout(function(){document.querySelector('button[aria-label="Toggle developer tools"]').click()},3000)})})()

Just paste it into your address bar on the Replit editor webpage, remove the x, and hit enter. It will make it so that when you click Run, it will wait 3 seconds after you click it and then open the devtools.

2 Likes
8

Sorry, where I need to paste that ?

9

I have done like this, and got the following outcome -

And here, I manually clicked the devtools icon to get the console panel.

image
image1621×851 61 KB

10

(did boston edit his post? I don’t remember seeing that when replying)

1 Like
11

Hi @Rituraj-13, this is expected behaviour and like @QwertyQwerty88 said, there is no way to keep the console panel visible after pressing run. However for a temporary fix, you can either do what @boston2029 said, or copy the URL of your repl and open it in a new tab in your browser. And then from their you can access the browser’s devtools panel.

2 Likes
12

You paste it in the URL bar at the very top of your browser. (Assuming you are on a computer) If you’re in fullscreen mode, you’ll need to move your mouse to the very top of the screen for it to pop up. Then you can paste the code, remove the x, and hit Enter. You will have to run that each time you open the editor though, so to make a bookmark that does it, you can follow these steps:

  1. Paste the code in the URL bar and remove the x as usual, but DON’T click Enter this time.
  2. Instead, make sure your bookmark bar is open (using Control/Command + Shift + B)
  3. Drag the code into anywhere in your bookmark bar.
  4. It should show up there, and you just click it each time you enter the editor and want the auto devtools functionality
3 Likes
13

Doesn’t automatically pop up on Chrome, but an X pops up so you can exit full screen mode.

3 Likes
14

Okay, I got it now. Thanks :+1:

Btw, are you on LinkedIn ? We can connect there :grinning:

1 Like
15

No, but I’m on email or Discord or if you have another platform I can check if I have it

1 Like
16

Discord is good :+1:.
Here is my username - rituraj_13 (You can send me request here) or dropdown your’s username, I will send you a request. :+1:

1 Like
17

Alright, mine is cyclSdis

18

I just had the same problem. This seems to be a pretty important basic need. To constantly have to click the spanner to get the console back is frustrating while debugging. This was not the behaviour with Replit in the past. The console should stay visible as a floating window.