How to debug on Opera Mini?

Question

How do I debug a website that looks weird on Opera Mini? The site is working fine on any other browser.

Foretime

Is the site public? If so, what is the URL? – Tswana

Answer 1

Alas, I know of no dedicated resource on how to debug a website w/ Mini, though there are a few related articles on http://dev.opera.com that might help you. The most recent article is A developer's look at Opera Mini 5, but Making Small Devices Look Great and Designing With Opera Mini in Mind should be particularly useful as well.

Generally check how a site looks in Opera Desktop and use Opera Dragonfly for debugging. Another good tool for debugging is MicroEmulator when used w/ a locally downloaded version of Opera Mini and a resizable skin.

Also, there is a special url in Mini that allows you to access the ECMAScript error console: just type "debug:console" in the url field. You can combine this with calls to opera.postError() in the development version of your site to post any string to that console. However, it won't show you html tags.

I could probably help you better if you had a more specific question.

Tswana

Answer 2

It is possible to view the original html source of the page that is represented in Opera Mini to give you some clues:

View page source

It is possible to get a dump of the current page source by entering server:source into Opera Mini's address bar. This shows the current DOM tree from the Opera Mini server. Since reading the source from a cell phone display or even an enlarged microemulator isn't very pleasant, there is an even better way of obtaining a page's source code — posting it to a webserver by entering server:source?post=http://your.server.com/script into Opera Mini's address bar, where the script file that is passed the post data will handle the request, e.g. by storing the source in a database, or saving it to a text file. The posted data includes the fields url, host and html.

• Taken from this great article on dev.opera.com about Opera Mini development, specs and debugging.

Rohrer

One other convenient way to see traffic, including the actual source code being delivered to your Opera Mini instance, is to use ngrok - secure introspectable tunnels to localhost. This is useful when developing on your local box, and needing your code to be visible on the internet for Opera Mini servers to see it and optimize it for the device. You can then use ngrok's local server to see the actual code that was delivered to the device. Not exactly "debugging", but definitely very helpful. – Eloign

Answer 3

There is also a simulator in Java which may help.

Havenot

It doesn't. There is no "view source" :) – Introversion

Opera Mini has no “view source”: It gets a precompiled version of the page from an Opera server. – Havenot

And this is the main problem in debugging on Opera Mini. – Introversion

Viewing the page source is actually easy - just view the page with Firefox and mask it as Opera Mini: the source will be the same. But if you want to view the current DOM tree, you need to rely on a more uncomfortable workaround (that only works for smaller documents): just type "javascript:alert(document.body.outerHTML)" in the url field. You could even take this to the max and create a nice bookmarklet that posts a page's dom tree to a form :) – Tswana

There's a server:source page you can visit from opera mini to see their retrieved source page. <1> – Rohrer

Answer 4

You can do remote debugging of Opera Mini (or any Presto-engine-based browser instance on any device; computer, smartphone, set-top console, SDK) via Opera Dragonfly from Windows, Mac, or Linux. The Dragonfly console is open-sourced and built into Opera v10.5x.

Nonpros

I think you mean Opera Mobile, not Mini... the former is used on smartphones and a whole bunch of other devices, the latter on older Java-enabled phones. – Rese

Answer 5

One can download Opera Mobile Emulator from

http://www.opera.com/developer/tools/mobile/

Kava

This is true, and it's a wonderful tool, but is it relevant to debugging Opera Mini? – Eloign