I'm new to node and web dev, some input would be appreciated. I'd like to monitor my js running locally on a MAMP setup: localhost:8888/App/index.php

From the folder www/path/App I run
node ~/tracegl -tgt:8888 .

But the tracegl UI is empty and the browser only displays "file not found".

Any clues?

I'm not sure if you even want to replicate functionality like this that is readily available in the standard developer tools. But I'll throw this out there to see what you think. When I hover over a variable or argument its great that it shows some info about the value but if it's a complex object it would be nice to have an object inspector to dig deeper into it.

Hello there. Great software, first time in years when i'm so excited about other people's javascript code.

Filtering seems to be a very useful feature. Although it resets all function nestedness and makes all functions appear on the same level. It would be great to have a way to filter functions but still see stack level deepness. Useful for heavy recursioun.

Thanks a lot!

When I click on the code it opens the corresponding file in Sublime Text 2. How does it work? I want to use the same in my webdev tools.

It would be useful if the users of this product had a way of contributing documentation for certain use cases, usage tips, etc... as well as stay up to date on product announcements, documentation updates, etc...

Setting up a github wiki or something similar, and/or making the documentation page on the website itself open-source on the repo would be a good way of achieving some of these objectives, assuming you're planning on continuing development of the tool?

When running it for a test file using vows, it just hangs on Checking for update.

 > node ~/bin/tracegl.js csg_test.js
[trace.GL] See your code. This product has a commercial license.
[trace.GL] WebGL trace UI: http://localhost:2000
[trace.GL] Checking for update...

I'm not sure what it's doing, or whether I should just let it keep running, or it's hanging on something. The csg_test.js file is one that uses vows, the testing framework.

I really don't want to put my Card details on your site :)

I'm happy to pay it via a paypal account, so can you set that up?

thanks

Is it possible to support SSI includes in the static server?

jasmine.js hangs on load, something about setTimeout re-definition. Just including an instrumented file on a page does it. Hard to debug, since I dont actualy get line numbers when stack overflows.

Hi !

how can I auto reload code changes into the trace ?

Thanks !
JE

I used traceGL to instrument a file in a development build of Doppio using the following command:

$ node tracegl.js -do:natives.js -gz ./build/dev
[trace.GL] See your code. This product has a commercial license.
[trace.GL] Checking for update...[trace.GL] Serving browser JS: http://localhost:2080
up to date.
quit
^Cgot sigint, flushing gz
end!
exit!

As you can see above, when I was finished producing a trace, I killed traceGL using sigint.

The produced gzip file is invalid, though. You can download it here.

It's possible the trace data was too large, but there was no indication of an error from traceGL or Node. For the trace data, I ran rhino in Doppio to open the Rhino repl, and then ran quit() to exit the repl. The whole process took a few minutes since it was a slow development build with instrumentation logic.

I'd be happy to assist with any debugging efforts.

I'm getting the identical bug on Firefox and Chrome on a mid-2011 iMac. Trace.gl seems to run and UI seems to be responsive (colors, popups, etc.) but no text shows anywhere. Let me know if you'd like me to try something different.

seems like it doesn't work with mocha.

With e.g., a Meteor app on port 3000, proxying using node tracegl http://localhost:3000 does not seem to be correctly intercepting the javascript traffic.

When traceGL proxyfies requests to some backend server, it transparently sends something like http://localhost:2080 in Host header of http request. This behaviour may be confusing for your backend if it was configured to use virtual hosts. So we need to add one line to send correct headers:

