Table of Contents

• Get started in Safari Developer Tools
  • Safari Developer Tools overview
  • Develop menu
  • Web Inspector
    • Elements tab
    • Network tab
    • Resources tab
    • Timelines tab
    • Debugger tab
    • Storage tab
    • Console tab
• Inspecting Webpages
  • Inspecting overview
  • Select the HTML for an element
  • Navigate the HTML
  • View the computed CSS
  • View node properties for a DOM node
  • View WebSocket connections
  • Filter network request data
  • Filter local storage values
  • Simulate responsive web content on Apple devices
• Editing HTML, CSS, and JavaScript
  • Editing overview
  • Edit an HTML element
  • Edit CSS rules
  • Edit CSS rules visually
  • Force a pseudostate on an element
  • Edit JavaScript
• Debugging JavaScript
  • Debugging overview
  • Add a JavaScript breakpoint
  • Edit a breakpoint
  • Add conditions to JavaScript breakpoints
  • Stepping through JavaScript code
  • Add, disable, or delete a DOM breakpoint
  • Add an XHR breakpoint
  • Add and modify watch expressions
  • Highlight type and code coverage during code execution
  • Log messages with the console
  • Debugging Web Workers
• Checking Performance
  • Performance overview
  • Record a timeline
  • Select timeline instruments to record
  • Change the time range for a timeline recording
  • Improve rendering performance
  • Improve resource load time
  • Improve slow function executions
  • Improve memory performance