Now Web Tools is running the live preview and each time I hit save in Coda, the page will reload in Web Tools (sometimes the automatic reload doesn’t work, but a manual reload of the Web Tools page gets it back on track). I just fire up Coda and Safari in Split View, start up the live preview, then open the localhost address in Web Tools via the Safari extension. As such, I’ve been able to use Web Tools as a great way to view and edit the site’s responsive design while I’m working on the code. Coda puts the webpage up on a localhost server for Safari to display, but as long as Coda is open, this server is available to any web browser. As I’ve been working on a redesign of my personal website (mostly as a personal exercise and to have a design playground), I’ve been writing the code in Coda for iOS and using its live preview feature to see changes as I go in Safari. As such, it supports iPad multitasking, which works amazingly on my iPad Pro. Web Tools is a modern iOS app, designed with the iPad in mind. Just drag back and forth to see a website layout in different ways based on the width of the page. This feature is meant for testing responsive layouts of websites. The app includes a drag handle on the right side of the browser view which allows you to dynamically adjust the width of the displayed webpage. The last feature of Web Tools is very intriguing. This makes viewing the source of webpages just as easy as it is in Safari for Mac, and I’ve been really enjoying having this in my iOS toolbox. You’ll be launched into Web Tools with the page already loaded and the source displayed. Web Tools of course supports an extension, so anytime you wish to examine the code of a webpage that you’re visiting in Safari, simply open up the share menu and tap the Web Tools extension. Still, I would love to see the Style Rules section opened up to live editing of the actual CSS for selected elements. If you’re editing your own website, this is a great way to compare and contrast between multiple different style choices for various elements. While Web Tools does not (yet, at least) support live editing a site’s CSS (you can’t actually navigate through all of a site’s documents, just the main HTML page at this point) you are able to add and remove attributes to and from elements on the page. Here you Can see the element’s attributes, any style rules applied to it, and the element’s computed style. Selecting an element will display its details in the second pane of the inspector. You can expand and collapse whichever elements you want to navigate through the DOM. The inspector contains two panes, the first of which displays the HTML DOM tree for the web page. ![]() When you enable the inspector, it slides up to cover the bottom half of the web page (though you can easily drag to make it obscure more or less, depending on your preference). Web Tools has a very similar design to that of Safari’s web inspector for Mac. Load up a webpage in the address bar and tap the inspect button to see the web inspector slide up from the bottom. The address bar contains back and forward buttons, a reload button, and an inspect button. Web Tools is an extremely simple app, with no interface elements except an address bar and a browser window. I’ve tried other solutions for getting the source of web pages via iOS, but, at least on iPad, I haven’t seen any come close to being as well designed and implemented for the iPad’s bigger screen. Web Tools is a new app from developer James Finley of Ergo which aims to create a Safari-style web inspector for iPad.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |