CODEWITHSUNDEEP
javascriptcssipadsafarimobile-safari
copenndthagen
copenndthagen

Reputation: 50760

iPad Safari Development toolbar

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?

Upvotes: 32

Views: 80231

Answers (7)

Fandango68
Fandango68

Reputation: 4888

Unless you have a Mac computer, with the same Safari version as the one in the iPad/iPhone, you're out of luck - as many here have already said.

However, there is a way using Node.js, which I am stealing from here, for this "answer".

The article refers to Windows 10, but I've tested this with Windows 11 and it works like a charm.

I won't repeat the steps in the website here, but trust me it works.

Upvotes: 0

kaznovac
kaznovac

Reputation: 1582

There is an extension for i[Pad]Os Safari Web Inspector on App Store, should work with the iPadOS 15+.

This is how it's described on the author's site:

Web Inspector is a Safari extension on iOS and iPadOS that works like its desktop counterpart but is less powerful. It allows web developers to edit web pages on the fly, debug JavaScript, and more.

Upvotes: 2

honk31
honk31

Reputation: 4377

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..

Upvotes: 57

Winfield Trail
Winfield Trail

Reputation: 5695

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.

Upvotes: 26

jrullmann
jrullmann

Reputation: 2978

Safari iPad doesn't have a development tool, but it does have a debug toolbar. It's features include:

  1. Viewing messages sent to the console
  2. Viewing JavaScript errors
  3. Viewing CSS errors

So it's not great for development, but it's a lot better than nothing. Here's how to enable it:

  1. Open settings
  2. Safari
  3. Advanced
  4. Enable debug console

You should then see a banner at the top of web pages with messages from the debug console.

Upvotes: -1

James
James

Reputation: 1712

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/

Upvotes: 6

Laurenz
Laurenz

Reputation: 27

There is a set of developer tools in Safari. Go to Settings > Advanced and take a good look :)

Upvotes: -4

Related Questions