Firefox Add-on Enables Web Development Across Browsers and Devices | Hacker News Reader

Firefox Add-on Enables Web Development Across Browsers and Devices

hacks.mozilla.org

277 pointsrnyman25 comments

Kudos to Mozilla for tackling a huge pain point (having to learn three sets of dev tools because each browser speaks its own protocol sucks).

I'm most familiar with the WebKit/Chrome Dev Tools, and found this awesome project via Mozilla's post:

https://github.com/google/ios-webkit-debug-proxy

If it works as advertised, it'll let you connect to iOS browsers from Chrome Dev Tools. Honestly, I'm surprised they don't have a version of this compiled into Chrome for iOS.

Unfortunately, I couldn't get it to work:

https://github.com/google/ios-webkit-debug-proxy/issues/72

If you're on Windows I've been able to do this with Telerik's AppBuilder (http://docs.telerik.com/platform/appbuilder/debugging-your-c...)

It opens up a Webkit Dev Tools that are pretty close to the latest Chrome version and lets you interact with Safari on iOS. Even highlights elements the same as desktop.

Have you tried Weinre?

There is a port of ios-webkit-debug-proxy for Win32:

https://github.com/artygus/ios-webkit-debug-proxy-win32

So in theory, the Firefox Tools Adapter should also be capable of debugging Safari iOS in Windows

Thanks - we're definitely interested in Windows support and will take a look at this.

I know I'm probably the only one but I really wish they'd have Dev Tools that you can use on the device instead of remote debugging. Especially on Tablets and Set-top boxes.

If you have a Mac, you can use the remote web inspector for iOS, it works pretty well.

http://moduscreate.com/enable-remote-web-inspector-in-ios-6/

I think you misunderstood what he is asking about. He wants to debug locally on a tablet or a set-top box. The method you mentioned is remote debugging, something he explicitly wishes not to do.

He specifically said that a remote debugger is the opposite of what he wants.

Firefox for Android supports plugins, I guess you can install Firebug for it. For other browsers: Firebug Lite. It's a purely HTML version of Firebug.

You're not alone! I wish Firefox for Android would allow you to view the source code.

view-source:https://news.ycombinator.com

I can confirm, this works fine. You can probably turn it into a bookmarklet, too.

Gee, thanks!

why? wouldn't the screen be too small to make any sense of the info? maybe if you can switch between the dev tools and the site super fast, otherwise you have to view the site and the dev tools side by side on a small screen

Modal Dev Tools, that's actually really a good idea on phones (screen size isn't a problem on tablets and STBs).

I believe a horizontal swipe could show or close the tools. That way you can still select the element in the content window and look back at the source. Since non-developers might get bogged down with it I'd suggest it be option you tick on in settings.

But how is that better than remote debugging? When are you coding without bring at a computer?

Coding on things other than a computer gets a little easier when the tools exist :)

I've made quick pushes via web IDE on my phone while commuting. I doubt improved tooling would increase frequency, but it would certainly increase the complexity I'd be capable of and my confidence in not pushing janky brokenness.

I'm not sure but I think someone is working on that at mozilla. It is almost dedicated to things specific to mobile, though.

Ugg, set top box debugging. I feel you pain. Have you looked at weinre[1]?

[1]: http://people.apache.org/~pmuellr/weinre/

Firefox OS has a lot of developer tools in the device :-) from HUD displays showing things such as memory usage, reflows, repaints and fps to console.

Since Firefox OS and Firefox for Android run the same engine its very easy to switch between them to test stuff.

I've been working on something similar this year (https://www.entomic.com) that helps developers build cross-browser, responsive sites.

As an editor, all changes update immediately on all connected browsers and devices as they're being made to help see when things start going wrong.

Although it doesn't support javascript yet, all HTML and CSS changes do get pushed instantly to connected devices without the need to host a local server.

If you don't mind me asking, why did you choose to use a subscription model instead of a license that allows customers to own the app and just pay for updates if they need them? The subscription fee makes me hesitant to even try it. I like owning my tools, not renting them.

If this was the Chrome dev tools I'd be very very happy.

Reply on news.ycombinator.com