iPad Safari Development toolbar

javascript css ipad safari mobile-safari

50,274

Solution 1

There is no developer toolbar for Safari iPad, but you could definitely use something like firebug lite to do most of what you want! Just add the bookmarklet to your bookmarks, and then load it while you're looking at your page.

Your other option is Weinre, a remote debugger and part of the PhoneGap project. Essentially, it lets you run an interface similar to the Chrome document inspector on your desktop machine, that manipulates the document on your iPad or iPhone. The commenter below brought my attention to this awesome tool a year ago, but since then the project's URL has changed so I'm adding it here.

FirebugLite does have some issues with rendering speed and dealing with JavaScript, and it additionally doesn't scale its fonts very well. For these reasons, Weinre is definitely a more powerful tool - but also harder to start using.

Solution 2

On the ipad go to Settings > Safari > Advanced and activate the Web Inspector.

Connect your ipad with your computer.

On your computer open Safari, enable the developer tools in the settings. check the above menu for the tab Developer and find your iPad there.

Full control via console from your desktop machine over the iOS Safari and you're done!

PS: This works exact the same way with the iPhone as well..

Solution 3

You can use this little trick to enable Firebug Lite or any other debugging tool built into a bookmarklet, works quite well actually!

http://www.blog.cordslatton.com/2010/11/debugging-ios-mobile-safari-ipad-iphone/

50,274

copenndthagen

Buy some cool JavaScript related merchandise from; https://teespring.com/stores/technical-guru-2

Updated on July 09, 2022

Comments

copenndthagen almost 2 years

Is there some kind of developer toolbar that can be used within the iPad/Safari?

I am aware of the same on desktop Safari as well as I know there is a Debugger option in iPad/Safari but is there a quick way of editing CSS/JS within the iPad/Safari?
Matthew over 12 years

This question is about Safari on the iPad, not desktop Safari.
Winfield Trail over 12 years

Oh damn, Weinre looks hot. +1.
Base Desire over 11 years

Thanks! This was useful(and necessary, I was like..okay how do I save the frigging bookmark!)
vipin Paliwal about 11 years

Has this been removed on iOS 6.1? I know it was there on 6.0 but since upgrading to 6.1 I can't find it. Or am I missing something?
user828591 almost 11 years

Tried this and it works like a charm! One thing I stumbled upon is that private browsing has to be disabled in Safari though.
honk31 almost 11 years

acutally i dont think this works on windows, since apple stopped developing safari for windows (not 100% sure). i tried it on my virtual machine but couldnt find that entry in the development menue.
GDP over 10 years

@sudowned is there a version requirement here? I just updated my ipad and MacBook to the latest versions, yet the option to connect to the iPad does not appear under the develop menu.
Winfield Trail over 10 years

Uncertain - you might want to talk to honk31, author of the answer below which actually involves the connection method.
MrBoJangles over 9 years

The link appears to have succumbed to rot.
ylerjen almost 9 years

I can confirm you this feature is available only for Mac's Safari 6. Safari for Windows was stopped at the version 5 so it's not available.
James almost 6 years

It can still be found on Wayback Machine web.archive.org/web/20111114032339/http://…
Simon East almost 3 years

Firebug Lite is now completely dead, sadly.