|
| 1 | +# Profiling devtools performance |
| 2 | + |
| 3 | +If you experience performance issues while using the devtools, this guide will explain how to profile the devtools and share the result to the team. |
| 4 | + |
| 5 | +## 1. Setup environment |
| 6 | + |
| 7 | +First you need to clone and setup the devtools repository as [explained in the contributing guide](./contributing.md#development). |
| 8 | + |
| 9 | +## 2. Run Chrome with web security disabled |
| 10 | + |
| 11 | +The development shell for the devtools is a page with a development version of the devtools and an iframe mimicking the page being inspected. |
| 12 | + |
| 13 | +Normally inspecting the iframe would only work on the same domain (here `localhost`), but we can workaround this limitation by disabling web security in Chrome. |
| 14 | + |
| 15 | +```bash |
| 16 | +/path/to/chrome --disable-web-security --disable-site-isolation-trials --user-data-dir="temp-chrome-data" |
| 17 | +``` |
| 18 | + |
| 19 | +::: danger |
| 20 | +Do not browse to any other website while using this Chrome instance, as it will disable some security features. |
| 21 | +::: |
| 22 | + |
| 23 | +## 3. Open dev shell |
| 24 | + |
| 25 | +Make sure you have run both the `build:watch` and the `dev:vue3` scripts as [explained in the contributing guide](./contributing.md#development). |
| 26 | + |
| 27 | +In the Chrome window, open the devtools development shell at `http://localhost:8090`. |
| 28 | + |
| 29 | +You can shen change the target URL in the toolbar on top of the devtools: |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | +## 4. Create a profiling session |
| 34 | + |
| 35 | +Open the Chrome devtools and go to the Performance tab. |
| 36 | + |
| 37 | +Start a performance recording by clicking the record button: |
| 38 | + |
| 39 | + |
| 40 | + |
| 41 | +Then try to reproduce the performance issues by using your application and the devtools for 10 or 20 seconds. |
| 42 | + |
| 43 | +## 5. Export the profiling data |
| 44 | + |
| 45 | +When your are done, stop the recording by clicking the stop button: |
| 46 | + |
| 47 | + |
| 48 | + |
| 49 | +Then click the "Save profile..." button to export the profiling data: |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +## 6. Share the profiling data |
| 54 | + |
| 55 | +Check your Vue devtools version number in the Extensions tab of Chrome: |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +Post a new comment [here](https://github.com/vuejs/devtools/discussions/1968) with the following information: |
| 60 | + |
| 61 | +- Run `npx envinfo --system --browsers` and paste the result. Make sure is contains your OS version and Chrome version. |
| 62 | +- Vue Devtools version. |
| 63 | +- Upadload the profiling data file in the comment (you can drag and drop it in the comment box). |
| 64 | + |
| 65 | +Example: |
| 66 | + |
| 67 | +``` |
| 68 | + System: |
| 69 | + OS: Linux 5.19 Fedora Linux 36 (Workstation Edition) |
| 70 | + CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor |
| 71 | + Memory: 34.66 GB / 62.71 GB |
| 72 | + Container: Yes |
| 73 | + Shell: 5.1.16 - /bin/bash |
| 74 | + Browsers: |
| 75 | + Chrome: 106.0.5249.103 |
| 76 | + Firefox: 105.0.1 |
| 77 | +
|
| 78 | + Vue Devtools version: 6.4.3 |
| 79 | +
|
| 80 | + (Don't forget to upload the profile data file!) |
| 81 | +``` |
| 82 | + |
| 83 | +Thank you for your contribution! |
0 commit comments