source: ether_statistics/web/resources/js/windows_js_1.3/documentation/debug.html @ 569

Last change on this file since 569 was 569, checked in by vmipsl, 12 years ago

Nouveau projet
File size: 4.2 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3
4<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
5<head>
6        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7
8        <title>Prototype Window Class : Debug</title>
9        <!--  Prototype Window Class Part -->
10  <script type="text/javascript" src="../javascripts/prototype.js"> </script> 
11        <script type="text/javascript" src="../javascripts/effects.js"> </script>
12        <script type="text/javascript" src="../javascripts/window.js"> </script>
13        <script type="text/javascript" src="../javascripts/debug.js"> </script>
14  <script type="text/javascript" src="../javascripts/extended_debug.js"> </script>
15       
16        <link href="../themes/default.css" rel="stylesheet" type="text/css" >    </link>
17        <link href="../themes/debug.css" rel="stylesheet" type="text/css" >      </link>
18       
19  <!--  Doc Part-->
20  <link href="stylesheets/style.css" rel="stylesheet" type="text/css" >  </link>
21        <script type="text/javascript" src="js/application.js"> </script>               
22</head>
23
24<body>
25  <script>Application.insertNavigation('debug')</script>
26  <div id="wrapper">
27  <div id= "content" class="content">
28 
29In addtion of <tt>window.js</tt>, there is a little javascript <tt>debug.js</tt> more usefull than the alert javascript function to display debug information.
30
31There are few functions:
32<ul>
33  <li> <tt>showDebug()</tt> : to open the debug window.</li>
34  <li> <tt>hideDebug()</tt> to remove it.</li>
35  <li> <tt>debug(message, reverse)</tt>: to display a message in the debug window. reverse is optional if you want to append text at the beginning of the window instead of the end.</li>
36  <li> <tt>clearDebug()</tt>: to clear debug window content.</li>
37</ul>
38Just add this lines in your HTML page
39<xmp><script type="text/javascript" src="/javascripts/prototype.js"> </script>
40<script type="text/javascript" src="/javascripts/window.js"> </script>
41<script type="text/javascript" src="/javascripts/debug.js"> </script>
42
43<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"></link>
44<link href="/stylesheets/themes/debug.css" rel="stylesheet" type="text/css"></link>
45</xmp>
46
47<br/>And this in your code
48<xmp><script>showDebug()</script>
49</xmp>
50<br/>This window uses setCookie() to save its size and position. You will see after using it you cannot live without :).<br/>
51<a href="javascript:showDebugWindow()">Click here</a> to open the debug window that displays mouse coordinates.
52
53<script>
54var mouseTracker = null;
55var MouseTracker = Class.create();
56MouseTracker.prototype = {
57    initialize: function() {   
58        this.eventMouseMove = this.mouseMoved.bindAsEventListener(this);
59        Event.observe(document, "mousemove", this.eventMouseMove);
60    },
61    destroy: function() {
62      Event.stopObserving(document, "mousemove", this.eventMouseMove);
63    },
64    mouseMoved: function(event) {
65        var pointer = [Event.pointerX(event), Event.pointerY(event)];
66        clearDebug();
67        debug("Mouse  : " + pointer[0] + "," + + pointer[1]);
68    }
69}
70
71function showDebugWindow() {
72    if (mouseTracker == null)
73        mouseTracker = new MouseTracker();
74    hideDebug();
75    showDebug();
76}
77
78</script>
79
80<h2 id="addon">Add on</h2>
81Nick Hemsley has done a nice add-on to the debug window that allows you to inspect any object.<br/>
82<a href="javascript:editAddOn()">Click here</a> to inspect the H2 "Add on" title.
83
84<script>
85function editAddOn(){
86  if (mouseTracker != null) {
87    mouseTracker.destroy();
88    mouseTracker = null;
89  }
90  showDebug();
91  clearDebug();
92  inspect($('addon'));
93}
94</script>
95
96<h2 id="addon">Add on - extended</h2>
97Jason Pollard has included the Nick's add-on inside the window debug by adding a "inspect" icon in the top bar. <br/>
98Click on the <img src="../themes/default/inspect.gif"> icon and then click on an element in the page you want to inspect.<br/>
99He has also included an eval text field with history (use up and down keys).<br/><br/>
100To use it just include <tt>extended_debug.js</tt> after <tt>debug.js</tt>.<br/>
101
102<a href="javascript:showExtendedDebug()">Click here</a> to open the extended debug window.
103
104  </div>
105</div>
106<script type="text/javascript">Application.addRightColumn()</script>
107
108</body>
109</html>
Note: See TracBrowser for help on using the repository browser.