I Made a Mobile Dev Tool Bookmarklet (Inspired by Eruda!)

Beginner-friendly, no app install needed — just tap and inspect!

As someone learning web development, mostly on a mobile device 📱, I constantly faced a challenge: "How do I debug and inspect web pages without a PC?" I needed something akin to the powerful in-browser developer tools found on desktops, but built for mobile!

Initially, I explored **Eruda**, a cool mobile Dev Tool console. It was great for viewing logs, but I quickly realized it lacked the ability to easily edit elements or test layout changes in the way I needed. 🤔

That's when I challenged myself — with a little help from AI 🤖 — to build my own mobile dev tool. My goal was a simple, beginner-friendly tool that would allow me to edit HTML directly on the page, inject CSS, remove or duplicate elements, and experiment with web pages right from my phone. It turned into a fun and incredibly useful project that deepened my understanding of web development!

---

🧪 Introducing: My Own Mobile Dev Tool

It's a compact tool (actually a bookmarklet) similar to Eruda. You can simply tap it in your mobile browser to open a mini developer panel — no apps, no extensions, just pure JavaScript magic ✨

---

🛠️ What It Can Do:

• ✅ View console.log, error, and warn messages (perfect for JavaScript debugging)
• ✅ Tap any element to inspect it and quickly edit its HTML, ID, or class attributes
• ✅ Inject custom CSS on the fly to test style changes instantly
• ✅ Run JavaScript directly within the current page's context
• ✅ View and manage data in localStorage and sessionStorage
• ✅ Toggle a special page editing mode that makes any content on the page editable

All of these powerful features run seamlessly inside the page itself, making it fully mobile-friendly and incredibly intuitive to use!

---

❓Wait... What's a Bookmarklet?

Simply put, a **bookmarklet** is a bookmark that executes JavaScript code instead of navigating to a new URL. You save it just like a regular bookmark. Then, when you're on any webpage and want to use the tool, you just tap its name in your browser's address bar or bookmark list. It will activate the dev panel directly on the page you're viewing.

No lengthy installs. No complicated setup. Just tap and go. 🔥

---

📲 How to Set It Up on Your Phone:

Getting this mobile dev tool ready for action on your device is straightforward:

🌐 For Chrome Browser:

1. Open Chrome and visit any website.
2. Tap the **three-dot menu** (usually in the top or bottom right corner).
3. Tap the **star icon** to bookmark the current page.
4. Immediately after bookmarking, tap **Edit** on the pop-up (or navigate to your bookmarks, find the newly created one, and tap the three-dot menu next to it, then choose "Edit").
5. Change the **Name** of the bookmark to: Mobile Dev Tool
6. Delete the existing URL and replace it with:
   javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/gh/jsn01000111/jsn01000111.github.io@main/mobile-inspect/dev-tool/script.js';document.body.appendChild(s);})();
   (Make sure there are no spaces at the very beginning before `javascript:`).
7. Save the bookmark.

🍎 For Safari (iOS) Browser:

1. Open Safari and visit any website.
2. Tap the **Share icon** (the square with an arrow pointing upwards) in the bottom menu bar.
3. Scroll down the share sheet and tap **Add Bookmark**.
4. Name the bookmark something like: Mobile Dev Tool
5. Save the bookmark.
6. Now, go to your Safari **Bookmarks** (the open book icon in the bottom menu).
7. Tap **Edit** in the bottom left corner.
8. Tap on the "Mobile Dev Tool" bookmark you just created.
9. Delete the existing URL and paste:
   javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/gh/jsn01000111/jsn01000111.github.io@main/mobile-inspect/dev-tool/script.js';document.body.appendChild(s);})();
   (Ensure there are no spaces at the very beginning before `javascript:`).
10. Tap **Done** to save the changes.

---

🔍 What It Looks Like in Action

Once you tap the name of your bookmarklet in the address bar, the tool appears as a compact, tabbed panel at the bottom of your screen:

• Console: View all your JavaScript logs and execute custom JS code directly.
• Styles: Experiment with live CSS rules; inject new styles to see immediate visual changes.
• Elements: This is your inspection hub! Tap on any element to highlight it, view its details, and perform actions like editing its ID/class/HTML, or even removing/duplicating it.
• Storage: Get a clear overview of your `localStorage` and `sessionStorage` data.
• Settings: Contains general tool settings and a reset option.

It's truly like having a pocket-sized web inspector for your mobile devices! 👨‍💻📱

---

💭 Why I Made This Tool

Beyond the practical utility, creating this bookmarklet was an incredible learning experience for me. It allowed me to delve deeper into JavaScript, understand the Document Object Model (DOM) more intimately, explore browser storage mechanisms, and grasp how JavaScript interacts with web pages to manipulate them.

Now, when an idea strikes or a bug needs squashing, I can test things directly on my phone or debug live pages on the go! ⚡

---

📥 Ready to Try It Out?

If you're as curious as I was, or if you simply need a quick and easy way to debug and inspect websites on your mobile device, feel free to try out my Mobile Dev Tool. Whether you’re a beginner like me or a seasoned developer looking for on-the-go utility, I hope it helps you too!

Let me know what you think in the comments below, or if you have any cool ideas for new features! 😊

Happy building!