Maccast Members 2011.05.08 - Safari's Develop Menu
V Enabling Developer Tools
* Even if you aren't a web developer there are some cool things you can do when you have Safari's Developer menu enabled.
V To enable
* Under the 'Safari' menu, go to 'Preferences…' and then to the 'Advanced' tab
* At the bottom, check the 'Show Develop menu in menu bar' box
* Now a new 'Develop' menu will appear in the menu bar just after the 'Bookmarks' menu
V Open a page in another App
* Ever hit a site and it's just not working in Safari?
* Develop-->Open With… let's yo quickly send the page you're on to another App. Firefox, Chrome, etc.
* Don't have to drag or copy paste, etc.
V Changing your browser User Agent
* The user agent string is passed in the request header and by the browser and can be used by a web server to identify a browser and serve up different content based on browser features or block content to a specific browser all together.
* This is why some sites can display a special "mobile" version automatically for iOS devices, or block Mac browsers if they say they don't support Macs.
* You can 'spoof' the user agent string and sometimes enable access to a blocked site or view the alternate version.
* Go to 'Develop'-->'User Agent'
V Disabling some page elements
* A whole host of options at the bottom of the menu for disabling stuff
* Caches, Images, Styles, Javascript, etc.
* Turning off Caches will force pages to load the full site from the server every single time.
* Turning off images can temporarily get rid of distracting ads, etc.
* Turning off style will remove all the custom formatting from a page
* Can be helpful to turn off Javascript "on-the-fly" if you have a site that's throwing errors or you just want to avoid an annoying HTML 5 animation.
V The Web Inspector
* Develop-->Web inspector
* 7 tabs (Elements, Resources, Scripts, Timeline, Profiles, Storage, and Console)
* We'll look at 3, Elements, Resources, and Storage.
* Scripts, Timeline, Profiles, and Console are great for doing web debugging.
V Elements Inspector
* Will let you go through all the HTML and CSS Elements on a page
* Expand an element and as you roll over it it will highlight in the browser window
V If you click on an element you can see it's Style attributes on the column on the right
* Click the checkboxes and you can turn individual style elements on and off and see how the page responds
* Double click on an element and you can change it's properties.
* Click the 'Cog' icon and you can add new Style rules on the fly.
* Right+Click on text in the main HTML area and choose 'Edit text' and you can change the text. Hit enter to see the page live update.
* Right+Click and 'Edit as HTML' to edit the HTMl on the fly
* Right+Click and 'Delete node'
V Resources Inspector
* See individual resources on a page
* View, Documents (HTML), Stylesheets, Images, Scripts, XHR (XML Http Request), Fonts, and Other (Flash, etc.)
V 2 Graphs. Time and Size. See how long each resource takes to load and which are the biggest files
* iTunes Style "line" graph summary for categories
* Bar charts to show times or sizes, can see start end end times.
V Resources section lets you get to each resource and see it's contents
* For scripts and html you can see the code
V Images are really useful, you get an image preview (click on 'content' tab in the pane on the right).
* Can sort out all the images loaded on the page in 1 view.
* Great is a sight has right clicks disabled on images (don't steal).
* In the content view you can right+click to 'Open in new Window', 'Download Image', or 'Copy Image'
V Other can be useful for getting at embedded elements, like MOV or FLV files
* YouTube, you can click on the 'videoplayback' element and see the URL in the 'Headers' tab under 'request URL'
* Copy and paste that into your URL bar and Safari will download the source FLV file.
V Storage Inspector
* Databases, Local Storage, Session Storage, and Cookies
* You cold get to the Cookies via Safari-->Preferences-->Security-->Show Cookies, but that displays all cookies
* Accessing the item from this inspector displays just the cookies relevant to the site your currently on
* Select cookies from the list and click the "X" to delete them.
V Snippet Editor
* If you want to start learning HTML and CSS this can be a handy tool
* Split pane and when you type little bits of HTML and CSS in the top pane it updates on the bottom
* No need to write, save, load in browser
* Can be helpful in conjunction with using the Elements Inspector.