If you find this useful, give it a ⭐
1. Open your favourite browser
It can be either Google Chrome or Firefox or Safari. 100% Working on all mentioned browsers.
2. Open a new tab
3. Bookmark it
4. You should see a toast message as Bookmarked at the bottom, where you have to click on edit button
5. You will be redirected to Edit bookmark page where you can see Name, Folder and URL
6. Edit name as Inspect Element (or any name you may feel like)
7. Now, copy the following code and paste it in URL section
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
8. Now, go back and visit the page/website you want to inspect
9. In the search/address bar, enter the name as Inspect Element. You will see the link that you just recently bookmarked
10. Click on that URL and you will see an icon
11. Click on that icon to open the tool
That's it. You are good to go now.
1. You will see a small arrow on bottom left, just click on that to start writing scripts
Try the following code
console.log(((5 & 1) != 0) ? "Odd" : "Even");
2. Click on the Execute button
3. After execution
1. Theme
- Go to Settings tab
- Select Theme and change as per your choice
- After changing theme
2. Display
- Resize the display
- After changing display size
You can play around with more stuffs like these on your own. Give it a try
- Console: Display JavaScript logs.
- Elements: Check dom state.
- Network: Show requests status.
- Resource: Show localStorage, cookie information.
- Info: Show url, user agent info.
- Snippets: Include snippets used most often.
- Sources: Html, js, css source viewer.
Eruda
Eruda is an open source javascript package publicly hosted on github.