Changes between Version 17 and Version 18 of Web Inspector


Ignore:
Timestamp:
Jun 12, 2009 3:17:30 PM (15 years ago)
Author:
timothy@apple.com
Comment:

Changes to be more current.

Legend:

Unmodified
Added
Removed
Modified

  • Web Inspector

    v17 v18  
    11= Web Inspector =
    2 The Web Inspector allows you to view the page source, live DOM hierarchy and resources.
    3 
    4 http://webkit.org/blog/wp-content/uploads/2007/06/newinspector.png
    5 
    6 == Getting the Web Inspector ==
    7 The Web Inspector is enabled by default on all of the prebuilt [wiki:"Nightly Builds" nightly builds]. 
     2The Web Inspector allows you to view the page source, live DOM hierarchy, script debugging, profiling and more!
    83
    94== Enabling Web Inspector ==
    105
    11  * On the Mac, if you are using a locally built version of WebKit, you'll need to enter the following command in Terminal and restart Safari in order to use the Web Inspector (this command only needs to be run once):
     6 * Safari — Enable the Develop menu option in the Advanced preferences. Use the optional toolbar button, Develop menu or Inspect Element context menu to access to Web Inspector.
     7
     8 * Google Chrome — Enabled by default, use the Inspect Element context menu to access to Web Inspector.
     9
     10 * Any WebKit client —  Find the application's bundle identifier. Enter the following command once in Terminal, inserting the bundle identifier, and relaunch the application in order to use the Web Inspector.
    1211{{{
    13 defaults write com.apple.Safari WebKitDeveloperExtras -bool true
    14 }}}
    15 
    16  * OmniWeb also features the Web Inspector from version 5.5 on.  It can be enabled using the command above (replacing {{{com.apple.Safari}}} with {{{com.omnigroup.OmniWeb5}}}).
    17 
    18  * On Windows, you'll have make sure that the following lines are in your preferences file at the location
    19 {{{
    20 C:\Documents and Settings\<USERNAME>\Application Data\Apple Computer\Safari\WebKitPreferences.plist
    21 }}}
    22   (where <USERNAME> should be your Windows user name):
    23 {{{
    24     <key>WebKitDeveloperExtras</key>
    25     <true/>
    26 }}}
    27  * '''NOTE:''' If the above does not enable the Inspector for you, add the same key into the following file:
    28 {{{
    29 C:\Documents and Settings\<USERNAME>\Application Data\Apple Computer\Safari\Preferences\com.apple.Safari.plist
     12defaults write «bundle-identifier-here» WebKitDeveloperExtras -bool true
    3013}}}
    3114
    … …  
    4831Various HTML and JavaScript properties, including length of text nodes, offsetWidth/Height, class names, and parent/sibling information are vieweable in the Properties pane.
    4932
     33
     34See [http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/UsingtheWebInspector/UsingtheWebInspector.html Safari User Guide for Web Developers] for more details on other panels of the Web Inspector.
     35
    5036== Hacking on the Web Inspector ==
    51 Most of the Web Inspector's code is HTML, JavaScript, and CSS, so it's very easy to implement new features and fix bugs! Click here to see a [http://tinyurl.com/2vqypl list of Web Inspector bugs and feature requests]. Any of the bugs listed as "OS/Plt/Platform: All" are cross platform and should only require changes in the HTML, JavaScript, or CSS.
     37Most of the Web Inspector's code is HTML, JavaScript, and CSS, so it's very easy to implement new features and fix bugs! Click here to see a [http://tinyurl.com/2vqypl list of Web Inspector bugs and feature requests].
    5238
    53 See [wiki:ProposedWebInspectorUIRefresh plans for a refresh of the Inspector's UI] and [wiki:ProposedWebInspectorRearchitecting plans for a rearchitecting the Inspector].
    54 
    55 == Elsewhere ==
    56 See the item about [http://webkit.org/blog/41 Web Inspector] that [wiki:"WebKit Team#TimothyHatcherxenonreview" xenon] posted to the Surfin' Safari blog. And the [http://webkit.org/blog/108 blog post] announcing the redesigned Web Inspector.
     39== Related Blog Posts ==
     40[http://webkit.org/blog/197/web-inspector-redesign Web Inspector Redesign][[BR]]
     41[http://webkit.org/blog/108/yet-another-one-more-thing-a-new-web-inspector Yet another one more thing… a new Web Inspector!][[BR]]
     42[http://webkit.org/blog/41/introducing-the-web-inspector Introducing the Web Inspector]