8 ms·

Devtools for mobile browsers

237 points by latonz 3y ago

avodonosov 3y ago
How to use it for a different web site?
- tantalor 3y ago
  In order to try it for different sites, execute the script below on browser address bar. javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
  - aceazzameen 3y ago
    Unfortunately it doesn't work in Firefox on Android.
  - semiquaver 3y ago
    Unfortunately javascript URIs don’t work from the address bar in many browsers like mobile Safari, probably to prevent attacks. At least for safari you need to create a bookmarklet with that content and execute it by “visiting” the bookmark.
    - bvogelzang 3y ago
      I was able to get this working on mobile Safari (iOS 16.5) and it worked just fine.
  - avodonosov 3y ago
    Chrome on Android just tries to search for that text
    - gabrielsroka 3y ago
      It worked for me on Chrome for Android. Note that if you copy and paste it, it will typically remove the `JavaScript` at the beginning and you'll have to add it back.
  - lopkeny12ko 3y ago
    This doesn't seem to work in any mobile browser. Are there more specific instructions for Android Firefox?
    - gabrielsroka 3y ago
      It worked for me on Chrome and Brave for Android. Note that if you copy and paste it, it will typically remove the `JavaScript` at the beginning and you'll have to add it back.
- theallan 3y ago
  More details about that on their github page [1]. It seems you basically need to include a JS file from [their CDN](//cdn.jsdelivr.net/npm/eruda). As someone who fondly remembers the early Firebug days, it is great to see this. It is very frustrating to me that tablets and phones are so powerful, but we can't do even basic dev stuff on them. [1] https://github.com/liriliri/eruda https://github.com/liriliri/eruda
arek_nawo 3y ago
I think I remember seeing this (or a similar thing) in Solid.js Playground: https://playground.solidjs.com/ https://playground.solidjs.com/ The fact that it’s available on mobile and that it allows for “embedding” a good-enough dev tools into your web app, does enable interesting use-cases. Of course, it’s not the go-to for complex or extended debugging sessions but still impressive.
rtcode_io 3y ago
We are using Tencent's vConsole on https://RTCode.io https://RTCode.io (info: https://efn.kr https://efn.kr video: https://rt.ht/yt https://rt.ht/yt) Console output of this one is a lot better! Will do a complete comparison later this week.
- xmonkee 3y ago
  What exactly is this? Something like jsfiddle? With a cloud-deploy option? Are there more docs somewhere?
londons_explore 3y ago
Worth knowing you can use proper devtools on mobile devices too, but remotely. Visit chrome://inspect/#devices in a chromium based browser, and you'll see a list of remote targets that you can connect to. They include browsers running on any device connectable via ADB. You can also debug over the network, debug headless browsers, and debug nodejs and webdriver instances.
- tfsh 3y ago
  I use this functionality a lot, however note that the ADB functionality over Chrome sometimes interferes with Android Studio or ADB running locally, so make sure to run `adb kill-server` if Chrome can't find connected devices.
- frou_dh 3y ago
  I love using that to debug Deno CLI commands and servers using a proper luxuriously designed debugger. So much nicer than the archaic TUI (PuDB) I use to debug Python.
Mr_Modulo 3y ago
Another option to get a JavaScript console on Android is use Kiwi Browser[1] Kiwi allows access to the full Chromium JavaScript console that you can open in a new tab. Kiwi also allows usage of Chromium extensions. I wanted full ad blocking but Kiwi only had rudimentary ad blocking that was disabled by default. No problem, I installed uBlock Origin! [1]: https://kiwibrowser.com/ https://kiwibrowser.com/
- Fej 3y ago
  This is really cool, thanks for pointing it out! I have used Eruda and keep it in Tampermonkey in Firefox for use in a pinch but it's hacky. It's impressive that it works at all, but it's very difficult to do any actual work. I already had Kiwi installed and it's neat to pop it open and see this feature hiding in plain sight. I can definitely see myself using it regularly, although I won't use it as a daily driver since it selectively blocks adblockers on a hardcoded list of domains which is just untrustworthy. https://github.com/kiwibrowser/src/blob/master/extensions/renderer/extension_injection_host.cc https://github.com/kiwibrowser/src/blob/master/extensions/re...
  - Mr_Modulo 3y ago
    That is pretty sketchy. Thanks for pointing that out! I've started using Kiwi as my main mobile browser after I got fed up with some issues I was having with Brave.
    - _njyk 3y ago
      If you are really really in a rare situation where you want to use Bing and block Bing search ads: kiwi://extensions Press: + (from zip) Load uBlock Origin Finished. Not that dramatic + auto-update works. It would be sketchy to offer an out-of-the-box experience that blocks the search pages of Microsoft and Yahoo (they pay us). Remember the fact that if a browser has an established and visible business model is way better than a browser where you don’t know how they make money. With Kiwi, if you use Bing or Yahoo, Microsoft and Yahoo share with us the costs and the revenues (both ways). Simple model and no need to sell crypto, fake VPNs, user history or whatever some others do.
solarkraft 3y ago
That's awesome! But what's up with app developers thinking that the mobile version of a piece of software always has to be worse? It gets on my nerves insanely that sometimes I have to switch devices because a simple feature just isn't available on one platform.
- www_harka_com 3y ago
  Yeah. I agree, but completely the oppositve. I prefer to do everyhing on the computer and I hate that many times the web or desktop interface is way worse (if there is one at all), than the mobile app.
develatio 3y ago
But why not just use the browser's dev tools? Both Android and iOS support connecting a phone to a computer and debugging using the browser's native tools.
- westernpopular 3y ago
  What if you're on the go and only have a phone available? I reckon this is intended for quick experiments, not in depth debugging.
  - kitsunesoba 3y ago
    Yeah that makes the most sense to me. I could see a full blown desktop style inspector being useful on a 11”+ tablet (which is really just a laptop sans keyboard) but it’d be too frustrating for extended usage on anything smaller.
  - sroussey 3y ago
    Use an extension. It will work on any site. Example for iOS: https://apps.apple.com/us/app/web-inspector/id1584825745 https://apps.apple.com/us/app/web-inspector/id1584825745
- hdidvdksv 3y ago
  [flagged]
  - develatio 3y ago
    Oh! I really didn't realise (young?) people don't use computers even for developing purposes. I'm indeed out of touch
    - saurik 3y ago
      Yeah: it really is a different world now: kids--who absolutely should not be locked out of access to development tools--pretty universally only have access to phones and tables, or, at best, a highly locked-down Chromebook; but like, it goes much further than even that: even lawyers I work with--people who you'd think MUST have a full computer--sometimes only work on an iPad!! :(
quechimba 3y ago
This is really good. I used this a few years ago when my laptop had died and I had to get some work done. Bought an USB keyboard, installed vim, zsh, tmux, ruby, node and postgres in Termux on my phone. Small screen but worked pretty well. Had to use devtools and I found this.
gkfasdfasdf 3y ago
This is an awesome tool! I am doing some basic web dev with my kids and their school Chromebooks, however their accounts have chrome dev tools disabled. By sourcing this eruda js we are able to get the console back.
fareesh 3y ago
Can barely scroll the page on Android pixel 6
- mintplant 3y ago
  Works fine in Firefox on a Pixel 6 Pro. A little choppy if I open it in Chrome, but still usable.
deleted 3y ago
[deleted]
haylem 3y ago
My reaction to this was "Oh hello Firebug, old friend" :) It's not firebug, but it was nice that firebug at the time was installable as an extension or a simple bookmarklet, for just about any page, before "Dev Tools" became integral parts of our modern browsers. EDIT: Firebug's old page is actually still up with a bit of history: https://getfirebug.com/index.html https://getfirebug.com/index.html
slaymaker1907 3y ago
I’m definitely saving this page for later. It’s such a nightmare trying to debug issues on iOS. Even just having a JS console on the page is invaluable. In the past, I’ve just used the (expensive) virtualization stuff since I don’t own a Mac when writing web stuff to use on my iPhone. Last year, the File System Access API showed as available on iOS even though the origin private (useless) FS was the only portion available. Rant: the origin private FS is basically pointless and I believe it was only added to the spec so Mozilla and Apple could claim to support the file system access API. It would maybe be useful if Apple didn’t insist on clearing everything out after SEVEN DAYS. How the fuck is seven days persistent? I have apps that are open (in the background)for longer than that.
- graftak 3y ago
  The extension “Web Inspector” provides you with exactly that, albeit a basic version. It has a console.
