☰

Mobile Element Inspector

Adds a button to inspect elements on mobile browsers.

  1. // ==UserScript==
  2. // @name         Mobile Element Inspector
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Adds a button to inspect elements on mobile browsers.
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     function inspectElement(event) {
  15.         event.preventDefault(); // Prevent default click behavior
  16.         event.stopPropagation(); // Stop event bubbling
  17.  
  18.         let target = event.target;
  19.         let elementInfo = "";
  20.  
  21.         elementInfo += "Tag: " + target.tagName + "\n";
  22.         elementInfo += "ID: " + target.id + "\n";
  23.         elementInfo += "Class: " + target.className + "\n";
  24.         elementInfo += "Attributes: " + JSON.stringify(target.attributes) + "\n";
  25.         elementInfo += "Style: " + target.style.cssText + "\n";
  26.  
  27.         alert(elementInfo);
  28.     }
  29.  
  30.     function createInspectorButton() {
  31.         let button = document.createElement('button');
  32.         button.textContent = 'Inspect Element';
  33.         button.style.position = 'fixed';
  34.         button.style.bottom = '20px';
  35.         button.style.left = '20px';
  36.         button.style.zIndex = '1000';
  37.         button.style.backgroundColor = '#4CAF50';
  38.         button.style.color = 'white';
  39.         button.style.padding = '10px 15px';
  40.         button.style.border = 'none';
  41.         button.style.borderRadius = '5px';
  42.         button.style.cursor = 'pointer';
  43.  
  44.         button.addEventListener('click', function() {
  45.             alert("Tap on the element you wish to inspect.");
  46.             document.addEventListener('touchstart', inspectElement, { once: true, capture: true }); // Use touchstart for mobile
  47.             document.addEventListener('click', inspectElement, { once: true, capture: true }); //use click for desktop testing
  48.         });
  49.  
  50.         document.body.appendChild(button);
  51.     }
  52.  
  53.     createInspectorButton();
  54.  
  55. })();