Debugging iOS7 Safari CSS issues with web inspector

Question

I followed the steps to set up debugging webpage on iOS. It worked. However I see an issue with the inspector - it doesn't let me check the DOM and corresponding CSS. Anyone else has this issue? (Exact same issue when debugging using the simulator.)

Screenshot: http://screencast.com/t/E4fxPQwk14

Resource: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Thanks!

UPDATE: WebKit nightly works. Thank you Timothy Hatcher!

the need of the lighting cable makes this really annoying... — Gianfranco P., Sep 22 '13 at 13:51
Fortunately, not all devices with iOS7 require a Lightning cable. — MyNameIsKo, Sep 26 '13 at 21:11
It have happened on an iOS7 simulator too, I couldn't expand a DOM element, although I could still work in console window. — Tien Do, Sep 27 '13 at 15:53
Just to expand on this, the problem happens as soon as you click on the 'style' {} icon. If you are on one of the other tabs (e.g. 'Node' <>), you can still expand the DOM element. — Marco Fucci, Oct 17 '13 at 10:02

score 34 · Accepted Answer · answered Sep 18 '13 at 22:21

34

You need to use a WebKit nightly, Safari 6.1 or Mavericks to use Web Inspector with iOS 7.

answered Sep 18 '13 at 22:21

Timothy Hatcher

356
3
2

Safari 6.1 doesn't seem to be able to breakpoint a js app on the iPhone. – adib Oct 18 '13 at 06:04
1

OS X 10.7 n not supporter. Nightly builds of WebKit are not supported on OS X 10.7 at this time. – Anja Ishmukhametova Oct 31 '13 at 11:16
In case it helps someone: It took me a while to find a nightly that worked on my OS X 10.8.5 (Mountain Lion). Finally I'm using this one successfully: http://builds.nightly.webkit.org/files/trunk/mac/WebKit-SVN-r163565.dmg – rbarriuso Aug 23 '14 at 20:51

score 1 · Answer 2 · edited May 23 '17 at 12:26

1

If you don't have access to Mavericks, You can also use Chrome devtools via proxy.

Debug iOS 6+7 Mobile Safari using the Chrome DevTools

edited May 23 '17 at 12:26

Community

1
1

answered Oct 21 '13 at 22:04

BenG

1,756
15
17

... or, if you subscribe, [Adobe Edge Inspect](http://html.adobe.com/edge/inspect/) – Rick Davies Oct 25 '13 at 19:46

Debugging iOS7 Safari CSS issues with web inspector

2 Answers2