Frame model missing from trace files recorded with current Puppeteer

[moraxy]

Traces recorded with the current 1.3.0 version of puppeteer are missing a valid frame model, instead it's just empty.
Chromium(67.0.3391.0 dev) as well as the online DevTools Timeline Viewer process it correctly, Chrome (66.0.3359.117) is missing the frames counter as well, so I'm guessing something about the file format changed?

Example trace file trace.json.txt

Recorded with

const pup = require( 'puppeteer' );

(async () => {

    const browser = await pup.launch();
    const page = await browser.newPage();

    await page.tracing.start( {
        path: "trace.json"
    } );

    await page.goto('https://threejs.org/examples/webgl_geometry_cube.html');
    await page.waitFor(1000);
    await page.tracing.stop();

    await browser.close();

} )();

Output from example.js

  Timeline model events:
   2976
  IR model interactions
   0
  Frame model frames:
   0                                            <<<<<<<<<
  Filmstrip model screenshots:
   0
  Top down tree total time:
   535.9709997177124
  Top down tree, not grouped:
   Map {
    'ParseHTML' => '291.0',
    'EvaluateScript' => '126.8',
    'Layout' => '60.3',
    'FireAnimationFrame' => '37.1',
    'CompositeLayers' => '10.7',
    'UpdateLayerTree' => '5.8',
    'UpdateLayoutTree' => '1.9',
    'Paint' => '1.3',
    'f:@15' => '1.0' }
  Bottom up tree leaves:
   100
  bottom up tree, grouped by URL Map {
    'https://threejs.org/build/three.js' => '403.2',
    'https://threejs.org/examples/webgl_geometry_cube.html' => '34.1',
    'native array.js' => '2.1' }
  Bottom up tree, grouped, 2nd top URL:
   34.08 https://threejs.org/examples/webgl_geometry_cube.html
  Bottom up tree, grouped by top subdomain:
   Map { 'threejs.org' => '437.3', 'native ' => '2.1' }
  Bottom up tree grouped by EventName:
   Map {
    'JS Frame' => '385.6',
    'Layout' => '60.3',
    'Evaluate Script' => '28.9',
    'Compile Script' => '12.7',
    'Composite Layers' => '10.7',
    'Minor GC' => '10.6',
    'Animation Frame Fired' => '7.0',
    'Update Layer Tree' => '5.8',
    'Parse HTML' => '5.1',
    'Recalculate Style' => '4.0',
    'Image Decode' => '2.7',
    'Paint' => '1.3',
    'Run Microtasks' => '1.1' }

Chrome

DevTools Timeline Viewer

Chromium

[moraxy]

it's due to the removal of sessionId in ChromeDevTools/devtools-frontend/commit@39f4e51bdf5f9d3ebd63db967cfc383f6e386328 (1, 2, etc.) Removing the if as in here

if (this._sessionId === sessionId)	
    this._layerTreeId = event.args['layerTreeId'] || event.args['data']['layerTreeId'];

is enough as a hotfix it seems. This probably messes something up with frames and there are some changes for backwards compatibility reasons - but I'll leave that to the professionals :)

[a1ph]

Yes, the file format has changed. So you're trying to open a trace recorded in a new version with an old Chrome.

[rgksugan]

Facing the same issue. So whats the solution?

[rundmt]

I was facing the same issue. The solution seems to be to use the latestbump branch. This seems have the needed updates. Once #25 gets merged this should fix the issue, but I'm not sure when this is going to happen. For now I've just been using latestbump locally.