tree: ca68f062be80c295714a63800342183e59f64c79 [path history] [tgz]
  1. accessibility/
  2. accessibility_test_runner/
  3. animation/
  4. application_test_runner/
  5. axe_core_test_runner/
  6. bindings/
  7. bindings_test_runner/
  8. browser_debugger/
  9. browser_sdk/
  10. changes/
  11. client_variations/
  12. cm/
  13. cm_headless/
  14. color_picker/
  15. common/
  16. component_docs/
  17. component_helpers/
  18. components/
  19. console/
  20. console_counters/
  21. console_test_runner/
  22. cookie_table/
  23. coverage/
  24. coverage_test_runner/
  25. cpu_profiler_test_runner/
  26. css_overview/
  27. dagre_layout/
  28. data_grid/
  29. data_grid_test_runner/
  30. developer_resources/
  31. device_mode_test_runner/
  32. diff/
  33. dom_extension/
  34. elements/
  35. elements_test_runner/
  36. emulated_devices/
  37. emulation/
  38. event_listeners/
  39. extensions/
  40. extensions_test_runner/
  41. formatter/
  42. formatter_worker/
  43. generated/
  44. global_typings/
  45. har_importer/
  46. heap_profiler_test_runner/
  47. heap_snapshot_model/
  48. heap_snapshot_worker/
  49. help/
  50. host/
  51. i18n/
  52. Images/
  53. inline_editor/
  54. input/
  55. inspector_main/
  56. issues/
  57. javascript_metadata/
  58. js_main/
  59. js_profiler/
  60. langpacks/
  61. layer_viewer/
  62. layers/
  63. layers_test_runner/
  64. legacy/
  65. lighthouse/
  66. lighthouse_test_runner/
  67. lighthouse_worker/
  68. linear_memory_inspector/
  69. main/
  70. media/
  71. mobile_throttling/
  72. network/
  73. network_test_runner/
  74. node_debugger/
  75. node_main/
  76. object_ui/
  77. perf_ui/
  78. performance_monitor/
  79. performance_test_runner/
  80. persistence/
  81. platform/
  82. profiler/
  83. protocol_client/
  84. protocol_monitor/
  85. quick_open/
  86. recorder/
  87. render_coordinator/
  88. resources/
  89. root/
  90. screencast/
  91. sdk/
  92. sdk_test_runner/
  93. search/
  94. security/
  95. security_test_runner/
  96. services/
  97. settings/
  98. snippets/
  99. source_frame/
  100. sources/
  101. sources_test_runner/
  102. startup/
  103. test_runner/
  104. text_editor/
  105. text_utils/
  106. theme_support/
  107. third_party/
  108. timeline/
  109. timeline_model/
  110. ui/
  111. wasmparser_worker/
  112. web_audio/
  113. webauthn/
  114. worker_main/
  115. worker_service/
  116. workspace/
  117. workspace_diff/
  118. .eslintrc.js
  119. BUILD.gn
  120. devtools_app.js
  121. devtools_app.json
  122. devtools_compatibility.js
  123. entrypoint_template.html
  124. inspector.js
  125. inspector.json
  126. integration_test_runner.html
  127. integration_test_runner.js
  128. integration_test_runner.json
  129. js_app.js
  130. js_app.json
  131. lighthouse_worker.js
  132. lighthouse_worker.json
  133. ndb_app.js
  134. ndb_app.json
  135. node_app.js
  136. node_app.json
  137. OWNERS
  138. README.md
  139. rollup.config.js
  140. shell.js
  141. shell.json
  142. Tests.js
  143. toolbox.ts
  144. verification.ts
  145. worker_app.js
  146. worker_app.json
front_end/README.md

Registering Extensions

Extensions can add functionality to the DevTools application. Each extension is declared up front, using declarative registration calls. The implementation for each extension lives in their respective folder, which are lazy-loaded to ensure a performant startup process of the DevTools application.

There are multiple types of extensions, including how DevTools handles its own internal business logic or to declare user-facing features with localized strings. There are 4 main types of extensions:

  • UI.ActionRegistration.Action
  • UI.View.View
  • Common.Settings.Setting
  • General type lookups.

Each specific extension is documented in the README of their respective folder.

The registration of a particular extension implemented in module must always be declared in a <module>-meta.ts in the same folder. The meta files should be included by all relevant entrypoints. If you want to make functionality available in all DevTools entrypoints, you can import it in shell.js.

For example, the meta declaration file is called network-meta.ts and defined in network/BUILD.gn:

devtools_entrypoint("meta") {
	entrypoint = "network-meta.ts"
	deps = [
		":bundle",
		"../root:bundle",
		"../ui:bundle",
	]
}

The meta devtools_entrypoint is added as a dependency to front_end/BUILD.gn.