What does the “System” category of records mean in Chrome Timeline profiling tool?

by

I asked me the same question two years ago. I didn’t know what the grey bars respectively the System category stand for.

It was hard to find an official answer because the only thing the Chrome DevTools Docs said was “Activity that was not instrumented by DevTools”. But this statement was removed since there is a new documentation.

Some helpful info: Chrome Dev Tools: Timeline – White Bars

So I checked out the Chromium project and searched the devtools code for an answer. I found out that the System category contains all activities that not belonging to the categories Loading, Scripting, Rendering, Painting and GPU: see the list of all record types.

Filtering this list against another fragment of Chromium’s source that assigns types to categories we can see Timeline shows all record types that are unassigned or are assigned to the System category as grey bars in the System category:

  • ActivateLayerTree
  • CommitLoad
  • CpuProfile
  • DecodeLazyPixelRef
  • DisplayItemListSnapshot
  • DrawLazyPixelRef
  • ImplSideFling
  • InputLatencyMouseMove
  • InputLatencyMouseWheel
  • JSSample
  • JitCodeAdded
  • JitCodeMoved
  • LatencyInfoFlow
  • LayerTreeHostImplSnapshot
  • LayoutInvalidationTracking
  • LazyPixelRef
  • MarkLCPInvalidate
  • NeedsBeginFrameChanged
  • PictureSnapshot
  • Profile
  • Program
  • Rasterize
  • ResourceMarkAsCached
  • ScheduleStyleInvalidationTracking
  • SetLayerTreeId
  • StreamingCompileScript
  • StyleInvalidatorInvalidationTracking
  • StyleRecalcInvalidationTracking
  • Task
  • TracingSessionIdForWorker
  • TracingStartedInPage
  • UpdateCounters
  • V8Execute
  • V8Sample

2020 note: in old Chrome the “System” category was named “Other”.

More Related Contents:

  1. Why does Chrome debugger think closed local variable is undefined?
  2. Suppress Chrome ‘Failed to load resource’ messages in console
  3. How do you launch the JavaScript debugger in Google Chrome?
  4. Colors in JavaScript console
  5. Find out whether Chrome console is open
  6. Google Chrome console.log() inconsistency with objects and arrays
  7. $ Variable (Dollar Sign) in Chrome?
  8. How to disable JavaScript in Chrome Developer Tools?
  9. Javascript Debugging line by line using Google Chrome
  10. View list of all JavaScript variables in Google Chrome Console
  11. how to set DOM Breakpoints in chrome
  12. What is the source of the double-dollar sign selector query function in Chrome/Firefox?
  13. How to get list of network requests done by HTML
  14. Disable source maps in Chrome DevTools
  15. How to find what code is run by a button or element in Chrome using Developer Tools
  16. Chrome debugging – break on next click event
  17. Programmatically accessing function scope using Chrome DevTools console
  18. Link to chrome:// url from a webpage
  19. Chrome developer tools do not show all JavaScript files any more
  20. How do I load an HTML page in a div using JavaScript?
  21. How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
  22. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  23. \u200b (Zero width space) characters in my JS code. Where did they come from?
  24. Animated gif only loops once in Chrome and Firefox
  25. How are input parameters filled in javascript method chains?
  26. Facebook: Unsafe JavaScript issue (document.domain values should be same)
  27. Plotting points on a map with D3
  28. google chrome extension :: console.log() from background page?
  29. How to open mailto links in new tab for users that have gmail as the default mail handler?
  30. How to profile and get Javascript performance [duplicate]

Leave a Comment