{"id":1064,"date":"2012-05-13T12:33:01","date_gmt":"2012-05-13T19:33:01","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=1064"},"modified":"2012-05-13T12:33:01","modified_gmt":"2012-05-13T19:33:01","slug":"using-safaris-built-in-dev-tools","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2012\/05\/using-safaris-built-in-dev-tools\/","title":{"rendered":"Using Safari&#8217;s Built-In Dev Tools"},"content":{"rendered":"<p>Most web developers know of Firebug, a plugin for Firefox, that allows you to fine tune your website, and more specifically your CSS files. You can make real time updates to the site&#8217;s CSS and see how it changes the layout right before your very eyes. Indeed, very powerful. Well, the Safari browser on both Windows and Mac have this functionality built-in. This is great news for the iOS or OS X developer that wants to know exactly how a particular App will look on a phone or even an iMac.<\/p>\n<p>Turn on the dev tools by going to the Advanced menu in Preferences.<\/p>\n<p><a href=\"http:\/\/zsprawl.com\/iOS\/wp-content\/uploads\/2012\/05\/devtools.jpg\"><img decoding=\"async\" src=\"http:\/\/zsprawl.com\/iOS\/wp-content\/uploads\/2012\/05\/devtools.jpg\" alt=\"\" title=\"devtools\" width=\"580\" class=\"aligncenter size-full wp-image-1065\" \/><\/a><\/p>\n<p>Now you will have a new Developer&#8217;s menu at the top of your browser. Get quite familiar with these tools, and they are a life saver when you can&#8217;t figure out why a particular item is displaying funny.<\/p>\n<p><a href=\"http:\/\/zsprawl.com\/iOS\/wp-content\/uploads\/2012\/05\/devtools2.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/zsprawl.com\/iOS\/wp-content\/uploads\/2012\/05\/devtools2-300x162.jpg\" alt=\"\" title=\"devtools2\" width=\"300\" height=\"162\" class=\"aligncenter size-medium wp-image-1066\" \/><\/a><\/p>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most web developers know of Firebug, a plugin for Firefox, that allows you to fine tune your website, and more specifically your CSS files. You can make real time updates to the site&#8217;s CSS and see how it changes the layout right before your very eyes. Indeed, very powerful. Well, the Safari browser on both <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/05\/using-safaris-built-in-dev-tools\/#more-'\" class=\"more-link\"><br \/>more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,43],"tags":[36,9,5,69],"class_list":["post-1064","post","type-post","status-publish","format-standard","hentry","category-blog","category-css","tag-css3","tag-development","tag-ios","tag-safari"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1064"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=1064"}],"version-history":[{"count":2,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1064\/revisions"}],"predecessor-version":[{"id":1068,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1064\/revisions\/1068"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=1064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=1064"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=1064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}