Advanced features in the tracing framework.
Capture traces from mobile devices.
| Chrome Release channel | Firefox Release channel | Internet Explorer 10+ | Chrome Android Release channel | Android Browser | Mobile Safari 6.0+ |
|---|---|---|---|---|---|
| ✔ | ✔ | ✔ | ✔ | ✘ | ✘ |
The tracing framework node package contains a remote control coordination server that makes it possible to connect pages running in browser to a central control panel. Once a device is connected it's possible to capture and save snapshots for inspection, making it possible to easily grab snapshots from mobile devices, browsers running remotely on test machines, etc.
It's important to note that the tracing framework still requires certain platform features such as high resolution timing and will not run everywhere. For example, the stock Android browser and Mobile Safari do not support high resolution timing, but Chrome for Android does.
The tools and UI around this will improve as more mobile browsers support the features required of the framework. If you really like this feature please help to improve it!
wtf-controller.http://localhost:8083).
<script> snippet it prints into your page.benvanik@benvanik-linux:~$ npm install -g tracing-framework
...
benvanik@benvanik-linux:~$ wtf-controller
Launching remote control server...
http: 8083
ws: 8084
Open the control page:
http://benvanik-linux:8083
Add this to your page <head> BEFORE anything else:
<script src="http://google.github.io/tracing-framework/bin/wtf_trace_web_js_compiled.js"></script>
<script>
wtf.remote.connect({
'wtf.remote.target': 'ws://benvanik-linux:8084'
});
wtf.trace.start();
</script>
Server ready, use ctrl-c to exit...
See native browser callstacks in your traces!
| Chrome Release channel (26+) | Firefox Release channel (20+) | Internet Explorer 10+ |
|---|---|---|
| ✔ | ✘ | ✘ |
WARNING: this is an experimental feature and may stop working at any time!
This feature makes it possible to selectively capture data from the chrome://tracing tool and include it in your traces. This allows you to see the native activity occurring on the browser main thread, your page renderer process, and the GPU process (if it exists).
For in-depth information about this feature please see the documentation in chrome_tracing.md.
This feature uses APIs internal to Chrome and breaks frequently. Support is only provided for Chromium nightlies and Chrome Canary. It likely will not work in stable or beta channels of Chrome.
This feature currently requires you to launch Chrome with the remote debugging feature enabled by adding the --remote-debugging-port=9222 flag. See the Chromium documentation for how to run Chromium with flags.
With a properly configured Chrome you should see a 'C:T' button in the on-page HUD. Clicking on it will start collecting chrome://tracing data, and clicking it again will stop and gather the data. Look in the top right of the screen for the status messages. Once the data has been retrieved you can snapshot and view the results.
See every single function called in your application.
| Chrome Release channel (26+) | Firefox Release channel (20+) | Internet Explorer 10+ |
|---|---|---|
| ✔ | ✔ | ✔ |
WARNING: this is an experimental feature and may stop working at any time!
WARNING: you cannot use both WTF tracing and this at the same time!
The normal WTF instrumentation requires adding trace calls inside your code to find the times and structure of your code as it executes. Since you're trying to get timing you want to restrain your usage as to not cause time skew and other bad effects. It's also impossible to try to instrument every call in your program, even with the nifty helper functions.
So the call tracing feature is implemented entirely differently. It is not for timing - you will not be able to get function times from this! What you will be seeing in the user interface is counts, based on the mode you're running in. It does not work with normal tracing - you must remove all use of the tracing framework to get good data. It's recommended that you compile out the tracing framework calls by using a shim and compiler.
The wtf-instrument command line tool runs over your Javascript to produce an instrumented file that can be run in the browser. Unlike the normal instrumentation that normal WTF does, this process performs code transformation and results in a different kind of file: .wtf-calls. These files will have millions to tens of millions of entries, and are very cool to view in the UI.
The basic usage is to instrument your code (via a command line tool or a proxy), capture the call trace data, and view it in WTF.
For in-depth information about this feature please see the documentation in call_tracing.md.
See every byte allocated by every function called.
| Chrome Release channel (26+) | Firefox Release channel (20+) | Internet Explorer 10+ |
|---|---|---|
| ✔ | ✘ | ✘ |
WARNING: this is an experimental feature and may stop working at any time!
WARNING: you cannot use both WTF tracing and this at the same time!
Building on the call tracing feature, it's possible with special Chrome flags to track the number of bytes allocated by every function called by a script. Instrument your code with wtf-instrument as above, but also add the --track-heap flag to enable the tracking.
When you load your page every single function will be wrapped with with code that records the current heap memory usage. When you save a snapshot you'll be able to view this in the visualizer to see your program's execution laid out along it's memory usage instead of time. This can be incredibly valuable in helping to find unexpected sources of garbage generation or wasteful coding patterns.
It's important to understand that wrapping code in this mode does cause some additional memory to sometimes be allocated when V8 is unable to inline things, though it's often very small and doesn't skew the results much.
For in-depth information about this feature please see the documentation in call_tracing.md.
This feature uses APIs internal to Chrome and breaks frequently. Support is only provided for Chromium nightlies and Chrome Canary. It likely will not work in stable or beta channels of Chrome.
WARNING: do not browse the web with these flags!
This feature currently requires you to launch Chrome with the security features disabled by adding the --disable-web-security --js-flags=--allow-natives-syntax flags. See the Chromium documentation for how to run Chromium with flags.