Apps

Codable

Platform: iOS (iPhone only)

Price: Free

Codable for iPhone provides these primary features:

  • resizable viewport with scaling, allowing you to view any URL as if you were on a smaller or larger iOS screen size
  • JavaScript console support (including catching logs from page as well as entering JS to evaluate)
  • Rendered DOM node navigation, with HTML/CSS manipulation in a pane once you find the DOM node level you wish to edit

There’s also the ability to view the page’s pre-rendered source, as well as a few other settings. Codable supports all iPhone screen sizes, including landscape mode to allow a little more width flexibility when resizing the webview.

Codable heavily uses the WKWebView.evaluateJavaScipt() API to get and set browser console or DOM/source data. The codebase is in Swift, with minimal leverage of third party libraries.

The desire for this app came about from me getting work-related messages about front-end issues that I could not debug while away from a computer. In these cases all I wanted was a basic subset of desktop browser developer tools, such as the console or node list. There are plenty of iOS tools to view a webpage’s source, but very few let you browse the rendered source. Plus, its a nifty way to make use of all the window-extension and DOM-querying tricks I’ve hacked my way through, but while still developing on iOS.

Codable on the App Store

Codable screenshot Codable screenshot Codable screenshot Codable screenshot Codable screenshot Codable screenshot Codable screenshot Codable screenshot Codable screenshot