weinre.doc/TestDrive.body.html

<!--
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
-->

<p>This page gives a walk through of using <span class="weinre">weinre</span> to
debug a sample page that is provided with <span class="weinre">weinre</span> itself.  Read
this walk through first, then follow along and run <span class="weinre">weinre</span> yourself
to make sure it's installed and running correctly.

<p>You may also want to check out
<a href="http://www.youtube.com/watch?v=gaAI29UkVCc">the movie</a>, which
shows a walk through with the demo page.

<div class="note">
<p>NOTE: The images below are from a slightly older version of weinre and the
demo page, but are close enough.
</div>

<p>After you're done with the
walk through, if you want to learn how to debug your own web pages with
<span class="weinre">weinre</span>,
head to the
<a href="Running.html">Running page</a> for more information.

<p>The first thing to do is to start the
<span class="weinre">weinre</span> debug server.  The debug server is
a specialized HTTP server which is the middleman between the debug
user interface, and your remote web page.  Both the debug user interface
and the remote web page will communicate via HTTP to the debug server.

<p>The default configuration of the server is to only bind to localhost,
so that the server can only communicate with clients running on the
same machine.  It shouldn't
be possible for a browser on another machine to connect to this
server.  To debug a web page on a remote device (later), you'll need to
bind to something other than just localhost.  The default configuration
is the safe one, and good enough to run this walk through.

<p>To start the server,
<a href="Installing.html">install the <tt>weinre.node</tt> server</a>,
then run the following command:

<pre>
weinre -httpPort 8081
</pre>

<p><img src="images/weinre-con-01-h.jpg">

<p>You should see some output in your console,
like this:

<p><img src="images/weinre-con-02-h.jpg">

<p>If you see messages about "Address in use",
that means that some other program is using port 8081, and so you'll need to
use a different one.

<p>Note that the server is now running.
When you are ready to stop the server, kill the
program with Ctrl-C or whatever.

<p>Now, let's go to the
server's home page, at
<tt><a href="http://localhost:8081/">http://localhost:8081/</a></tt>.

<p class="note">Note: <span class="weinre">weinre</span> debug client is currently only
supported in WebKit-based browsers, like Google's Chrome and Apple's Safari
browsers.  You can also use Internet Explorer if you have Google Chrome Frame
installed.

<p>It should look something like this (the red arrows were added to
the image for emphasis):

<p><img src="images/weinre-frn-01-h.jpg">

<p>The top
arrow is pointing to a link to the debug client.
This page is the Web Inspector user interface that
you'll be using to debug.  We'll click that link
in a second.

<p>The bottom arrow is pointing to a link
to a debug target provided as a demo in the server.
We'll click that link a little later.

<p>Time to click the link for the debug client.
Note that you probably want to open this page in
another window (not just another tab, and not
replacing this page).
The link should be
<tt><a href="http://localhost:8081/client">http://localhost:8081/client</a></tt>.

<p>You should see the following page in your browser:

<p><img src="images/weinre-cli-01-h.jpg">

<p>The page shown above is the Web Inspector
user interface for the debugger.  You should have
landed on the "Remote" panel; there are tabs for three panels
shown, at the
top of the web page - "Remote", "Elements", and "Console".

<p>The "Remote" panel
provides information about what clients and targets
are connected to the server, and other goodies.

<p>The "Remote" panel is not included with the desktop browser's
version of Web Inspector.  But the other two panels,
"Elements" and "Console" are the exact same panels from the
desktop browser version of Web Inspector.

<p>Right now, the "Remote" panel just shows one client connected.
That's you!  This web page, in particular.

<p>OK, the debug client is running, so let's start a
debug target.  Go back to the tab or window with the
server home page displayed (showing the two red
arrows above).

<p>Click on the link pointed to by the other red arrow,
for the "target demo".  The link should be:
<tt><a href="http://localhost:8081/demo/weinre-demo.html">http://localhost:8081/demo/weinre-demo.html</a></tt>.
Again, you probably want to open this page in
another window (not just another tab, and not
replacing this page).

<p><img src="images/weinre-tar-01-h.jpg">

<p>The page shown above is the demo target.  Pretty simple.
Not much going on.  And yet, it should have connected to
the debug server.  How would you know?

<p>Let's check by going back to the debug client to see what it says.

<p><img src="images/weinre-cli-03-p.jpg">

<p>You should now see that there's a target connected, as indicated
by the entry in the Targets section.  That's
your demo page - you know because it shows the URL.

<p>It's also green, meaning that a client is connected to it.  That's you!
The entry for your client also turned green, indicating that it's connected
to a target.

<p>The debug client will always attempt to connect to the most recently
connected debug target.  But you can also click on a target to
explicitly switch to it.

<p>Now what?  Try clicking the Elements tab, as indicated
by the red arrow below.

<p><img src="images/weinre-cli-03-h.jpg">

<p>The Elements panel will be displayed, and you're now looking at the DOM of the demo page,
as shown below.

<p><img src="images/weinre-cli-04-p.jpg">

<p>Let's play with the console.  Click the console
expander, as indicated by the red arrow below.

<p><img src="images/weinre-cli-04-h.jpg">

<p>The console is now open, as shown below.

<p><img src="images/weinre-cli-05-h.jpg">

<p>What shall we do?

<p>The first thing I always try is to execute the
following line in the console:

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

<p>Guess what that does?

<p><img src="images/weinre-cli-06-h.jpg">

<p><img src="images/weinre-cli-07-h.jpg">

<p>Well, not much in this page.  But check back at
the page with the demo running on it.

<p><img src="images/weinre-tar-02-h.jpg">

<p>Glorious!

<p>Well, that's it, just to show you the basic operation.
Explore a bit more, try reloading the debug target demo,
and the debug client, etc, etc.

<p>Are you ready to debug your own web pages?  Head to
<a href="Running.html">the Running page</a> for more information.