Snippet: Give your mobile users access to devtools without having it publicly available

The Gallery
#1

For some reason, there was some code that wasn’t working for my phone. I of course, added eruda to the site, but some people found it annoying. A dev tools visible on a production site? What?! So I made this snippet to allow me to use devtools by adding ?devtools

var params = new URLSearchParams(window.location.search);
if (typeof params.get("devtools") == "string") {
  window.addEventListener("DOMContentLoaded", (event) => {
    var script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/eruda";
    document.body.appendChild(script);
    script.onload = function () {
      eruda.init();
    };
  });
}

Also, I didn’t wanna make a full project so I wanted to make a “snippet” type of thing (idea from @keithk)

1 Like
#2

Do you have a demo site?

#3

RocketPad (this isn’t the site I was talking about)

#4

Eruda’s really cool, I’ve used its sister tool Chii.

1 Like
#5

So for those wondering, you can make it into a bookmarklet by making a bookmark and putting javascript: before pasting this script.

1 Like
#6

Yeah, but it does not seem to work on some browsers, weird.

#7

Also, I didn’t wanna make a full project so I wanted to make a “snippet” type of thing (idea from @keithk)

Screenshot 2021-01-25 at 9.40.56 AM
Screenshot 2021-01-25 at 9.40.56 AM1366×768 46 KB

#8

That’s just glitch’s parser not knowing what hlobal vars there are. You can safely ignore it, or add /* global eruda */ to the top of the file to stop it from thinking it’s an error.

1 Like
#9

Some browsers have a stricter url length policy, maybe it’s to discourage putting too much tracking data

2 Likes