├── README.md
├── index.html
├── raphael-zpd.js
└── screenshot.png
/README.md:
--------------------------------------------------------------------------------
1 | Xdebug Trace Visualizer
2 | =======================
3 |
4 | A lightweight Xdebug trace file visualizer that helps you to uncover performance issues and gain insight into your code.
5 |
6 | Use the application online at https://chrisakers.github.io/Xdebug-Trace-Visualizer/.
7 |
8 | Configuration
9 | -----
10 |
11 | Make sure you have this set in your ```php.ini```/```xdebug.ini```:
12 | ```
13 | xdebug.trace_format = 1
14 | ```
15 |
16 | I also recommend setting ```xdebug.trace_enable_trigger = 1```, so that you can create [bookmarklets](https://www.jetbrains.com/phpstorm/marklets/) for enabling/disabling the tracer.
17 |
18 | Usage
19 | ----
20 | Open [Xdebug-Trace-Visualizer](https://chrisakers.github.io/Xdebug-Trace-Visualizer/) in your browser and drag an xdebug trace file into the window. The files can be found in the folder defined in ```xdebug.trace_output_dir``` (defaults to ```/tmp```).
21 |
22 | Example
23 | ---
24 | 
25 |
26 | Contributers
27 | -----
28 |
29 | Thanks to:
30 | - [@olemartinorg](https://github.com/olemartinorg/) for usability, documentation, and bug fixes
31 | - [@jammaloo](https://github.com/jammaloo) for call freezing and displaying optional params
32 |
33 |
34 | License
35 | =======
36 |
37 | Xdebug Trace Visualizer is freely distributable under the terms of the MIT license.
38 |
39 | Copyright (c) 2012 Chris Akers
40 |
41 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation
42 | files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use,
43 | copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
44 |
45 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
46 |
47 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
48 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Xdebug Trace Visualizer
6 |
7 |
8 |
9 |
43 |
44 |
45 |
Drag and drop a trace-file here
46 |
47 |
51 |
52 |
53 |
54 |
55 |
328 |
329 |
330 |
--------------------------------------------------------------------------------
/raphael-zpd.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Raphaël-ZPD: A zoom/pan/drag plugin for Raphaël.
3 | * ==================================================
4 | *
5 | * This code is licensed under the following BSD license:
6 | *
7 | * Copyright 2010 Gabriel Zabusek (Interface and feature extensions and modifications). All rights reserved.
8 | * Copyright 2010 Daniel Assange (Raphaël integration and extensions). All rights reserved.
9 | * Copyright 2009-2010 Andrea Leofreddi (original author). All rights reserved.
10 | *
11 | * Redistribution and use in source and binary forms, with or without modification, are
12 | * permitted provided that the following conditions are met:
13 | *
14 | * 1. Redistributions of source code must retain the above copyright notice, this list of
15 | * conditions and the following disclaimer.
16 | *
17 | * 2. Redistributions in binary form must reproduce the above copyright notice, this list
18 | * of conditions and the following disclaimer in the documentation and/or other materials
19 | * provided with the distribution.
20 | *
21 | * THIS SOFTWARE IS PROVIDED BY Andrea Leofreddi ``AS IS'' AND ANY EXPRESS OR IMPLIED
22 | * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
23 | * FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL Andrea Leofreddi OR
24 | * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
25 | * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
27 | * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
28 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
29 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | *
31 | * The views and conclusions contained in the software and documentation are those of the
32 | * authors and should not be interpreted as representing official policies, either expressed
33 | * or implied, of Andrea Leofreddi.
34 | */
35 |
36 | var raphaelZPDId = 0;
37 |
38 | RaphaelZPD = function(raphaelPaper, o) {
39 | function supportsSVG() {
40 | return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
41 | }
42 |
43 | if (!supportsSVG()) {
44 | return null;
45 | }
46 |
47 | var me = this;
48 |
49 | me.initialized = false;
50 | me.opts = {
51 | zoom: true, pan: true, drag: true, // Enable/disable core functionalities.
52 | zoomThreshold: null, // Zoom [out, in] boundaries. E.g [-100, 10].
53 | };
54 |
55 | me.id = ++raphaelZPDId;
56 | me.root = raphaelPaper.canvas;
57 |
58 | me.gelem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
59 | me.gelem.id = 'viewport'+me.id;
60 | me.root.appendChild(me.gelem);
61 |
62 | function overrideElements(paper) {
63 | var elementTypes = ['circle', 'rect', 'ellipse', 'image', 'text', 'path'];
64 | for(var i = 0; i < elementTypes.length; i++) {
65 | overrideElementFunc(paper, elementTypes[i]);
66 | }
67 | }
68 |
69 | function overrideElementFunc(paper, elementType) {
70 | paper[elementType] = function(oldFunc) {
71 | return function() {
72 | var element = oldFunc.apply(paper, arguments);
73 | element.gelem = me.gelem;
74 | me.gelem.appendChild(element.node);
75 | return element;
76 | };
77 | }(paper[elementType]);
78 | }
79 |
80 | overrideElements(raphaelPaper);
81 |
82 | function transformEvent(evt) {
83 | if (typeof evt.clientX != "number") return evt;
84 |
85 | svgDoc = evt.target.ownerDocument;
86 |
87 | var g = svgDoc.getElementById("viewport"+me.id);
88 |
89 | var p = me.getEventPoint(evt);
90 |
91 | p = p.matrixTransform(g.getCTM().inverse());
92 |
93 | evt.zoomedX = p.x;
94 | evt.zoomedY = p.y;
95 |
96 | return evt;
97 | }
98 |
99 | var events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'touchstart', 'touchmove', 'touchend', 'orientationchange', 'touchcancel', 'gesturestart', 'gesturechange', 'gestureend'];
100 |
101 | events.forEach(function(eventName) {
102 | var oldFunc = Raphael.el[eventName];
103 | Raphael.el[eventName] = function(fn, scope) {
104 | if (fn === undefined) return;
105 | var wrap = function(evt) {
106 | return fn.apply(this, [transformEvent(evt)]);
107 | };
108 | return oldFunc.apply(this, [wrap, scope]);
109 | }
110 | });
111 |
112 | //raphaelPaper.canvas = me.gelem;
113 |
114 | me.state = 'none';
115 | me.stateTarget = null;
116 | me.stateOrigin = null;
117 | me.stateTf = null;
118 | me.zoomCurrent = 0;
119 |
120 | if (o) {
121 | for (key in o) {
122 | if (me.opts[key] !== undefined) {
123 | me.opts[key] = o[key];
124 | }
125 | }
126 | }
127 |
128 | /**
129 | * Handler registration
130 | */
131 | me.setupHandlers = function(root) {
132 | me.root.onmousedown = me.handleMouseDown;
133 | me.root.onmousemove = me.handleMouseMove;
134 | me.root.onmouseup = me.handleMouseUp;
135 |
136 |
137 | //me.root.onmouseout = me.handleMouseUp; // Decomment me to stop the pan functionality when dragging out of the SVG element
138 |
139 | if (navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
140 | me.root.addEventListener('mousewheel', me.handleMouseWheel, false); // Chrome/Safari
141 | else
142 | me.root.addEventListener('DOMMouseScroll', me.handleMouseWheel, false); // Others
143 | };
144 |
145 | /**
146 | * Instance an SVGPoint object with given event coordinates.
147 | */
148 | me.getEventPoint = function(evt) {
149 | var p = me.root.createSVGPoint();
150 |
151 | p.x = evt.clientX;
152 | p.y = evt.clientY;
153 |
154 | return p;
155 | };
156 |
157 | /**
158 | * Sets the current transform matrix of an element.
159 | */
160 | me.setCTM = function(element, matrix) {
161 | var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
162 |
163 | element.setAttribute("transform", s);
164 | };
165 |
166 | /**
167 | * Dumps a matrix to a string (useful for debug).
168 | */
169 | me.dumpMatrix = function(matrix) {
170 | var s = "[ " + matrix.a + ", " + matrix.c + ", " + matrix.e + "\n " + matrix.b + ", " + matrix.d + ", " + matrix.f + "\n 0, 0, 1 ]";
171 |
172 | return s;
173 | };
174 |
175 | /**
176 | * Sets attributes of an element.
177 | */
178 | me.setAttributes = function(element, attributes) {
179 | for (i in attributes)
180 | element.setAttributeNS(null, i, attributes[i]);
181 | };
182 |
183 | /**
184 | * Handle mouse move event.
185 | */
186 | me.handleMouseWheel = function(evt) {
187 | if (!me.opts.zoom) return;
188 |
189 | if (evt.preventDefault)
190 | evt.preventDefault();
191 |
192 | evt.returnValue = false;
193 |
194 | var svgDoc = evt.target.ownerDocument;
195 |
196 | var delta;
197 |
198 | if (evt.wheelDelta)
199 | delta = evt.wheelDelta / 3600; // Chrome/Safari
200 | else
201 | delta = evt.detail / -90; // Mozilla
202 |
203 | if (delta > 0) {
204 | if (me.opts.zoomThreshold)
205 | if (me.opts.zoomThreshold[1] <= me.zoomCurrent) return;
206 | me.zoomCurrent++;
207 | } else {
208 | if (me.opts.zoomThreshold)
209 | if (me.opts.zoomThreshold[0] >= me.zoomCurrent) return;
210 | me.zoomCurrent--;
211 | }
212 |
213 | var z = 1 + delta; // Zoom factor: 0.9/1.1
214 |
215 | var g = svgDoc.getElementById("viewport"+me.id);
216 |
217 | var p = me.getEventPoint(evt);
218 |
219 | p = p.matrixTransform(g.getCTM().inverse());
220 |
221 | // Compute new scale matrix in current mouse position
222 | var k = me.root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y);
223 | me.setCTM(g, g.getCTM().multiply(k));
224 |
225 | if (!me.stateTf)
226 | me.stateTf = g.getCTM().inverse();
227 |
228 | me.stateTf = me.stateTf.multiply(k.inverse());
229 | };
230 |
231 | /**
232 | * Handle mouse move event.
233 | */
234 | me.handleMouseMove = function(evt) {
235 | if (evt.preventDefault)
236 | evt.preventDefault();
237 |
238 | evt.returnValue = false;
239 |
240 | var svgDoc = evt.target.ownerDocument;
241 |
242 | var g = svgDoc.getElementById("viewport"+me.id);
243 |
244 | if (me.state == 'pan') {
245 | // Pan mode
246 | if (!me.opts.pan) return;
247 |
248 | var p = me.getEventPoint(evt).matrixTransform(me.stateTf);
249 |
250 | me.setCTM(g, me.stateTf.inverse().translate(p.x - me.stateOrigin.x, p.y - me.stateOrigin.y));
251 | } else if (me.state == 'move') {
252 | // Move mode
253 | if (!me.opts.drag) return;
254 |
255 | var p = me.getEventPoint(evt).matrixTransform(g.getCTM().inverse());
256 |
257 | me.setCTM(me.stateTarget, me.root.createSVGMatrix().translate(p.x - me.stateOrigin.x, p.y - me.stateOrigin.y).multiply(g.getCTM().inverse()).multiply(me.stateTarget.getCTM()));
258 |
259 | me.stateOrigin = p;
260 | }
261 | };
262 |
263 | /**
264 | * Handle click event.
265 | */
266 | me.handleMouseDown = function(evt) {
267 | if (evt.preventDefault)
268 | evt.preventDefault();
269 |
270 | evt.returnValue = false;
271 |
272 | var svgDoc = evt.target.ownerDocument;
273 |
274 | var g = svgDoc.getElementById("viewport"+me.id);
275 |
276 | if (evt.target.tagName == "svg" || !me.opts.drag) {
277 | // Pan mode
278 | if (!me.opts.pan) return;
279 |
280 | me.state = 'pan';
281 |
282 | me.stateTf = g.getCTM().inverse();
283 |
284 | me.stateOrigin = me.getEventPoint(evt).matrixTransform(me.stateTf);
285 | } else {
286 | // Move mode
287 | if (!me.opts.drag || evt.target.draggable == false) return;
288 |
289 | me.state = 'move';
290 |
291 | me.stateTarget = evt.target;
292 |
293 | me.stateTf = g.getCTM().inverse();
294 |
295 | me.stateOrigin = me.getEventPoint(evt).matrixTransform(me.stateTf);
296 | }
297 | };
298 |
299 | /**
300 | * Handle mouse button release event.
301 | */
302 | me.handleMouseUp = function(evt) {
303 | if (evt.preventDefault)
304 | evt.preventDefault();
305 |
306 | evt.returnValue = false;
307 |
308 | var svgDoc = evt.target.ownerDocument;
309 |
310 | if ((me.state == 'pan' && me.opts.pan) || (me.state == 'move' && me.opts.drag)) {
311 | // Quit pan mode
312 | me.state = '';
313 | }
314 | };
315 |
316 |
317 | // end of constructor
318 | me.setupHandlers(me.root);
319 | me.initialized = true;
320 | };
321 |
322 | Raphael.fn.ZPDPanTo = function(x, y) {
323 | var me = this;
324 |
325 | if (me.gelem.getCTM() == null) {
326 | alert('failed');
327 | return null;
328 | }
329 |
330 | var stateTf = me.gelem.getCTM().inverse();
331 |
332 | var svg = document.getElementsByTagName("svg")[0];
333 |
334 | if (!svg.createSVGPoint) alert("no svg");
335 |
336 | var p = svg.createSVGPoint();
337 |
338 | p.x = x;
339 | p.y = y;
340 |
341 | p = p.matrixTransform(stateTf);
342 |
343 | var element = me.gelem;
344 | var matrix = stateTf.inverse().translate(p.x, p.y);
345 |
346 | var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
347 |
348 | element.setAttribute("transform", s);
349 |
350 | return me;
351 | };
352 |
353 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisakers/Xdebug-Trace-Visualizer/1cb943747960ac2dfb30d1170d324bf5c34f884b/screenshot.png
--------------------------------------------------------------------------------