asadm 3y ago
I had once started a project to port over Chrome Devtools to iPad, here is a thread with some videos: https://twitter.com/DevToolsApp/status/1353226687681445892 https://twitter.com/DevToolsApp/status/1353226687681445892 I never got around finishing it. Too much work of translating each Chrome DevTools Protocol API to equivalent in wkwebview.

237 points by latonz 3y ago

avodonosov 3y ago

How to use it for a different web site?

tantalor 3y ago
In order to try it for different sites, execute the script below on browser address bar. javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
- aceazzameen 3y ago
  Unfortunately it doesn't work in Firefox on Android.
- semiquaver 3y ago
  Unfortunately javascript URIs don’t work from the address bar in many browsers like mobile Safari, probably to prevent attacks. At least for safari you need to create a bookmarklet with that content and execute it by “visiting” the bookmark.
  - bvogelzang 3y ago
    I was able to get this working on mobile Safari (iOS 16.5) and it worked just fine.
- avodonosov 3y ago
  Chrome on Android just tries to search for that text
  - gabrielsroka 3y ago
    It worked for me on Chrome for Android. Note that if you copy and paste it, it will typically remove the `JavaScript` at the beginning and you'll have to add it back.
- lopkeny12ko 3y ago
  This doesn't seem to work in any mobile browser. Are there more specific instructions for Android Firefox?
  - gabrielsroka 3y ago
    It worked for me on Chrome and Brave for Android. Note that if you copy and paste it, it will typically remove the `JavaScript` at the beginning and you'll have to add it back.
