Google Git
Sign in
chromium / devtools / devtools-frontend / refs/heads/chromium/3971
commit9708a7d8f867a13aab9a5d47ae785fce5df0310d[log] [tgz]
authore52a82bdfb5106bd658c2c5ea465e200 <vidorteg@microsoft.com>Thu Nov 07 18:14:33 2019
committerCommit Bot <commit-bot@chromium.org>Mon Nov 18 22:59:46 2019
treef1ef5cd6aef4f9fc85e2255a1b8c522044e26d12
parentaa133ed0962407c6ea731db3e83e2fc13b1013c6 [diff]
Verifying that the tab exists in TabbedEditorcontainer tab map before consuming it.

Root cause:
To set the error icon code passes tab_id to the setTabIcon function on this._tabbedPane but never verified that the tab_id exists in the tab Map structure and then proceed to modify its property which causes an error.

e.g
https://imgur.com/a/4Nb0Chu
In the attached image code wants to consume tab: "tab_43" but it does not exist in the current map of tabs
then it tries to modify the properties of an undefined object triggering the error:

Uncaught (in promise) TypeError: Cannot read property '_setIcon' of undefined
    at TabbedPane.setTabIcon (TabbedPane.js:formatted)
    at Sources.TabbedEditorContainer._addLoadErrorIcon (sources_module.js:formatted)
    at eval (sources_module.js:formatted)

Fix:
Verify that the tab_id exists on the map before modifying the object.
Change-Id: I51b704597d0b1b68eee2e099d747d97339e9f59d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1904287
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Reviewed-by: Mandy Chen <mandy.chen@microsoft.com>
Commit-Queue: Vidal Diazleal <vidorteg@microsoft.com>
1 file changed
tree: f1ef5cd6aef4f9fc85e2255a1b8c522044e26d12
  1. build_overrides/
  2. docs/
  3. front_end/
  4. node_modules/
  5. scripts/
  6. test/
  7. third_party/
  8. v8/
  9. .clang-format
  10. .eslintignore
  11. .eslintrc.js
  12. .gitattributes
  13. .gitignore
  14. .gn
  15. .npmignore
  16. .style.yapf
  17. BUILD.gn
  18. DEPS
  19. DESIGN_GUIDELINES.md
  20. ENG_REVIEW_OWNERS
  21. htaccess
  22. karma.conf.js
  23. LICENSE
  24. OWNERS
  25. package-lock.json
  26. package.json
  27. PRESUBMIT.py
  28. protocol.json
  29. README.md
  30. tsconfig.json
  31. WATCHLISTS
README.md

Chrome DevTools frontend

NPM package

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

Source code

The frontend is available on chromium.googlesource.com.

Design Guidelines

Please be aware that DevTools follows additional development guidelines.

Workflows

In order to make changes to DevTools frontend, build, run, test, and submit changes, several workflows exist. Having depot_tools set up is a common prerequisite.

Standalone workflow

As a standalone project, Chrome DevTools frontend can be checked out and built independently from Chromium. The main advantage is not having to check out and build Chromium. However, there is also no way to run layout tests in this workflow.

Checking out source

To check out the source for DevTools frontend only, follow these steps:

mkdir devtools
cd devtools
git clone https://chromium.googlesource.com/devtools/devtools-frontend
gclient config https://chromium.googlesource.com/devtools/devtools-frontend --unmanaged
Build

To build, follow these steps:

cd devtools-frontend
gclient sync
gn gen out/Default
autoninja -C out/Default

The resulting build artifacts can be found in out/Default/resources/inspector.

Run in Chromium

These steps work with Chromium 79 or later. To run the production build, use

(Requires brew install coreutils on Mac.)

<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)

You can inspect DevTools with DevTools by undocking DevTools and then open the developers tools (F12 on Windows/Linux, Cmd+Option+I on Mac).

Test

Test are available by running scripts in scripts/test/.

Create a change

Usual steps for creating a change work out of the box.

Managing dependencies
  • To sync dependencies from Chromium to DevTools frontend, use scripts/deps/roll_deps.py.
  • To roll the HEAD commit of DevTools frontend into Chromium, use scripts/deps/roll_to_chromium.py.
  • To update DevTools frontend's DEPS, use roll-dep.

Chromium workflow

DevTools frontend can also be developed as part of the full Chromium checkout.

Checking out source

Follow instructions to check out Chromium. DevTools frontend can be found under third_party/devtools-frontend/src/.

Build

Refer to instructions to build Chromium. To only build DevTools frontend, use devtools_frontend_resources as build target. The resulting build artifacts for DevTools frontend can be found in out/Default/resources/inspector.

Consider building with the GN flag debug_devtools=true to symlink to the original unminified source.

Run

Run Chrome with DevTools frontend bundled:

out/Default/chrome
Test

Test are available by running scripts in third_party/devtools-frontend/src/scripts/test/. After building content shell, we can also run layout tests that are relevant for DevTools frontend:

autoninja -C out/Default content_shell
third_party/blink/tools/run_web_tests.py http/tests/devtools
Create a change

Usual steps for creating a change work out of the box, when executed in third_party/devtools-frontend/src/.

Integrate standalone checkout into Chromium

If you prefer working on a standalone checkout of DevTools frontend, but want to build, test, and run inside the full Chromium checkout. This way, you combine the best of both worlds.

Disable gclient sync for DevTools frontend inside of Chromium by editing .gclient config. From chromium/src/, simply run

vim $(gclient root)/.gclient

In the custom_deps section, insert this line:

"src/third_party/devtools-frontend/src": None,

Then run

gclient sync -D

This removes the DevTools frontend dependency. We now create a symlink to refer to the standalone checkout:

(Note that the folder names do NOT include the trailing slash)

ln -s path/to/standalone/devtools-frontend third_party/devtools-frontend/src

Running gclient sync in chromium/src/ will update dependencies for the Chromium checkout. Running gclient sync in chromium/src/third_party/devtools-frontend/src will update dependencies for the standalone checkout.

Testing

Please refer to the overview document. The current test status can be seen at the test waterfall.

Additional references

Useful Commands

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

Source mirrors

DevTools frontend repository is mirrored on GitHub.

DevTools frontend is also 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.

Getting in touch