commit	d2f1a2ff9f57283da4ad360f9277e300d64af66c	[log] [tgz]
author	James Lissiak <[email protected]>	Tue Mar 26 17:36:51 2019
committer	Commit Bot <[email protected]>	Tue Mar 26 17:36:51 2019
tree	14c65fbef9993ed2e537c9985eccdb94da42d5fb
parent	0cf9fdaff4758b51bd5b6cab81e7ba04264c8a64 [diff]

DevTools: Adding new performance histograms for launch of top 4 tools

This change adds 4 new performance histograms for the DevTools using the
prefix 'DevTools.Launch':
- DevTools.Launch.Console
- DevTools.Launch.Elements
- DevTools.Launch.Network
- DevTools.Launch.Sources

These histograms measure the time between the DevTools window being
shown during 'DevToolsWindow::ToggleDevToolsWindow' and a point in each
tool that corresponds to the 'ready' state as seen by a user. These end
points are unique to each tool but are as follows:
- Console: At the end of the ConsolePrompt constructor
- Elements: At the end of _updateMetrics when the styles panel has
  been populated for the initially selected node
- Network: After the panel is shown
- Sources: After the NetworkNavigatorView has been loaded

These tools were chosen as they represent the most popular in terms of
usage and will allow us to identify any significant performance impact
in the time taken to launch the DevTools when these panels open by
default.

To see time captured by the histograms in terms of a perf trace for
each tool please take a look at the following screenshots:
https://imgur.com/a/rcAgQ8h

In the traces you can see that the end marker for each load is at the
end of the trace near first meaningful paint, and just as the user
will see the content of the tool render fully.

To accomplish the histograms, a new native function has been added to
the DevTools ui bindings/embedder classes called
'recordPerformanceHistogram'. Along with the plumbing and a new helper
function in the frontend javascript Host.UserMetrics file called
'panelLoaded'

When the frontend javascript loads, it will store the initial panel to
be loaded from the preferences. Once that panel has been created and
the appropriate loaded marker has been hit, the duration of the launch
will be calculated using performance.now(). That duration is then sent
to the native code which will fire the appropriate histogram via the
'UMA_HISTOGRAM_TIMES' macros.

The mechanism is similar to the existing one used for enumerated
histograms and can be expanded to fire additional performance histograms
in the future.

Also added a new test for user-metrics to ensure that the panelLoaded
function will correctly record the histograms.

Change-Id: Ib9f0bf80c651231d6d2e308bee36c1a1223f04db
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1506388
Reviewed-by: Tom Sepez <[email protected]>
Reviewed-by: Ilya Sherman <[email protected]>
Reviewed-by: Pavel Feldman <[email protected]>
Commit-Queue: James Lissiak <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#644407}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 296f6b12650bd5e38eaf1fe0987c46910fe2d6eb

9 files changed

tree: 14c65fbef9993ed2e537c9985eccdb94da42d5fb

readme.md

Chrome DevTools frontend

The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.

It is available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES2015 modules, so consuming this package in other tools may require some effort.

Package versioning

The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.

Source code

The frontend is available through a git subtree mirror on chromium.googlesource.com, with a regularly updating GitHub mirror at github.com/ChromeDevTools/devtools-frontend. The codebase's true location is in third_party/blink/renderer/devtools/ in Chromium's git repo.

Getting Started

Clone the repo
Go to repo root and run: npm start
- This launches Chrome Canary and starts the dev server with 1 command
Go to http://localhost:9222#custom=true&experiments=true

Power user tips:
You can customize the port for the dev server: e.g. PORT=8888 npm start.
You can also launch chrome and start the server separately:
npm run chrome
npm run server
When you start Chrome separately, you can pass extra args to Chrome:
npm run chrome -- https://news.ycombinator.com
(e.g. this launches Hacker News on startup)
If you want to reset your development profile for Chrome, pass in “--reset-profile”:
npm start -- --reset-profile
OR
npm run chrome -- --reset-profile

Hacking

DevTools documentation: devtools.chrome.com
Debugging protocol docs and Chrome Debugging Protocol Viewer
awesome-chrome-devtools: recommended tools and resources
Contributing to DevTools: bit.ly/devtools-contribution-guide
Contributing To Chrome DevTools Protocol: docs.google.com

Useful Commands

Simpler npm commands w/ `dtrun`

If you want to run these npm commands anywhere in the chromium repo (e.g. in chromium/src), you'll want to setup our dtrun CLI helper.

One-time setup:

npm run setup-dtrun

Now, you can use any of the following commands by simply doing: dtrun test.

In addition, you no longer need to pass double dashes (e.g. --) before you pass in the flags. So you can do: dtrun test -d inspector/test.html.

`npm run format`

Formats your code using clang-format

`npm run format-py`

Formats your Python code using yapf

Note: Yapf is a command line tool. You will have to install this manually, either from PyPi through pip install yapf or if you want to enable multiprocessing in Python 2.7, pip install futures

`npm test`

Builds devtools and runs all inspector/devtools web tests.

Note: If you're using a full chromium checkout and compiled content shell in out/Release, then npm test uses that. Otherwise, with only a front-end checkout (i.e. cloning from GitHub), then npm test will fetch a previously compiled content shell from the cloud (and cache it for future test runs).

`npm test` basics

# run specific tests
npm test -- inspector/sources inspector/console

# debug a specific test. Any one of:
npm run debug-test inspector/cookie-resource-match.html
npm test -- --debug-devtools inspector/cookie-resource-match.html 
npm test -- -d inspector/cookie-resource-match.html 

# pass in additional flags to the test harness
npm test -- -f --child-processes=16

# ...for example, use a higher test timeout
npm test -- --time-out-ms=6000000 <test_path>

Tip: Learn about the test harness flags

`--fetch-content-shell`

# If you're using a full chromium checkout and have a compiled content shell, 
# this will fetch a pre-compiled content shell. This is useful if you 
# haven't compiled your content shell recently
npm test -- --fetch-content-shell

`--target=SUB_DIRECTORY_NAME`

# If you're using a build sub-directory that's not out/Release, 
# such as out/Default, then use --target=SUB_DIRECTORY_NAME
npm test -- --target=Default

Development

All devtools commits: View the log, RSS feed or @DevToolsCommits on Twitter
All open DevTools tickets on crbug.com
File a new DevTools ticket: new.crbug.com
Code reviews mailing list: [email protected]

Getting in touch

@ChromeDevTools on Twitter
Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools

Chrome DevTools frontend

Package versioning

Source code

Getting Started

Hacking

Useful Commands

Simpler npm commands w/ dtrun

npm run format

npm run format-py

npm test

npm test basics

--fetch-content-shell

--target=SUB_DIRECTORY_NAME