theallan 3y ago
More details about that on their github page [1]. It seems you basically need to include a JS file from [their CDN](//cdn.jsdelivr.net/npm/eruda). As someone who fondly remembers the early Firebug days, it is great to see this. It is very frustrating to me that tablets and phones are so powerful, but we can't do even basic dev stuff on them. [1] https://github.com/liriliri/eruda https://github.com/liriliri/eruda

arek_nawo 3y ago

I think I remember seeing this (or a similar thing) in Solid.js Playground: https://playground.solidjs.com/ https://playground.solidjs.com/ The fact that it’s available on mobile and that it allows for “embedding” a good-enough dev tools into your web app, does enable interesting use-cases. Of course, it’s not the go-to for complex or extended debugging sessions but still impressive.

rtcode_io 3y ago

We are using Tencent's vConsole on https://RTCode.io https://RTCode.io (info: https://efn.kr https://efn.kr video: https://rt.ht/yt https://rt.ht/yt) Console output of this one is a lot better! Will do a complete comparison later this week.

xmonkee 3y ago
What exactly is this? Something like jsfiddle? With a cloud-deploy option? Are there more docs somewhere?

londons_explore 3y ago

Worth knowing you can use proper devtools on mobile devices too, but remotely. Visit chrome://inspect/#devices in a chromium based browser, and you'll see a list of remote targets that you can connect to. They include browsers running on any device connectable via ADB. You can also debug over the network, debug headless browsers, and debug nodejs and webdriver instances.

tfsh 3y ago
I use this functionality a lot, however note that the ADB functionality over Chrome sometimes interferes with Android Studio or ADB running locally, so make sure to run `adb kill-server` if Chrome can't find connected devices.
frou_dh 3y ago
I love using that to debug Deno CLI commands and servers using a proper luxuriously designed debugger. So much nicer than the archaic TUI (PuDB) I use to debug Python.

Mr_Modulo 3y ago

Another option to get a JavaScript console on Android is use Kiwi Browser[1] Kiwi allows access to the full Chromium JavaScript console that you can open in a new tab. Kiwi also allows usage of Chromium extensions. I wanted full ad blocking but Kiwi only had rudimentary ad blocking that was disabled by default. No problem, I installed uBlock Origin! [1]: https://kiwibrowser.com/ https://kiwibrowser.com/

Fej 3y ago
This is really cool, thanks for pointing it out! I have used Eruda and keep it in Tampermonkey in Firefox for use in a pinch but it's hacky. It's impressive that it works at all, but it's very difficult to do any actual work. I already had Kiwi installed and it's neat to pop it open and see this feature hiding in plain sight. I can definitely see myself using it regularly, although I won't use it as a daily driver since it selectively blocks adblockers on a hardcoded list of domains which is just untrustworthy. https://github.com/kiwibrowser/src/blob/master/extensions/renderer/extension_injection_host.cc https://github.com/kiwibrowser/src/blob/master/extensions/re...
- Mr_Modulo 3y ago
  That is pretty sketchy. Thanks for pointing that out! I've started using Kiwi as my main mobile browser after I got fed up with some issues I was having with Brave.
  - _njyk 3y ago
    If you are really really in a rare situation where you want to use Bing and block Bing search ads: kiwi://extensions Press: + (from zip) Load uBlock Origin Finished. Not that dramatic + auto-update works. It would be sketchy to offer an out-of-the-box experience that blocks the search pages of Microsoft and Yahoo (they pay us). Remember the fact that if a browser has an established and visible business model is way better than a browser where you don’t know how they make money. With Kiwi, if you use Bing or Yahoo, Microsoft and Yahoo share with us the costs and the revenues (both ways). Simple model and no need to sell crypto, fake VPNs, user history or whatever some others do.

solarkraft 3y ago

That's awesome! But what's up with app developers thinking that the mobile version of a piece of software always has to be worse? It gets on my nerves insanely that sometimes I have to switch devices because a simple feature just isn't available on one platform.

www_harka_com 3y ago
Yeah. I agree, but completely the oppositve. I prefer to do everyhing on the computer and I hate that many times the web or desktop interface is way worse (if there is one at all), than the mobile app.

develatio 3y ago

But why not just use the browser's dev tools? Both Android and iOS support connecting a phone to a computer and debugging using the browser's native tools.

westernpopular 3y ago
What if you're on the go and only have a phone available? I reckon this is intended for quick experiments, not in depth debugging.
- kitsunesoba 3y ago
  Yeah that makes the most sense to me. I could see a full blown desktop style inspector being useful on a 11”+ tablet (which is really just a laptop sans keyboard) but it’d be too frustrating for extended usage on anything smaller.
- sroussey 3y ago
  Use an extension. It will work on any site. Example for iOS: https://apps.apple.com/us/app/web-inspector/id1584825745 https://apps.apple.com/us/app/web-inspector/id1584825745
hdidvdksv 3y ago
[flagged]
- develatio 3y ago
  Oh! I really didn't realise (young?) people don't use computers even for developing purposes. I'm indeed out of touch
  - saurik 3y ago
    Yeah: it really is a different world now: kids--who absolutely should not be locked out of access to development tools--pretty universally only have access to phones and tables, or, at best, a highly locked-down Chromebook; but like, it goes much further than even that: even lawyers I work with--people who you'd think MUST have a full computer--sometimes only work on an iPad!! :(

quechimba 3y ago

This is really good. I used this a few years ago when my laptop had died and I had to get some work done. Bought an USB keyboard, installed vim, zsh, tmux, ruby, node and postgres in Termux on my phone. Small screen but worked pretty well. Had to use devtools and I found this.

gkfasdfasdf 3y ago

This is an awesome tool! I am doing some basic web dev with my kids and their school Chromebooks, however their accounts have chrome dev tools disabled. By sourcing this eruda js we are able to get the console back.

fareesh 3y ago

Can barely scroll the page on Android pixel 6

mintplant 3y ago
Works fine in Firefox on a Pixel 6 Pro. A little choppy if I open it in Chrome, but still usable.

deleted 3y ago

[deleted]

haylem 3y ago

My reaction to this was "Oh hello Firebug, old friend" :) It's not firebug, but it was nice that firebug at the time was installable as an extension or a simple bookmarklet, for just about any page, before "Dev Tools" became integral parts of our modern browsers. EDIT: Firebug's old page is actually still up with a bit of history: https://getfirebug.com/index.html https://getfirebug.com/index.html

slaymaker1907 3y ago

I’m definitely saving this page for later. It’s such a nightmare trying to debug issues on iOS. Even just having a JS console on the page is invaluable. In the past, I’ve just used the (expensive) virtualization stuff since I don’t own a Mac when writing web stuff to use on my iPhone. Last year, the File System Access API showed as available on iOS even though the origin private (useless) FS was the only portion available. Rant: the origin private FS is basically pointless and I believe it was only added to the spec so Mozilla and Apple could claim to support the file system access API. It would maybe be useful if Apple didn’t insist on clearing everything out after SEVEN DAYS. How the fuck is seven days persistent? I have apps that are open (in the background)for longer than that.

graftak 3y ago
The extension “Web Inspector” provides you with exactly that, albeit a basic version. It has a console.

asadm 3y ago

I had once started a project to port over Chrome Devtools to iPad, here is a thread with some videos: https://twitter.com/DevToolsApp/status/1353226687681445892 https://twitter.com/DevToolsApp/status/1353226687681445892 I never got around finishing it. Too much work of translating each Chrome DevTools Protocol API to equivalent in wkwebview.