Introduction Process Accessing developer tool Shortcuts Anatomy Navigation sidebar Resources panel Storage Instrument Search Issue Debug Breakpoint Log Content browser Details sidebar
Safari 6 web developer tool has substantial makeover from previous versions. It helps to prototype, debug and optimize web sites and safari extensions.
Web development process can be generalized as follows. Developer tool can accelerate this process.
Test & debug Test in different browsers and platforms. Web Inspector shows all the bugs and structural error in the code. Console, issue navigator, Breakpoint navigator, database navigator & log will help to identify error.
Accessing developer tool
By default developer tool is not activated. Activate it from preference > advanced tab pane.
Safari developer tool shortcuts
Web Inspector :
cmd + opt + I [mac] ctrl + alt + I [win]
cmd + opt + c [mac] ctrl + alt + c [win]
Clear console :
cmd + K or ctrl+ L [mac] ctrl + L [win]
Step Out :
F8 or cmd + shift + ;
Step Into :
F7 or cmd + ;
Step over :
F6 or cmd + ‘
cmd +/ or cmd+shift+y
Web developer is divided into 3 main sections.
- Navigation sidebar
- Content browser
- Details sidebar
This pane hosts main sections of web developer tool. It has a global search to filter resources/items in the currently selected navigator item.
Resource panel It shows all the resources used in current site – images, scripts, frames, stylesheets etc.
Storage Storage helps with debugging client side storage. You can inspect local key-value storage, offline application cache, web database and cookies. Now you can edit and delete local storage data. Indexed DB is missing. It is possible to execute SQL command against displayed database. One problem I noticed is the missing clear command.
- Network Request Timeline
- CSS Layout calculations
When network is selected content browser will show all the detailed list of resources that took the bandwidth & time to took to load. Hovering each item in content browser will bring a small icon that leads to the exact resource. Ex: image, js etc..
Search Search panel helps to search file contents.
Issue Issues will list all the site structural and script issues. It shows all the errors encounter during the site load.
Debug Script execution can be paused and examined in debug navigator.
Breakpoint From resource navigator you can set breakpoints and can view the variables and call stacks.
Log It is the real console. There is a quick console and a log navigator. You can execute all console commands & scripts here.
Content browser will show contents based on the selection made on the Navigator sidebar. You can access DOM of the current site from the content browser.