Platform: iOS (iPhone only)
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
- 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.