| <!-- |
| * 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 describes the user interface provided by <span class="weinre">weinre</span>. |
| |
| <!-- ======================================================================= --> |
| <h2>the server home page</h2> |
| |
| <p><img src="images/server-home.png"> |
| |
| <p>The server home page is accessed at the root URL of the server, in this case |
| <tt>http://localhost:8081/</tt>. |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>This link will launch the |
| <span class="weinre">weinre</span> client page, which is the debugger itself. |
| Clicking this link will take you to the Remote panel, described below. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-b.png"> |
| <td>This is the URL of the script that you add to your |
| web page to allow it to be debugged by the client. |
| </table> |
| |
| <p>Additional links shown in this image are for this documentation, and some demo |
| pages. |
| |
| <p>Further down on the page, not shown in the image, are: |
| |
| <ul> |
| <li>The text of the <tt><script src=></tt> element you can copy and paste into your |
| web page. |
| <li>The source for a bookmarklet, to inject the debug code into any web |
| page displayed in your browser. |
| <li>Version numbers of <span class="weinre">weinre</span> and it's components. |
| </ul> |
| |
| <!-- ======================================================================= --> |
| <h2>the Remote panel</h2> |
| |
| <p><img src="images/panel-remote.png"> |
| |
| <p>The Remote panel is the initial panel of <span class="weinre">weinre</span>, |
| and displays some status regarding the server. |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>The top portion of all of the |
| <span class="weinre">weinre</span> panels shows the panel switcher. To switch |
| to a different panel, click on the panel's button. The current panel is displayed with |
| a highlight, as shown above for the Remote panel. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-b.png"> |
| <td>The Targets section of this page lists targets that are currently connected |
| to the server. A target is a web page that you are debugging. |
| In this case, there is one target connected the server. Information |
| about each target is displayed in the list, including host name / ip address, and |
| the URL the target is displaying. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-c.png"> |
| <td>The Clients section of this page lists the clients that are currently connected |
| to the server. A client is this user interface. Typically, there is just one - the client you are displaying |
| at the time. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-d.png"> |
| <td>The Server Properties section of this page displays the values of various server |
| properties currently in effect. Shown here are the hosts that are bound to the |
| server - which host names / ip addresses that the server will respond to. |
| </table> |
| |
| <p>The colors of the entries in the Targets and Clients list indicates their |
| status. Blue means the Target or Client is connected to the server, but not |
| yet connected to a peer. Green means the Target or Client is connected to a |
| peer, and you can start debugging. Red means the Target or Client has |
| disconnected from the server, and will eventually fade away and be removed |
| from the list. |
| |
| <p>In case there are multiple targets connected, you can switch which one you |
| are debugging by clicking on the item. |
| |
| <!-- ======================================================================= --> |
| <h2>the Elements panel</h2> |
| |
| <p><img src="images/panel-elements.png"> |
| |
| <p>The Elements panel displays your HTML DOM in a tree fashion, and properties |
| associated with selected elements. |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>The elements themselves may be expanded/collapsed via the disclosure buttons. |
| Elements and text can be edited by double-clicking the item to be edited. |
| Elements can also be deleted by selecting the element and then pressing the |
| delete button. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-b.png"> |
| <td>The sidebar area displays information about the selected element. In this case, |
| the Styles sidebar is expanded, showing relevant CSS rules. Some sidebars allow |
| editing of the contents. The Styles sidebar in particular allows you to add, edit |
| and remove properties and values by double clicking on them. |
| </table> |
| |
| <!-- ======================================================================= --> |
| <h2>the Resources panel</h2> |
| |
| <p><img src="images/panel-resources.png"> |
| |
| <p>The Resources panel shows WebSQL databases, and data stored in Local Storage |
| and Session Storage. |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>The left hand side of the Resources panel is the navigator. Expanding |
| the Databases entry will show all the Web SQL databases currently in use. |
| Expanding a particular database will show all the tables in that database. |
| |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-b.png"> |
| <td>The right hand side is the editor/viewer for whatever is selected in the |
| navigator pane. |
| When a database is selected, a prompt will appear in the editor/viewer area |
| where you can enter SQL statements to be executed. The results are displayed |
| inline. When a table is selected, all the rows from the table will be displayed. |
| When a Local Storage or Session Storage entry is selected, all the relevant keys |
| and values will be displayed. The keys and values in the Local Storage and |
| Session Storage tables can be edited by double-clicking. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-c.png"> |
| <td>The reload button will refresh the data from the target. |
| </table> |
| |
| <!-- ======================================================================= --> |
| <h2>the Network panel</h2> |
| |
| <p><img src="images/panel-network.png"> |
| |
| <p>The Network panel shows you information regarding XHR requests that you've |
| made. |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>Each XHR will be shown in a separate row in the table. Clicking the |
| path name of the XHR request will show additional information for that |
| request in the right side of the panel. |
| To display the table again, click the (x) |
| button in the left top corner of the information pane (not shown in the |
| image above). |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-b.png"> |
| <td>The "dots and lines" button can be used to change the table layout to |
| show less information in a more compact format. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-c.png"> |
| <td>The "not" button will clear the entries from the table. |
| </table> |
| |
| <!-- ======================================================================= --> |
| <h2>the Timeline panel</h2> |
| |
| <p><img src="images/panel-timeline.png"> |
| |
| <p>The Timeline panel is used to show events that are occurring in the target. |
| Currently only two types of events are shown: timers/intervals, and user-specified |
| events. Use <tt>console.markTimeline("A Label")</tt> to add a user-specified |
| event to the timeline with the specified label. |
| |
| <p>Note that timing events are not collected unless you enable the "record" |
| button (see below). |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>The left hand pane of the Timeline panel shows the events that have occurred. |
| Hovering over an entry will show additional detail about the event. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-b.png"> |
| <td>The right hand pane of the Timeline panel shows the events as they occurred |
| in time. Some events have other events associated with them, which will be shown |
| when the disclosure triangle is expanded. The top-most time line of the right |
| panel can have it's right and left hand edges moved to show a particular time |
| range in more detail. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-c.png"> |
| <td>The "dots and lines" button can be used to show and hide events that last |
| less than a fixed time (currently 15ms). |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-d.png"> |
| <td>The "record" button is used to start or stop event collection. When |
| <span class="weinre">weinre</span> starts, the record button is off (black). |
| When you click the record button to start collecting events, it will turn |
| red. |
| </table> |
| |
| <p><table><tr><td><img src="images/circled-e.png"> |
| <td>The "not" button will clear the current timing entries. |
| </table> |
| |
| |
| <!-- ======================================================================= --> |
| <h2>the Console panel</h2> |
| |
| <p><img src="images/panel-console.png"> |
| |
| <p>The Console panel is used to execute arbitrary JavaScript expressions/statements. It |
| also shows the output from various <tt>console</tt> methods, like |
| <tt>console.log()</tt>. |
| |
| <p>In the example above, the JavaScript statements entered by the user are in |
| blue, the output of the statements is just below it, and messages generated by |
| <tt>console.log()</tt> are in black. |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>The "not" button will clear the console. |
| </table> |
| |
| <p><img src="images/panel-remote-console.png"> |
| |
| <p>The Console can also be embedded in every panel, by clicking the "console" |
| button. |
| |
| <table><tr><td><img src="images/circled-a.png"> |
| <td>The "console" button will embed the console in the bottom half of the |
| other panels, or hide it if it's currently embedded in the other panels. |
| </table> |
| |