Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

Viewing the Source Code on iPhone and iPads using Safari Webkit Development Tools

1 Comment

To view the html or css source code on iOS devices like the iPhone and iPad there is another quicker method than using Adobe Edge Inspector – and that is to use Safari’s webkit web inspector. This will work on devices with iOS6 plus and a modern Safari version. You can also use the iOS simulator instead of an actual physical device.

Set up the iOS Device

webkit-ios-source-code-on

  • Connect iOS device to Mac via USB
  • Go to Settings > Safari > Advanced > Web Inspector = On
  • Launch a web page in mobile Safari

Set Up Safari

inspect-iphone-webkit-safari

  • Enable ‘Developer’ tools – Safari >Preferences > Advanced > Show Develop menu in Menubar
  • Go to the Develop Menu and select your iPhone and inspectable page

Using WebKit Tools

web-inspector-mobile-device

Once you choose the page to inspect, up come the tools and making selections will also highlight the code on the actual device ready to be manipulated.

highlighted-area-of-inspection

Using the iOS Simulator

You can also do the same things with the iOS simulator

ios-simulator-on

  • Install Xcode
  • Launch iOS Simulator – Xcode > Open Developer Tool > IOS Simulator
  • In the simulator, go Settings > Safari >Advanced > Web Inspector > On
  • Launch a page in mobile Safari
  • Inspect on desktop Safari

ios-simulator-inspect-web-page

With iOS Simulator you can also swap devices and inspect in those too…

ipad-ios-simulator

 

ipad-ios-simulator-webkit

ipad simulator