
<!--
 * weinre is available under *either* the terms of the modified BSD license *or* the
 * MIT License (2008). See http://opensource.org/licenses/alphabetical for full text.
 * 
 * Copyright (c) 2010, 2011 IBM Corporation
-->

<p><span class="weinre">weinre</span> is <b>We</b>b <b>In</b>spector <b>Re</b>mote.
Pronounced like the word "winery".  Or maybe like the word "weiner".  Who knows,
really.

<p>Interesting places:
<ul>
<li>GitHub: <a href="https://github.com/phonegap/weinre">https://github.com/phonegap/weinre</a>
<li>Google Group: <a href="http://groups.google.com/group/weinre">http://groups.google.com/group/weinre</a>
<li>weinre documentation: <a href="http://phonegap.github.com/weinre">http://phonegap.github.com/weinre</a>
<li>Google Chrome Developer Tools: <a href="http://code.google.com/chrome/devtools/docs/overview.html">http://code.google.com/chrome/devtools/docs/overview.html</a>
</ul>

<p>It's a debugger for web pages, like 
FireBug (for FireFox)
and 
Web Inspector (for WebKit-based browsers), except it's designed
to work <b>remotely</b>, and in particular, to <b>allow you debug web pages
on a mobile device such as a phone</b>.

<p>If you aren't familiar with FireBug or Web Inspector, 
<span class="weinre">weinre</span> isn't going to make too much sense to you.
<span class="weinre">weinre</span> reuses the user interface code from the
<a href="http://trac.webkit.org/wiki/WebInspector">Web Inspector project at WebKit</a>,
so if you've used Safari's Web Inspector or Chrome's Developer Tools,  
<span class="weinre">weinre</span> will be very familiar.  If you're not
familiar with Web Inspector, the link above to Google Chrome Developer Tools
provides some documentation Real Web Inspector, which <span class="weinre">weinre</span> is based on.

<!--
<div class="note">
<p>NOTE: Please note that <span class="weinre">weinre</span> is still under development and 
is not fully operational.  
The current version only supports the following functionality:

<ul class="spaced">
<li>basic console interaction, to capture <tt>console.log()</tt> messages, and 
interactively execute JavaScript in the web page
<li>displaying the DOM in the elements panel
</ul>

</div>
-->

<p>Here's what you can do with it:

<p><img src="images/gmail-green-target-client.jpg">

<p>Two screen captures are shown above.  

<p>The screen capture on the left is from an 
iPod Touch, running the Mobile Safari app, visiting a browser-based email web site
you may be familiar with.

<p>The screen capture on the right is the from a laptop computer, running the
<span class="weinre">weinre</span> debug client, debugging the web page on the left.  The DOM being displayed
in the elements panel is from the HTML being displayed in the web browser on the iPod Touch.

<p>You might think that green background in the email client is a bit horrifying.
It's not normally green.  I made it green by executing the following JavaScript code
in the <span class="weinre">weinre</span> console area (as you can see above):

<pre>
document.body.style.background = "green"
</pre>

<p>If you are familiar with WebKit's Web Inspector,
a partial list of differences between it and <span class="weinre">weinre</span>
are listed below:

<ul class="spaced">

<li><span class="weinre">weinre</span> does not make use of any 'native' code, 
it's all JavaScript (and currently Java code for the 'server').

<li>Because <span class="weinre">weinre</span> doesn't use 'native' code, 
it's functionality is limited.  For instance, source level debug of JavaScript
is not possible.
  
<li>Because <span class="weinre">weinre</span> doesn't use 'native' code, 
the debug target code will run on browsers
without specialized debug support.  For instance, a browser running on your phone.
  
<li><span class="weinre">weinre</span> supports 'remote' interaction, 
so you can run the debugger user interface on one 
machine and can debug a web page running
on another machine.  For instance, debug a web page displayed on your phone from your
laptop.
  
<li>Because <span class="weinre">weinre</span> supports 'remote' interaction, 
multiple debug clients can be debugging the same debug target at the same time.

<li>One thing <b>not</b> different from Web Inspector is that the debug client
user interface only runs on WebKit-based browsers.  Sorry folks.

</ul>

<p>Find out more by clicking one of the links at the top or bottom of the page 
- to see a walkthrough of
how to use it, visit the <a href="TestDrive.html">Test Drive</a>.

<!-- ======================================================== -->
<h2>Supported Libraries and Platforms</h2>

<p>Generally version numbers listed here are the earliest
versions of the relevant thing that have been tested.
Later versions of those things are also hopefully supported,
but let us know.

<h3>Platforms not supported</h3>

<ul>
<li>iOS 3.1.3 or earlier
<li>webOS 1.45 or earlier
</ul>

<h3>Libraries not supported</h3>

<ul>
<li>versions of Prototype.js before version 1.7 are not supported,
as they do not support the <tt>JSON.stringify()</tt> API correctly.  You
will get an <tt>alert()</tt> in the web page you are debugging if you
attempt to debug it with weinre and you are using an unsupported
version of Prototype.js.
</ul>

<h3>Platforms supported - debug client</h3>
<p>The browser where the debugger user interface runs.

<ul>
<li>weinre Mac application - Mac OS X 10.6 64-bit
<li>Google Chrome 8.x
<li>Apple Safari 5.x 
</ul>

<h3>Platforms supported - debug target</h3>
<p>The browser with the page you are debugging.

<ul>
<li>Android 2.2 Browser application
<li>Android 2.2 w/PhoneGap 0.9.2
<li>iOS 4.2.x Mobile Safari application
<li>BlackBerry v6.x simulator
<li>webOS 2.x (unspecified version)
</ul>