|
 |
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.
|
|
|
|