Inspector Tool for Schools

Background

In a nutshell I teach web design at a rural high school via Replit.com where students have 1-to-1 devices, aka school-managed Chromebooks. These Chromebooks have the inspect tool blocked so that students can't change and alter code in fears of students having interest in hacking, etc. Therefore, in class we cannot use the tool!

I recorded a video with Screencastify to explain this idea (originally to help a friend to help explain my idea): [https://drive.google.com/file/d/16RxvYDJBpbLLVO_PS2k6qtmcCntgGUtu/view]

I got cut off at the end but what I meant to say is I think this could be a great educational tool that could be easily monetize to sell to any district or school in the United States and around the world, where students cannot use the inspector.

The same friend helped me port over the original inspiration but it lacks full inspection (HTML, CSS, and JS):

[[https://gist.github.com/hhff/94419ef200dafe9713c68cfd673f40da]

In order to enable X-Ray Goggles on a Replit Project (or any type of website), simply add the following script before the closing </body> tag (or in the <head>, it doesn't actually matter where).

Script

<script src="[https://x-ray-goggles.mouse.org/webxray.js](https://x-ray-goggles.mouse.org/webxray.js)" class="webxray" data-lang="en-US" data-baseuri="[https://x-ray-goggles.mouse.org](https://x-ray-goggles.mouse.org/)"></script>

Example

<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body>  
<h1>Hover me to see X-Ray Goggles working</h1>  
  
<!-- To disable X-Ray Goggles, comment out this script -->  
<script src="[https://x-ray-goggles.mouse.org/webxray.js](https://x-ray-goggles.mouse.org/webxray.js)" class="webxray" data-lang="en-US" data-baseuri="[https://x-ray-goggles.mouse.org](https://x-ray-goggles.mouse.org/)"></script>  
</body>  
</html>

Example Replit.com Project

See here: https://replit.com/@hhff/XRayGogglesExample#index.html

Name Ideas: https://www.thesaurus.com/browse/inspect