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.

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.

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.