DevTools: Improper function call in Styles pane A bug in the Styles pane exists due to un-followed typing within the _setActiveProperty function. The line previous to the expression in question goes through treeElement.property, which is a StylePropertyTreeElement. Its property `ownerStyle` returns an SDK.CSSStyleDeclaration. We can see that SDK.CSSStyleDeclaration is initialized with a property `parentRule` of type SDK.CSSRule, which is the inferred type of `rule` in the outcome of the line in question. However, SDK.CSSRule does not contain a member function called `selectorText()`; only SDK.CSSStyleRule does. Ostensibly it's possible that this is of type CSSKeyframesRule or CSSKeyframeRule, and neither of these contains meaningful definitions of something that matches a "selector," so it isn't really practically possible to address via polymorphism. This corrects the value-check and only calls the function if the rule in question is of type SDK.CSSStyleRule. Change-Id: I960e2b49ce9734134b55007149a39a97861739dd Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1872447 Reviewed-by: Lorne Mitchell <lomitch@microsoft.com> Commit-Queue: Lorne Mitchell <lomitch@microsoft.com>
The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.
The frontend is available on chromium.googlesource.com.
As standalone project, Chrome DevTools front-end can be checked out and built independently from Chromium.
Get depot_tools first.
mkdir devtools cd devtools git clone https://chromium.googlesource.com/devtools/devtools-frontend gclient config https://chromium.googlesource.com/devtools/devtools-frontend --unmanaged
cd devtools-frontend gclient sync gn gen out/Default autoninja -C out/Default
To run the production build, use
<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/resources/inspector)
To run the debug build (directly symlinked to the original unminified source files), build both Chromium and DevTools frontend with the GN flag debug_devtools=true, and use
<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/resources/inspector/debug)
DevTools frontend can also be developed as part of Chromium.
Follow instructions to check out Chromium. DevTools frontend can be found under chromium/src/third_party/devtools-frontend/src/.
Refer to instructions to build Chromium. To only build DevTools frontend, use devtools_frontend_resources as build target.
npm run format-pyFormats 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 yapfor if you want to enable multiprocessing in Python 2.7,pip install futures
DevTools frontend 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.
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.
@ChromeDevTools on Twitter
Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools