Debugging Console on iPhone
I have an iPhone 3GS and one thing I have always found annoying is that when I am developing web pages for display on the iPhone you cannot debug them as easily as you can with a PC.
Yes you can get simulators and use user-agent switchers but they are not the same as debugging on the real device.
If I use an agent switcher and change my user-agent to GoogleBot or IE 6 that isn't got to simulate a web page that tests for agents and devices properly or handle libraries that test for unique iPhone / iPad features available on the device and loaded in by specialist external libraries such as the two finger scroll etc.
A proper coder will test for a BOT in ways that don't rely purely on the user-agent including checking for known BOT IP addresses that the they crawl from, a reverse/forward DNS check or tests for JavaScript or Flash use or all 3 and a myriad of other techniques.
On the iPhone you can easily test whether a user-agent switcher is being used by creating a flash movie and then testing if it's been loaded as we all know iPhone doesn't support flash so a user-agent sniff for "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5" is useless for simulating an iPhone and it's workings properly.
Therefore knowing whether there are JavaScript errors on the page or wishing to output debug messages to the console on an iPhone which you can do easily in all other browsers is a very useful thing to be able to do. I didn't actually find this out until this morning but on the iPhone you can actually do this by going to your settings menu option and enabling it with the following steps.
Go to Settings > Choose the Safari Option > At the bottom of the menu select the Developer option > Enable the "Debug Console" option.
If you then go to any web page you should see at the top of the page will now appear a new panel titled "Debug Console" and if there are no errors on the page it will say "No Errors". If there are errors but no output to the console (e.g with a console.log(msg) function call) then it will list the number of errors and if there are console messages it will tell you the number e.g "7 Logs".
Selecting the console option will show a new screen in which you can view all the console messages. At the bottom of the screen are options to view "All messages", "HTML", "JavaScript" and "CSS". Clicking the relevant tab will show you messages related to those errors.
If there are JavaScript errors it will show you the line number, the error message and a description but unlike a proper browser you cannot click on the error message and view the actual source code.
In fact that is the one bug bear I have about iPhone's Safari browser which is the lack of developer options such as being able to view the source and generated source code as well as controlling options such as white/blacklists for 3rd party cookies, JavaScript and so on. However at least you can view the errors on the device properly if you need to.
I have an iPhone 3GS and one thing I have always found annoying is that when I am developing web pages for display on the iPhone you cannot debug them as easily as you can with a PC.
Yes you can get simulators and use user-agent switchers but they are not the same as debugging on the real device.
If I use an agent switcher and change my user-agent to GoogleBot or IE 6 that isn't got to simulate a web page that tests for agents and devices properly or handle libraries that test for unique iPhone / iPad features available on the device and loaded in by specialist external libraries such as the two finger scroll etc.
A proper coder will test for a BOT in ways that don't rely purely on the user-agent including checking for known BOT IP addresses that the they crawl from, a reverse/forward DNS check or tests for JavaScript or Flash use or all 3 and a myriad of other techniques.
On the iPhone you can easily test whether a user-agent switcher is being used by creating a flash movie and then testing if it's been loaded as we all know iPhone doesn't support flash so a user-agent sniff for "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5" is useless for simulating an iPhone and it's workings properly.
Therefore knowing whether there are JavaScript errors on the page or wishing to output debug messages to the console on an iPhone which you can do easily in all other browsers is a very useful thing to be able to do. I didn't actually find this out until this morning but on the iPhone you can actually do this by going to your settings menu option and enabling it with the following steps.
Go to Settings > Choose the Safari Option > At the bottom of the menu select the Developer option > Enable the "Debug Console" option.
If you then go to any web page you should see at the top of the page will now appear a new panel titled "Debug Console" and if there are no errors on the page it will say "No Errors". If there are errors but no output to the console (e.g with a console.log(msg) function call) then it will list the number of errors and if there are console messages it will tell you the number e.g "7 Logs".
Selecting the console option will show a new screen in which you can view all the console messages. At the bottom of the screen are options to view "All messages", "HTML", "JavaScript" and "CSS". Clicking the relevant tab will show you messages related to those errors.
If there are JavaScript errors it will show you the line number, the error message and a description but unlike a proper browser you cannot click on the error message and view the actual source code.
In fact that is the one bug bear I have about iPhone's Safari browser which is the lack of developer options such as being able to view the source and generated source code as well as controlling options such as white/blacklists for 3rd party cookies, JavaScript and so on. However at least you can view the errors on the device properly if you need to.
Posts
No comments:
Post a Comment