diff --git a/tracegl.js b/tracegl.js
index 1d6c2f2..4fd8823 100644
--- a/tracegl.js
+++ b/tracegl.js
@@ -4646,6 +4646,10 @@ define('/core/io_server',function(require){
            delete opt.headers['if-modified-since']
            delete opt.headers['content-security-policy']
            //}
+
+           // Send correct hostname to proxified server instead of "http://localhost:2080"
+           opt.headers['host'] = hs.proxy.hostname
+
            req.on('data', function(d){
                p_req.write(d)
            })

Proxying to VS2012 dev server and the widgets on the proxied page do not function and I get error messages like those shown in title in CLI from where node was launched. Some of the included js libs depend on others and everything is linked by a single html file and not any kind of script loader. Also one of the included libraries is kendoui which makes use of data-* attributes for widget configuration.

In chome console various reference errors related to loading Sys from asp.net client side lib, jquery, kendo, and $ vars. Included js file source does appear in traceGL and I can see instrumented js files being returned in fiddler from requests but it seems to be causing problems.

When you set
{
"tgt":3000
}
In tracegl.json file. It does not affect anything.

When running TraceGL in proxy mode, any change made to any of the javascript files in my project won't be reflected in the proxied version of the app. The only way to see your changes are to stop TraceGL and restart it.

Caching should be either turned off completely, or a command-line switch should be available to turn it off.

I'd like to be able to use other debugging tools too. :)

I am trying to use trace.gl to debug an Express app that is running on port 4000. When I start the app, trace.gl prints all of the files as expected. I hit the clear button because I'm really only interested in seeing and debugging the code on a per request basis. When I send requests through the app, the code visualization window doesn't rehydrate with the new code. Is this a setting issue or does trace.gl not function that way?

It would be great if we can specify tracegl proxy in ios/android device wifi proxy settings and have all javascript websites loaded on devices traced in trace gl (like fiddler).

I encounter the following error when attempting to instrument the lodash library. dist/lodash.js is the code imported by node, and the following results in any application that utilizes lodash being uninstrumentable.

$ tracejs node_modules/lodash/dist/lodash.js
[trace.GL] See your code. This product has a commercial license.
[trace.GL] WebGL trace UI: http://localhost:2000
[trace.GL] Checking for update...up to date.

node_modules/lodash/dist/lodash.js:2116
      (;(_$_b.b804=(_$_.c(805,hasOwnProperty.call(result, key)))) ? result[key
       ^
SyntaxError: Unexpected token ;
    at Module._compile (module.js:439:25)
    at Module.m._compile (/Users/chrisrogers/trace.js:42:22)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at Function.require (module.js:380:17)
    at nodeLoader (/Users/chrisrogers/trace.js:48:10)
    at Object./trace/trace_server (/Users/chrisrogers/trace.js:23:65)
    at Object.<anonymous> (/Users/chrisrogers/trace.js:13516:38)

Interface starts-up empty. Clicking around reveals empty color blocks (see screen-shot).

OSX 10.8.3 / Chrome 26.0, Safari 6.0, FF 19

For the NodeJS app we're building, we have built an exit process that kills all connections gracefully upon SIGINT and then closes the application. From what I can see, traceGL doesn't pass on these termination signals, which would be a nice feature.

I'm using proxy mode, and I have a project structure something like this:

- /webapp/static/js/lib (URL: /static/js/lib)
 - vendor libs ...
- /webapp/static/js/src (URL: /static/js/src)
 - my source code

When opening a line in my text editor, it's only looking under the src directory, so my source code is mapped with no problems, but external libraries are not found.

Is there some way to specify the root folder it should search from?

it would be awesome to see the execution time for each function. For example I'm seeing a boatload of jQuery calls in my app but I have no idea what effect it has on the performance of the app. It would be sweet to be able to see how long the code it taking in this kind of view.

You have probably seen the classic video "Debugging Backwards in Time"
http://www.youtube.com/watch?v=xpI8hIgOyko

One of the really useful features showcased there is the ability to select a point in time,
examine the value of a variable or object field at that point (already present in TraceGL) and then jump backwards to the point in time where this value/field was last modified. This can be repeated to get the full history of values for the locations of interest.

Disclaimer: something similar can be achieved if you use an explicit setter and apply a filter to show its invocations.

If the server that is being proxied has the content-security-policy header set all javascript is broken.

specifically:
(;($b.b14040=this.mouseStarted) ? ($.c(14041,this.mouseDrag(event))) : ($.c(14042,this._mouseUp(event))));

Notice the semicolon after the first paren.

System Details:

• OS: OSX Version 10.8.3
• Chrome version: Version 28.0.1485.0 dev

Issue:

Clicking on an area in the minimap works properly, but dragging eventually crashes the browser tab with the Aw, Snap! error message. It sometimes works for a little while, but inevitably crashes after using it for some time.

The console at this point only contains a couple of messages that seem unrelated to the problem:

• initnew: 420
• initnew: 229

The network tab shows a web-socket request in pending state when this happens, and even after the page has crashed, the Chrome renderer process is still consuming 100% CPU resources.

I have a small application where the intensive parts consist of:

• express (some basic routes that more or less just respond with static JSON)
• uglify-js (minifying quite a bit of client side javascript)
• less (parses the less files into css)

When I try to start the app with node tracegl server.js it spikes the CPU at 100%, eats around 1.2GB memory and then stays there for a while.

After the cpu usage dies down you can't access *:2000 and the app doesn't respond to http traffic.

What is sent to the console:
https://gist.github.com/mape/1cb2a722e7b25d5a5555

When running with -nolib it loads the app but still ends up with:
FATAL ERROR: JS Allocation failed - process out of memory

When proxying a local app on localhost:8080, after a minute or so:

events.js:71
    throw arguments[1]; // Unhandled 'error' event
                   ^

Error: socket hang up
at createHangUpError (http.js:1360:15)
at ServerResponse.OutgoingMessage._writeRaw (http.js:507:26)
at ServerResponse.OutgoingMessage._send (http.js:476:15)
at ServerResponse.OutgoingMessage.end (http.js:890:18)
at endPoll xxx\tracegl.js:3549:8)
at Timer. (xxx\tracegl.js:3558:34)
at Timer.exports.setInterval.timer.ontimeout (timers.js:234:14)

Also getting stack overflows when the page loads, but I don't have enough info on that yet to post an issue. Might be related?

Any suggestions on how we could run our spec tests under tracegl?

Commands like these:

> npm run test-buster
> jasmine-node spec-jasmine/

The filter settings doesn't seem to be read from the settings file.

The docs refer to a tracegl.json file, but when I run tracegl -settings it creates a .tracegl file with default settings.

After I modified that file (also did the same with tracegl.json) and ran node tracegl.js pathToStaticFolder, the settings are not loaded.

Using Firefox 20.0 in Max OS X 10.8.3. Firefox advanced settings under General Accessibility has "Search for text when I start typing" checked. When I try to enter anything into TraceGL "search filter" text box, only the first character gets into text entry box but also into Firefox built-in accessability search. All following key presses go only to accessability search.

Defect: I can enter only one character at a time. If I want to filter for more than one char, I need to click (and move to right with arrow keys) inside search filter once for every additional character. This is a lot of trouble.

What did I expect to happen: when I start writing in search filter box, all key presses would go only in there (without disabling FF accessability search).

When we were trying to use traceGL under Android WebView it did not work. This is due to that WebSocket is a function (not undefined), but not working.
It would be nice if it is possible to make it either working with WebView or add a command line parameter which switches to the "poll()" usage in the HTML page.
For now I have set the "no_websockets" parameter in the JS file as a workaround, but it would be nice to have it included in an update.

For people using coffeescript or anything else that supports source maps to map to the JS files, being able to interpret source maps and see the CS trace would be very useful.

See included screenshot for issue.

Host is a VM Ware Virtual Machine of Ubuntu Precise Pangolin.
Client:

• Browsers Tested: Chrome Stable (up-to-date), Safari 6.0.4
• Model Name: Mac Pro
• Model Identifier: MacPro5,1
• Processor Name: Quad-Core Intel Xeon
• Processor Speed: 3.2 GHz
• Number of Processors: 1
• Total Number of Cores: 4
• L2 Cache (per Core): 256 KB
• L3 Cache: 8 MB
• Memory: 16 GB
• Processor Interconnect Speed: 4.8 GT/s
• Boot ROM Version: MP51.007F.B03
• SMC Version (system): 1.39f11
• SMC Version (processor tray): 1.39f11

Low priority. Retina support? :)

We are delivering our webapp with tomcat and cocoon. The URI ist http://localhost:8080

When I call node tracegl.js http://localhost:8080 i get the following output:

[trace.GL] See your code. This product has a commercial license.
[trace.GL] WebGL trace UI: http://localhost:2000
[trace.GL] Checking for update...[trace.GL] Proxying browser JS: http://localhost:2080
up to date.

But no code is debugged in the Web-UI.

How can I use it with tomcat?

Not really sure whether this is TraceGL or my crash, because I couldn't figure out how to use TraceGL in the first place. While experimenting, something crashed (below). Reporting just in case.

Steps:

1. Start from command line (Mac OS X)
2. Open Firefox at localhost:2000
3. Nothing visible, blank TraceGL window
4. Open another Firefox window with the local index.html page
5. TraceGL still blank, try to do something
6. Random crash like below, think it must be my code doing something unexpected

[trace.GL] See your code. This product has a commercial license.
[trace.GL] WebGL trace UI: http://localhost:2000
[trace.GL] Checking for update...[trace.GL] Serving browser JS: http://localhost:2080
up to date.

events.js:71
throw arguments[1]; // Unhandled 'error' event
^
Error: socket hang up
at createHangUpError (http.js:1360:15)
at ServerResponse.OutgoingMessage._writeRaw (http.js:507:26)
at ServerResponse.OutgoingMessage._send (http.js:476:15)
at ServerResponse.OutgoingMessage.end (http.js:890:18)
at endPoll (/Users/jounimiettunen/tracegl.js:3549:8)
at Timer. (/Users/jounimiettunen/tracegl.js:3558:34)
at Timer.exports.setInterval.timer.ontimeout (timers.js:234:14)

Hi !

it seems that a regex object is just displayed as {} instead of printing a string representation of the regular expression.

see the following screenshots:

path is a regex. pointing the mouse on it - it is displayed as {}

now pointing at pathString which is the regex converted to string.

Regards,
JE

Hello,

I am currently stuck developing on a private network drive, the server is not accessible from outside the network. I am not quite sure how to further describe the issue, but there is no way for me to point to the script location for it to recognize that it is running, as node and tern are running on my local machine while the JS itself is running on this drive.

I'm using traceGL as proxy. When I open my work project I'm receiving errors in console:
Parse error instrumenting /file1.js SyntaxError: Unexpected character '▼' (1:0)
Parse error instrumenting /file2.js SyntaxError: Unexpected character '▼' (1:0)
Parse error instrumenting /file3.js SyntaxError: Unexpected character '▼' (1:0)
Parse error instrumenting /file4.js SyntaxError: Unexpected character '▼' (1:0)
Message order error 18479 1

Hi,

I was trying to trace some code that has asyncblock (https://github.com/scriby/asyncblock) code, and the tracer doesn't seem to follow function calls within the block. I'm not sure if it's a fibers issue or something to do with asyncblock.

Great work! This is a really neat tool.

You have probably seen the classic video "Debugging Backwards in Time"
http://www.youtube.com/watch?v=xpI8hIgOyko

One of the useful features showcased there is the special output window that allows you to click on a particular log output line to be immediately taken to the point where this output was produced. This is very useful in navigating complex traces to find particular points of interest.

Something similar can be achieved by applying a proper filter to the trace showing only console.log invocations (which are currently not included at all).

It could be argued that most of the time, there will be a more appropriate function to search for than "console.log". Maybe a more productive solution is to add some kind of ability to define quick filters and additional "views" in the project configuration file.

We write most of our stuff in coffee script now. It compiles down to JS of course, but it would be handy for development if we could run a command like this:

node tracegl app.coffee

I've discovered that Cmd+mousewheel will zoom in and out. Are there any others? And could they be listed in the documentation?