Inspect element on phone?

[ladybug]

Hey, is there a way to trigger inspect element in any browser on the phone? I mean the dev tools in Chrome or whatever browser? I don’t mean remotely from the desktop, I mean on device. Access them on device, do everything on device.

[Skipple]

It would help if you specified what phone you have any what browser you use. 

 

On Android: in Chorme address bar type "view-source:" before the "HTTP" and reload the page.

[ladybug]

Just now, Skipple said:

It would help if you specified what phone you have any what browser you use. 

 

On Android: in Chorme address bar type "view-source:" before the "HTTP" and reload the page.

Huh, OK thanks! Well I have a Samsung but it doesn't matter about the browser, I have Chrome so I will try that, thanks! Can you do it in Firefox on mobile too, just curious because that's what I am regularly using. 

[Skipple]

Just now, stefanmz said:

Can you do it in Firefox on mobile too, just curious because that's what I am regularly using. 

I have no idea. Why not try it and report back?

[Biohazard777]

15 minutes ago, Skipple said:

On Android: in Chorme address bar type "view-source:" before the "HTTP" and reload the page.

That will do just what the name implies, viewing source... which is a far cry from DevTools (right click -> inspect element, on desktop browsers).

@stefanmz I'm guessing you want something more like this:

If so:
https://github.com/liriliri/eruda
 

[ladybug]

20 minutes ago, Skipple said:

I have no idea. Why not try it and report back?

Ok, it did work on Chrome, I will try on Firefox when I finish with that on Chrome and report

[ladybug]

6 minutes ago, Biohazard777 said:

That will do just what the name implies, viewing source... which is a far cry from DevTools (right click -> inspect element, on desktop browsers).

@stefanmz I'm guessing you want something more like this:

If so:
https://github.com/liriliri/eruda
 

Wow I didn't even think this would have been an option so I decided view is better than nothing.  Thanks! Exactly what I needed. More technically advanced to setup but I am gonna manage.

[Biohazard777]

26 minutes ago, stefanmz said:

Wow I didn't even think this would have been an option so I decided view source us better than nothing.  Thanks! Exactly what I needed. More technically advanced to setup but I am gonna manage.

You are welcome.

Pro tip:
Add a new bookmark (to whatever, you will edit it anyway in a second).

In the URL paste the code from github readme, or copy from bellow:

javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();

Confirm changes.

Then on the page you want to "inspect", in the address bar start typing "Insp..."
And then tap on the auto-fill arrow:

Hit enter on the phone KB,
once the script is loaded cogwheel button will show up in the lower right corner (tap that for DevTools).
 

[ladybug]

24 minutes ago, Biohazard777 said:

You are welcome.

Pro tip:
Add a new bookmark (to whatever, you will edit it anyway in a second).

In the URL paste the code from github readme, or copy from bellow:

javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();

Confirm changes.

Then on the page you want to "inspect", in the address bar start typing "Insp..."
And then tap on the auto-fill arrow:

Hit enter on the phone KB,
once the script is loaded cogwheel button will show up in the lower right corner (tap that for DevTools).
 

Great but I didn't understand how to load it. I tried to paste it before the http address of the page but that didn't work.  How exactly do you activate it? Where does it go in the address bar and where does the site URL go?

[Biohazard777]

2 minutes ago, stefanmz said:

Great but I didn't understand how to load it. I tried to paste it before the http address of the page but that didn't work.  How exactly do you activate it? Where does it go in the address bar and where does the site URL go?

You need to completely replace the URL.
- First you open up the website you wish to inspect, for example visit https://linustechtips.com/
- Wait for the site to load.
- Then in the URL input field select everything.
- Paste the code. (thus  "https://linustechtips.com/" becomes "javascript:(function ()...")

- Hit return on the smartphone KB (right arrow).
- Look for the cogwheel button in the bottom right.

[ladybug]

25 minutes ago, Biohazard777 said:

You need to completely replace the URL.
- First you open up the website you wish to inspect, for example visit https://linustechtips.com/
- Wait for the site to load.
- Then in the URL input field select everything.
- Paste the code. (thus  "https://linustechtips.com/" becomes "javascript:(function ()...")

- Hit return on the smartphone KB (right arrow).
- Look for the cogwheel button in the bottom right.

Ok but I still don't get where the URL goes. If I just replace it, it google searches for the function. Where do i put the site URL? In the function?Do I have to use some other browser? On what browsers does that work on?

[Biohazard777]

7 minutes ago, stefanmz said:

Ok but I still don't get where the URL goes. If I just replace it, it google searches for the function. Where do i put the site URL? In the function?Do I have to use some other browser? On what browsers does that work on?

Brave, but I just tried and it works on Chrome as well.

Though I did notice that both delete the start of the code when copy pasting:
I paste "javascript:(function () {..." and what actually gets pasted is "(function () {...".
Meaning "javascript:" portion was not pasted.

 

I guess it is a security feature (so that people that aren't tech savvy do not get scammed into pasting malicious code).
In any case if you are manually going to paste the code each time, you will have to manually move the cursor back to the start and add "javascript:"

Hence why I suggest you use the bookmark method, much easier:

 

[E-waste]

I don't think fennec (firefox mobile with about:config) has this functionality enabled.  It is listed in the options and the key to activate is F12, so I wonder if that would work with a full keyboard.

 

Here are some great browser extensions to speed up page koads:

 

privacy badger, developed by the EFF, it has a simple menu showing all extra websites in a website, many have upwards of 20 extras, especially online businesses selling products, mostly for tracking you.

 

Most webpages need only one or four max of these websites scripts enabled, included the main website, to use menus and interact the various elements.  Often times, if you are just reading an article, you don't need anything enabled, unless the page is designed to only show the article using some javascript.

 

Another addon is NoScript if you want it to default to not allowing anything, and only allow what is needed.

 

dark reader is nice if you want to change the background color from white to something else during the day, or if you also want to change a dark background to a different color, or change font colors.

[ladybug]

On 9/15/2023 at 7:41 PM, Biohazard777 said:

Brave, but I just tried and it works on Chrome as well.

Though I did notice that both delete the start of the code when copy pasting:
I paste "javascript:(function () {..." and what actually gets pasted is "(function () {...".
Meaning "javascript:" portion was not pasted.

 

I guess it is a security feature (so that people that aren't tech savvy do not get scammed into pasting malicious code).
In any case if you are manually going to paste the code each time, you will have to manually move the cursor back to the start and add "javascript:"

Hence why I suggest you use the bookmark method, much easier:

Great,thanks a lot!