Debugging Websites Using Safari's Integrated Developer Tools

Thu,6/12 15:30
Safara's Develop Menu

Inside the Develop menu

Snippet editor
Quickly test fragments of HTML markup

Disable Options
  • Caches
testing network loading
always get resources from the network
  • Images style and JavaScript
testing semantic markup
simulate a text only browser
  • Runaway JavaScript Timer
Testing long-running scripts

Use Web Inspector

  • No code instrumentation
  • removes the need for debugging code
  • works with production sites
  • provides addition
And In Webkit nightly can use debugging scripts

The Web Inspector lets you browse the live DOM hierarchy in a compact HUD style window, catering to the needs of web developers and WebKit hackers alike.

The Web Inspector highlights the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name.

One of the unique features of the inspector is the ability to root the DOM hierarchy by double clicking a node to dig deeper. This lets you easily manage large nested pages and only focus on a particular sub-tree with minimal indentation.

Under the Style pane we show all the CSS rules that apply to the focused node. These rules are listed in cascade order with overridden properties striked-out—letting you truly see how cascading stylesheets affect the page layout. All shorthand properties have a disclosure-triangle to show and hide the expanded properties created by the shorthand.

0 评论: