Devtools for mobile browsers | Hacker News Reader

Devtools for mobile browsers

eruda.liriliri.io

237 pointslatonz46 comments

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/

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...

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.

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.

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.

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.

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.

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.

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

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?

It's an android app, not iOS.

Ah, got tricked by the quote that was comparing safari on ios with kiwi on one plus 6.

Once Apple becomes flexible on the web engine, it will be nice to see Kiwi go to iOS

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.

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.

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.

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

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.

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

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.

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

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.

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.

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.

Use an extension. It will work on any site. Example for iOS: https://apps.apple.com/us/app/web-inspector/id1584825745

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.

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.

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.

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.

How to use it for a different web site?

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

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() } })();

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.

I was able to get this working on mobile Safari (iOS 16.5) and it worked just fine.

This doesn't seem to work in any mobile browser. Are there more specific instructions for Android Firefox?

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.

Unfortunately it doesn't work in Firefox on Android.

Chrome on Android just tries to search for that text

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.

Can barely scroll the page on Android pixel 6

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

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.

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.

Reply on news.ycombinator.com