JSPM

chrome-devtools-frontend

1.0.429671
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 28415
  • Score
    100M100P100Q146036F
  • License SEE LICENSE IN https://chromium.googlesource.com/chromium/src/+/master/LICENSE

Chrome DevTools UI

Package Exports

  • chrome-devtools-frontend/front_end/bindings/TempFile.js
  • chrome-devtools-frontend/front_end/common/Color.js
  • chrome-devtools-frontend/front_end/common/Object.js
  • chrome-devtools-frontend/front_end/common/ParsedURL.js
  • chrome-devtools-frontend/front_end/common/ResourceType.js
  • chrome-devtools-frontend/front_end/common/SegmentedRange.js
  • chrome-devtools-frontend/front_end/common/TextRange.js
  • chrome-devtools-frontend/front_end/common/TextUtils.js
  • chrome-devtools-frontend/front_end/common/UIString.js
  • chrome-devtools-frontend/front_end/components_lazy/FilmStripModel.js
  • chrome-devtools-frontend/front_end/gonzales/SCSSParser.js
  • chrome-devtools-frontend/front_end/gonzales/gonzales-scss.js
  • chrome-devtools-frontend/front_end/heap_snapshot_worker/AllocationProfile
  • chrome-devtools-frontend/front_end/heap_snapshot_worker/HeapSnapshot
  • chrome-devtools-frontend/front_end/heap_snapshot_worker/HeapSnapshotLoader
  • chrome-devtools-frontend/front_end/heap_snapshot_worker/HeapSnapshotWorker
  • chrome-devtools-frontend/front_end/heap_snapshot_worker/HeapSnapshotWorkerDispatcher
  • chrome-devtools-frontend/front_end/inspector.html
  • chrome-devtools-frontend/front_end/layers/LayerTreeModel.js
  • chrome-devtools-frontend/front_end/platform/utilities.js
  • chrome-devtools-frontend/front_end/sdk/CPUProfileDataModel.js
  • chrome-devtools-frontend/front_end/sdk/CSSMatchedStyles.js
  • chrome-devtools-frontend/front_end/sdk/CSSMedia.js
  • chrome-devtools-frontend/front_end/sdk/CSSMetadata.js
  • chrome-devtools-frontend/front_end/sdk/CSSProperty.js
  • chrome-devtools-frontend/front_end/sdk/CSSRule.js
  • chrome-devtools-frontend/front_end/sdk/CSSStyleDeclaration.js
  • chrome-devtools-frontend/front_end/sdk/CookieParser.js
  • chrome-devtools-frontend/front_end/sdk/LayerTreeBase.js
  • chrome-devtools-frontend/front_end/sdk/NetworkManager.js
  • chrome-devtools-frontend/front_end/sdk/NetworkRequest.js
  • chrome-devtools-frontend/front_end/sdk/ProfileTreeModel.js
  • chrome-devtools-frontend/front_end/sdk/ServerTiming.js
  • chrome-devtools-frontend/front_end/sdk/Target.js
  • chrome-devtools-frontend/front_end/sdk/TargetManager.js
  • chrome-devtools-frontend/front_end/sdk/TracingModel.js
  • chrome-devtools-frontend/front_end/timeline/TimelineLoader.js
  • chrome-devtools-frontend/front_end/timeline/TimelineTreeView.js
  • chrome-devtools-frontend/front_end/timeline/TimelineUIUtils.js
  • chrome-devtools-frontend/front_end/timeline_model/TimelineFrameModel.js
  • chrome-devtools-frontend/front_end/timeline_model/TimelineIRModel.js
  • chrome-devtools-frontend/front_end/timeline_model/TimelineJSProfile.js
  • chrome-devtools-frontend/front_end/timeline_model/TimelineModel.js
  • chrome-devtools-frontend/front_end/timeline_model/TimelineProfileTree.js
  • chrome-devtools-frontend/front_end/ui_lazy/SortableDataGrid.js
  • chrome-devtools-frontend/package.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chrome-devtools-frontend) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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/WebKit/Source/devtools/ in Chromium's git repo.

Getting Started

  1. Clone the repo
  2. Go to repo root and run: npm start
    • This launches Chrome Canary and starts the dev server with 1 command
  3. 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)

Hacking

Testing

Basic:

  • npm test - builds devtools and runs all inspector layout 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).

Advanced:

  • npm test -- --fetch-content-shell - even 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 -- -f --child-processes=16 - pass in additional flags to the test harness
  • npm test -- inspector/sources inspector/console - run specific tests
  • npm test -- inspector/cookie-resource-match.html --debug-devtools - debug a specific test (non-bundled & minified). You can use "-d" as a shorthand for "--debug-devtools".
  • npm run test:build - only builds devtools (in debug mode)
  • npm run test:run - only runs devtools tests

Development

Getting in touch