[HN Gopher] Devtools for mobile browsers
       ___________________________________________________________________
        
       Devtools for mobile browsers
        
       Author : latonz
       Score  : 195 points
       Date   : 2023-06-26 11:54 UTC (11 hours ago)
        
 (HTM) web link (eruda.liriliri.io)
 (TXT) w3m dump (eruda.liriliri.io)
        
       | haylem wrote:
       | 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
        
       | [deleted]
        
       | quechimba wrote:
       | 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.
        
       | fareesh wrote:
       | Can barely scroll the page on Android pixel 6
        
         | mintplant wrote:
         | Works fine in Firefox on a Pixel 6 Pro. A little choppy if I
         | open it in Chrome, but still usable.
        
       | asadm wrote:
       | 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
       | 
       | I never got around finishing it. Too much work of translating
       | each Chrome DevTools Protocol API to equivalent in wkwebview.
        
       | gkfasdfasdf wrote:
       | 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.
        
       | rtcode_io wrote:
       | We are using Tencent's vConsole on https://RTCode.io (info:
       | https://efn.kr video: https://rt.ht/yt)
       | 
       | Console output of this one is a lot better! Will do a complete
       | comparison later this week.
        
         | xmonkee wrote:
         | What exactly is this? Something like jsfiddle? With a cloud-
         | deploy option? Are there more docs somewhere?
        
       | slaymaker1907 wrote:
       | 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 wrote:
         | The extension "Web Inspector" provides you with exactly that,
         | albeit a basic version. It has a console.
        
       | londons_explore wrote:
       | 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.
        
         | frou_dh wrote:
         | 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.
        
         | tfsh wrote:
         | 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.
        
       | solarkraft wrote:
       | 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 wrote:
         | 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.
        
       | avodonosov wrote:
       | How to use it for a different web site?
        
         | theallan wrote:
         | 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
        
         | tantalor wrote:
         | 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() } })();
        
           | avodonosov wrote:
           | Chrome on Android just tries to search for that text
        
             | gabrielsroka wrote:
             | 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 wrote:
           | This doesn't seem to work in any mobile browser. Are there
           | more specific instructions for Android Firefox?
        
             | gabrielsroka wrote:
             | 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.
        
           | aceazzameen wrote:
           | Unfortunately it doesn't work in Firefox on Android.
        
           | semiquaver wrote:
           | 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 wrote:
             | I was able to get this working on mobile Safari (iOS 16.5)
             | and it worked just fine.
        
       | Mr_Modulo wrote:
       | 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/
        
         | BiteCode_dev wrote:
         | It states "Unparalled Speed", and testimonies say it's much
         | faster than safari.
         | 
         | Since on iOS any browser must use Apple's engine anyway and can
         | only provide a thin layer on top of it, how does that happen?
        
           | jsmith99 wrote:
           | It's an android app, not iOS.
        
             | j45 wrote:
             | Once Apple becomes flexible on the web engine, it will be
             | nice to see Kiwi go to iOS
        
         | Fej wrote:
         | 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/re...
        
           | mardifoufs wrote:
           | Correct me if I'm wrong, but I thought they walked back on
           | that? And I think the source code repo is now :
           | https://github.com/kiwibrowser/src.next ? Maybe that's just
           | the chromium rebase repo though.
        
           | rvnx wrote:
           | I'll do a change in Kiwi edition 116 to make it selectable in
           | the UI (it's almost a full rewrite of Kiwi and it will go out
           | in about 10 days).
           | 
           | Most likely to add a setting to make it optional.
           | 
           | The main issue we had was with search partners, if we allow
           | adblocking by default, then search engines still pay for the
           | request, and this means... we pay. And by we, I mean "I" pay
           | :)
           | 
           | One solution that some competitors found is to integrate
           | Adblock Plus (when you develop a browser they pay you for
           | that) or AdGuard and let them do the whitelist (so in
           | appearance the blame is on them, but I am fine to take the
           | blame myself).
           | 
           | Some browsers don't allow external adblockers so they don't
           | have this issue at all; you can't block their ads anyway (not
           | 100% sure but I think Google, DuckDuckGo, Brave, etc are like
           | this).
           | 
           | Yandex who was the pioneer of Chromium extensions on mobile
           | (before Kiwi) has similar mechanisms, except they fully block
           | the extension, instead of whitelisting it on certain URLs.
           | 
           | It's currently possible to go around the whitelist, just by
           | loading manually an extension.
           | 
           | And yes it's logic that Google Chrome doesn't block Google
           | search ads by default unless you load a workaround.
           | 
           | The same that Kiwi doesn't block Microsoft search ads when
           | our main funding is Microsoft Bing, and to be fair, getting
           | funded by search is the cleanest business model a browser can
           | have.
        
             | liminalsunset wrote:
             | As a user of Kiwi Browser I find this to be a reasonable
             | approach, and I understand the needs here. I would,
             | however, think that it would have been nice to have a
             | warning for users that are installing one of these
             | extensions along the lines of "This extension might be
             | restricted on certain URLs. Click to learn more". I would
             | find that helpful, paired with the ability to disable it.
             | 
             | This is just because when people install a third party ad
             | blocker, they are expecting a certain type of behaviour,
             | and quietly changing expectations can have bad results for
             | users who require specific functionality.
             | 
             | On an unrelated note, I would appreciate adding a toggle to
             | disable the "Pull to refresh" gesture on Android. I find
             | myself reloading accidentally during scrolling very often,
             | which can result in data loss.
        
             | ncann wrote:
             | Wow are you the author of Kiwi? If so I want to say thank
             | you for the great browser. Initially when I heard about a
             | Chrome-like browser on Android with full extension support
             | I was skeptical, it sounded too good to be true. But it
             | turned out to be exactly that good.
        
           | Mr_Modulo wrote:
           | 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.
        
             | rvnx wrote:
             | 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.
        
               | liminalsunset wrote:
               | Would this still result in creating unnecessary costs for
               | Kiwi Browser? Above I believe it was mentioned that the
               | reason these extensions were disabled was to prevent
               | users from racking up costs for requests to search
               | engines (?) with adblocking enabled
        
       | develatio wrote:
       | 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.
        
         | hdidvdksv wrote:
         | [flagged]
        
           | develatio wrote:
           | Oh! I really didn't realise (young?) people don't use
           | computers even for developing purposes. I'm indeed out of
           | touch
        
           | userbinator wrote:
           | They do. It's just one that's locked down and user-hostile,
           | designed as a consumption device.
        
         | westernpopular wrote:
         | 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.
        
           | sroussey wrote:
           | Use an extension. It will work on any site. Example for iOS:
           | https://apps.apple.com/us/app/web-inspector/id1584825745
        
           | kitsunesoba wrote:
           | 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.
        
       | arek_nawo wrote:
       | I think I remember seeing this (or a similar thing) in Solid.js
       | Playground: 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.
        
       ___________________________________________________________________
       (page generated 2023-06-26 23:01 UTC)