shownotes_MCM20110508

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.
  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
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.
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'
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.
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.
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
  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'
Resources Inspector
  See individual resources on a page
  View, Documents (HTML), Stylesheets, Images, Scripts, XHR (XML Http Request), Fonts, and Other (Flash, etc.)
  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.
  Resources section lets you get to each resource and see it's contents
    For scripts and html you can see the code
    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'
    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.
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.
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.