Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

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

June 16, 2013 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

 

Cats: ios, macOS, Tech, WebDev

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Copyright © 2023· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2023 · gee on Genesis Framework · WordPress · Log in