Start a server on port 8000 in from the project root
5 | 6 |Install the required node module:
7 | 8 |npm install chrome-remote-interface
9 | Run Chrome with an open debugging port:
12 | 13 |# linux
14 | google-chrome --remote-debugging-port=9222
15 |
16 | # mac
17 | /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
18 | Run the script from this folder:
21 | 22 |node test-layout-thrasheasy peasy
25 | 26 | 27 | 31 | -------------------------------------------------------------------------------- /demo/perf-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |Follow the readme directions
4 | 5 | 6 | -------------------------------------------------------------------------------- /get-cpu-profile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const cdp = require('chrome-remote-interface'); 3 | const chromelauncher = require('chrome-launcher'); 4 | 5 | const sleep = n => new Promise(resolve => setTimeout(resolve, n)); 6 | 7 | const url = 'http://localhost:8080/demo/perf-test.html'; 8 | 9 | (async function() { 10 | const chrome = await chromelauncher.launch({port: 9222}); 11 | const client = await cdp(); 12 | 13 | const {Profiler, Page, Runtime} = client; 14 | // enable domains to get events. 15 | await Page.enable(); 16 | await Profiler.enable(); 17 | 18 | // Set JS profiler sampling resolution to 100 microsecond (default is 1000) 19 | await Profiler.setSamplingInterval({interval: 100}); 20 | 21 | await Page.navigate({url}); 22 | await client.on('Page.loadEventFired', async _ => { 23 | // on load we'll start profiling, kick off the test, and finish 24 | await Profiler.start(); 25 | await Runtime.evaluate({expression: 'startTest();'}); 26 | await sleep(600); 27 | const data = await Profiler.stop(); 28 | saveProfile(data); 29 | }); 30 | 31 | async function saveProfile(data) { 32 | // data.profile described here: https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#type-Profile 33 | // Process the data however you wish… or, 34 | // Use the JSON file, open Chrome DevTools, Menu, More Tools, JavaScript Profiler, `load`, view in the UI 35 | const filename = `profile-${Date.now()}.cpuprofile`; 36 | const string = JSON.stringify(data.profile, null, 2); 37 | fs.writeFileSync(filename, string); 38 | console.log('Done! Profile data saved to:', filename); 39 | 40 | await client.close(); 41 | await chrome.kill(); 42 | } 43 | })(); 44 | -------------------------------------------------------------------------------- /get-timeline-trace.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var Chrome = require('chrome-remote-interface'); 3 | var summary = require('./util/browser-perf-summary') 4 | 5 | var TRACE_CATEGORIES = ["-*", "devtools.timeline", "disabled-by-default-devtools.timeline", "disabled-by-default-devtools.timeline.frame", "toplevel", "blink.console", "disabled-by-default-devtools.timeline.stack", "disabled-by-default-devtools.screenshot", "disabled-by-default-v8.cpu_profile", "disabled-by-default-v8.cpu_profiler", "disabled-by-default-v8.cpu_profiler.hires"]; 6 | 7 | var rawEvents = []; 8 | 9 | Chrome(function (chrome) { 10 | with (chrome) { 11 | Page.enable(); 12 | Tracing.start({ 13 | "categories": TRACE_CATEGORIES.join(','), 14 | "options": "sampling-frequency=10000" // 1000 is default and too slow. 15 | }); 16 | 17 | Page.navigate({'url': 'http://paulirish.com'}) 18 | Page.loadEventFired(function () { 19 | Tracing.end() 20 | }); 21 | 22 | Tracing.tracingComplete(function () { 23 | var file = 'profile-' + Date.now() + '.devtools.trace'; 24 | fs.writeFileSync(file, JSON.stringify(rawEvents, null, 2)); 25 | console.log('Trace file: ' + file); 26 | console.log('You can open the trace file in DevTools Timeline panel. (Turn on experiment: Timeline tracing based JS profiler)\n') 27 | 28 | summary.report(file); // superfluous 29 | 30 | chrome.close(); 31 | }); 32 | 33 | Tracing.dataCollected(function(data){ 34 | var events = data.value; 35 | rawEvents = rawEvents.concat(events); 36 | 37 | // this is just extra but not really important 38 | summary.onData(events) 39 | }); 40 | 41 | } 42 | }).on('error', function (e) { 43 | console.error('Cannot connect to Chrome', e); 44 | }); 45 | -------------------------------------------------------------------------------- /log-trace-metrics.js: -------------------------------------------------------------------------------- 1 | const filename = 'demo/mdn-fling.json' 2 | 3 | var fs = require('fs') 4 | var traceToTimelineModel = require('devtools-timeline-model') 5 | 6 | var events = fs.readFileSync(filename, 'utf8') 7 | var model = traceToTimelineModel(events) 8 | 9 | console.log('Timeline model events:', model.timelineModel.mainThreadEvents().length) 10 | console.log('IR model interactions', model.irModel.interactionRecords().length) 11 | console.log('Frame model frames', model.frameModel.frames().length) 12 | 13 | 14 | // console.log('Timeline model:', model.timelineModel) 15 | // console.log('IR model', model.irModel) 16 | // console.log('Frame model', model.frameModel) 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "automated-chrome-profiling", 3 | "version": "1.0.0", 4 | "description": "A few scripts to get started", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "start": "httpster -p 8080" 8 | }, 9 | "author": "", 10 | "license": "Apache-2.0", 11 | "repository": "https://github.com/paulirish/automated-chrome-profiling", 12 | "dependencies": { 13 | "chrome-launcher": "^0.3.2", 14 | "chrome-remote-interface": "^0.24.2", 15 | "devtools-timeline-model": "^1.0", 16 | "httpster": "^1.0.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | Let's say you want to evaluate the performance of some clientside JavaScript and want to automate it. Let's kick off our measurement in Node.js and collect the performance metrics from Chrome. Oh yeah. 2 | 3 | We can use the [Chrome debugging protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) and go directly to [how Chrome's JS sampling profiler interacts with V8](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/protocol.json&q=file:protocol.json%20%22Profiler%22,&sq=package:chromium&type=cs). So much power here, so we'll use [chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface) as a nice client in front of the protocol: 4 | 5 | 6 | **Step 1: Clone this repo and serve it** 7 | 8 | ```sh 9 | git clone https://github.com/paulirish/automated-chrome-profiling 10 | cd automated-chrome-profiling 11 | npm install # get the dependencies 12 | npm start # serves the folder at http://localhost:8080/ (port hardcoded) 13 | ``` 14 | 15 | **Step 2: Run Chrome with an open debugging port:** 16 | 17 | ```sh 18 | # linux 19 | google-chrome --remote-debugging-port=9222 --user-data-dir=$TMPDIR/chrome-profiling --no-default-browser-check 20 | 21 | # mac 22 | /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=$TMPDIR/chrome-profiling --no-default-browser-check 23 | ``` 24 | Navigate off the start page to example.com or something. 25 | 26 | **Step 3: Run the CPU profiling demo app** 27 | 28 | ```sh 29 | node get-cpu-profile.js 30 | ``` 31 | 32 | #### CPU Profiling 33 | Read through [`get-cpu-profile.js`](https://github.com/paulirish/automated-chrome-profiling/blob/master/get-cpu-profile.js). Here's what it does: 34 | 35 | * It navigates your open tab to `http://localhost:8080/perf-test.html` 36 | * Starts profiling 37 | * run's the page's `startTest();` 38 | * Stop profiling and retrieve the profiling result 39 | * Save it to disk. We can then load the data into Chrome DevTools to view 40 | 41 |
42 |
43 | You can do other stuff. For example...
44 |
45 | #### Timeline recording
46 |
47 | You can record from the timeline. The saved files is drag/droppable into the Timeline panel.
48 | See `get-timeline-trace.js`
49 |
50 | 
51 |
52 | ### Finding forced layouts (reflows)
53 |
54 | A bit more specialized, you can take that timeline recording and probe it with questions like.. "How many times is layout forced"
55 |
56 | See `test-for-layout-trashing.js`
57 |
58 | ### Timeline model
59 |
60 | The raw trace data is.. pretty raw. The [`devtools-timeline-model` package](https://github.com/paulirish/devtools-timeline-model) provides an ability to use the Chrome DevTools frontend's trace parsing.
61 |
62 | ```js
63 | const filename = 'demo/mdn-fling.json'
64 |
65 | var fs = require('fs')
66 | var traceToTimelineModel = require('./lib/timeline-model.js')
67 |
68 | var events = fs.readFileSync(filename, 'utf8')
69 | var model = traceToTimelineModel(events)
70 |
71 | model.timelineModel // full event tree
72 | model.irModel // interactions, input, animations
73 | model.frameModel // frames, durations
74 | ```
75 | 
76 |
77 | 
78 |
79 |
80 | #### Why profile JS like this?
81 |
82 | Well, it started because testing the performance of asynchronous code is difficult. Obviously measuring `endTime - startTime` doesn't work. However, using a profiler gives you the insight of how many microseconds the CPU spent within each script, function and its children, making analysis much more sane.
83 |
84 | #### Way more is possible
85 |
86 | This is just the tip of the iceberg when it comes to using [the devtools protocol](https://chromedevtools.github.io/devtools-protocol/) to manipulate and measure the browser. Plenty of other projects around this space as well: see the [devtools protocol section on `awesome-chrome-devtools`](https://github.com/ChromeDevTools/awesome-chrome-devtools#chrome-devtools-protocol) for more.
87 |
88 |
89 | ### Contributors
90 | * paul irish
91 | * [@vladikoff](http://github.com/vladikoff)
92 | * [Andrea Cardaci](https://github.com/cyrus-and)
93 |
--------------------------------------------------------------------------------
/test-for-layout-thrashing.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | var Chrome = require('chrome-remote-interface');
3 | var util = require('util');
4 |
5 | Chrome(function (chrome) {
6 | with (chrome) {
7 |
8 | var url = 'http://paulirish.com';
9 | var rawEvents = [];
10 | var trace_categories = ['-*', 'devtools.timeline', 'disabled-by-default-devtools.timeline', 'disabled-by-default-devtools.timeline.stack'];
11 |
12 | Page.enable();
13 | Tracing.start({ categories: trace_categories.join(',') });
14 |
15 | Page.navigate({ url: url })
16 |
17 | Page.loadEventFired( _ => Tracing.end() );
18 |
19 | Tracing.dataCollected( data => { rawEvents = rawEvents.concat(data.value); });
20 |
21 | Tracing.tracingComplete(function () {
22 | // find forced layouts
23 | // https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/front_end/timeline/TimelineModel.js&sq=package:chromium&type=cs&q=f:timelinemodel%20forced
24 | var forcedReflowEvents = rawEvents
25 | .filter( e => e.name == 'UpdateLayoutTree' || e.name == 'Layout')
26 | .filter( e => e.args && e.args.beginData && e.args.beginData.stackTrace && e.args.beginData.stackTrace.length)
27 |
28 | console.log('Found events:', util.inspect(forcedReflowEvents, { showHidden: false, depth: null }), '\n');
29 |
30 | console.log('Results: (', forcedReflowEvents.length, ') forced style recalc and forced layouts found.\n')
31 |
32 | var file = 'forced-reflow-' + Date.now() + '.devtools.trace';
33 | fs.writeFileSync(file, JSON.stringify(rawEvents, null, 2));
34 | console.log('Found events written to file: ' + file);
35 |
36 | chrome.close();
37 | });
38 | }
39 | }).on('error', e => console.error('Cannot connect to Chrome', e));
--------------------------------------------------------------------------------
/util/browser-perf-summary.js:
--------------------------------------------------------------------------------
1 | // generally stolen from https://github.com/axemclion/browser-perf
2 |
3 | var fs = require('fs');
4 |
5 | function TimelineMetrics() {
6 | this.timelineMetrics = {};
7 | this.eventStacks = {};
8 | }
9 |
10 | TimelineMetrics.prototype.onData = function(events) {
11 | events.forEach((event) =>
12 | this.processTracingRecord_(event)
13 | )
14 | };
15 |
16 | TimelineMetrics.prototype.addSummaryData_ = function(e, source) {
17 | if (typeof this.timelineMetrics[e.type] === 'undefined') {
18 | this.timelineMetrics[e.type] = new StatData();
19 | }
20 | this.timelineMetrics[e.type].add(e.startTime && e.endTime ? e.endTime - e.startTime : 0);
21 | }
22 |
23 |
24 | // Timeline format at https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit#heading=h.yr4qxyxotyw
25 | TimelineMetrics.prototype.processTracingRecord_ = function(e) {
26 | switch (e.ph) {
27 | case 'I': // Instant Event
28 | case 'X': // Duration Event
29 | var duration = e.dur || e.tdur || 0;
30 | this.addSummaryData_({
31 | type: e.name,
32 | data: e.args ? e.args.data : {},
33 | startTime: e.ts / 1000,
34 | endTime: (e.ts + duration) / 1000
35 | }, 'tracing');
36 | break;
37 | case 'B': // Begin Event
38 | if (typeof this.eventStacks[e.tid] === 'undefined') {
39 | this.eventStacks[e.tid] = [];
40 | }
41 | this.eventStacks[e.tid].push(e);
42 | break;
43 | case 'E': // End Event
44 | if (typeof this.eventStacks[e.tid] === 'undefined' || this.eventStacks[e.tid].length === 0) {
45 | debug('Encountered an end event that did not have a start event', e);
46 | } else {
47 | var b = this.eventStacks[e.tid].pop();
48 | if (b.name !== e.name) {
49 | debug('Start and end events dont have the same name', e, b);
50 | }
51 | this.addSummaryData_({
52 | type: e.name,
53 | data: extend(e.args.endData, b.args.beginData),
54 | startTime: b.ts / 1000,
55 | endTime: e.ts / 1000
56 | }, 'tracing');
57 | }
58 | break;
59 | }
60 | };
61 |
62 | TimelineMetrics.prototype.report = function(file){
63 |
64 | var filename = file + '.summary.json';
65 |
66 |
67 | var arr = Object.keys(tm.timelineMetrics).map(k => {
68 | var obj = {};
69 | obj[k] = tm.timelineMetrics[k]
70 | return obj;
71 | }).sort((a,b) =>
72 | b[Object.keys(b)].sum - a[Object.keys(a)].sum
73 | );
74 |
75 | var data = JSON.stringify(arr, null, 2);
76 | fs.writeFileSync(filename, data);
77 |
78 | console.log('Recording Summary: ' + filename);
79 | }
80 |
81 |
82 |
83 | function StatData() {
84 | this.count = this.sum = 0;
85 | this.max = this.min = null;
86 | }
87 |
88 | StatData.prototype.add = function(val) {
89 | if (typeof val === 'number') {
90 | this.count++;
91 | this.sum += val;
92 | if (this.max === null || val > this.max) {
93 | this.max = val;
94 | }
95 | if (this.min === null || val < this.min) {
96 | this.min = val;
97 | }
98 | }
99 | };
100 |
101 | StatData.prototype.getStats = function() {
102 | return {
103 | mean: this.count === 0 ? 0 : this.sum / this.count,
104 | max: this.max,
105 | min: this.min,
106 | sum: this.sum,
107 | count: this.count
108 | }
109 | }
110 |
111 |
112 |
113 | var extend = function(obj1, obj2) {
114 | if (typeof obj1 !== 'object' && !obj1) {
115 | obj1 = {};
116 | }
117 | if (typeof obj2 !== 'object' && !obj2) {
118 | obj2 = {};
119 | }
120 | for (var key in obj2) {
121 | if (Array.isArray(obj1[key]) && Array.isArray(obj2[key])) {
122 | obj1[key] = obj1[key].concat(obj2[key]);
123 | } else if (typeof obj1[key] === 'object' && typeof obj2[key] === 'object' && !Array.isArray(obj1[key]) && !Array.isArray(obj2[key])) {
124 | obj1[key] = extend(obj1[key], obj2[key]);
125 | } else {
126 | obj1[key] = obj2[key];
127 | }
128 | }
129 | return obj1;
130 | }
131 |
132 | var tm = new TimelineMetrics();
133 |
134 | module.exports = tm;
--------------------------------------------------------------------------------