Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DevTools: Add links to components, directives, and lifecycle hooks in the profiler #45887

Open
AleksanderBodurri opened this issue May 5, 2022 · 6 comments
Open

DevTools: Add links to components, directives, and lifecycle hooks in the profiler #45887

AleksanderBodurri opened this issue May 5, 2022 · 6 comments
Assignees
@tiwarirahul
Labels
comp: devtools feature good first issue
Milestone
Backlog

Comments

@AleksanderBodurri
Copy link
Member

@AleksanderBodurri AleksanderBodurri commented May 5, 2022 •
edited

Description

We display some components in the profiler view (under Parent Hierarchy). Right now they are just a visual indication of the parent hierarchy for each component. Let's convert these into links so that clicking them automatically opens the component definition in the browser's source code inspector.
Screen Shot 2022-05-04 at 10 12 50 PM

We can also detect when the "Method" column matches an Angular lifecycle hook (ngDoCheck in the example below) and convert the text into a link that automatically inspects the lifecycle method for the component in the browser source code inspector
Screen Shot 2022-05-04 at 10 14 40 PM

Lets mimic the existing inspect functionality for the profiler. You can see examples of inspect in action by clicking the code icon when a component has been selected in the directive explorer (top right)

Screen Shot 2022-05-04 at 10 20 52 PM
@ngbot ngbot bot added this to the needsTriage milestone May 5, 2022
@AleksanderBodurri AleksanderBodurri added good first issue feature labels May 5, 2022
@ngbot ngbot bot removed this from the needsTriage milestone May 5, 2022
@ngbot ngbot bot added this to the Backlog milestone May 5, 2022
@tiwarirahul
Copy link

@tiwarirahul tiwarirahul commented May 11, 2022

Hi, I would like to take this if it is available.

@AleksanderBodurri
Copy link
Member Author

@AleksanderBodurri AleksanderBodurri commented May 11, 2022

Awesome, thank you @tiwarirahul 😄

I've assigned this issue to you.

@tiwarirahul
Copy link

@tiwarirahul tiwarirahul commented May 16, 2022 •
edited

Thanks @AleksanderBodurri !!
Started looking into it, but this being my first time contributing, I am not able to run the extension on windows machine, bazel giving weird errors. If you could give me some pointers on how can I start this, it will be very helpful.

C:\Self-Learning\Angular\angular\devtools>
`yarn run v1.22.17Angular\angular\devtools>yarn run devtools:devserver --verbose`
$ ibazel run //devtools/src:devserver --verbose
iBazel [7:00PM]: Querying for files to watch...

################################################################################
# iBazel does not support watching local_repository or --override_repository   #
# If this is a feature you'd like to add support for, please visit             #
# https://github.com/bazelbuild/bazel-watcher/issues/274                       #
################################################################################
Loading: 0 packages loaded
Loading: 0 packages loaded

Loading: 0 packages loaded
Loading: 0 packages loaded
Loading: 0 packages loaded

Loading: 0 packages loaded
iBazel [7:00PM]: Running //devtools/src:devserver
Loading:
Loading: 0 packages loaded
Analyzing: target //devtools/src:devserver (0 packages loaded, 0 targets configured)
Analyzing: target //devtools/src:devserver (1 packages loaded, 326 targets configured)
INFO: Analyzed target //devtools/src:devserver (1 packages loaded, 347 targets configured).

INFO: Found 1 target...

INFO: Elapsed time: 2.868s
INFO: 0 processes.
INFO: Build completed successfully, 0 total actions
INFO: Build completed successfully, 0 total actions
iBazel [7:00PM]: Launching with notifications
Loading:
Loading: 0 packages loaded
Analyzing: target //devtools/src:devserver (0 packages loaded, 0 targets configured)
INFO: Analyzed target //devtools/src:devserver (0 packages loaded, 0 targets configured).
INFO: Found 1 target...
[0 / 5] [Prepa] BazelWorkspaceStatusAction stable-status.txt
ERROR: C:/self-learning/angular/angular/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/BUILD.bazel:21:16: SassCompiler devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.css failed: Worker process did not return a WorkResponse:

---8<---8<--- Start of log, file at C:/self-learning/angular/_bazel_rahul_tiwari/dfizyhdr/bazel-workers/worker-19-SassCompiler.log ---8<---8<---
/bin/bash: C:/self-learning/angular/_bazel_rahul_tiwari/dfizyhdr/execroot/angular/bazel-out/host/bin/external/io_bazel_rules_sass/sass/sass.sh: No such file or directory
---8<---8<--- End of log ---8<---8<---
Target //devtools/src:devserver failed to build
Use --verbose_failures to see the command lines of failed build steps.
ERROR: C:/self-learning/angular/angular/devtools/src/BUILD.bazel:246:8 Splitting Javascript devtools/src/main.ts [esbuild] failed: Worker process did not return a WorkResponse:

---8<---8<--- Start of log, file at C:/self-learning/angular/_bazel_rahul_tiwari/dfizyhdr/bazel-workers/worker-19-SassCompiler.log ---8<---8<---
/bin/bash: C:/self-learning/angular/_bazel_rahul_tiwari/dfizyhdr/execroot/angular/bazel-out/host/bin/external/io_bazel_rules_sass/sass/sass.sh: No such file or directory
---8<---8<--- End of log ---8<---8<---
INFO: Elapsed time: 1.196s, Critical Path: 0.40s
INFO: 13 processes: 13 internal.
FAILED: Build did NOT complete successfully
ERROR: Build failed. Not running target
FAILED: Build did NOT complete successfully
iBazel [7:00PM]: Error starting process: fork/exec C:\Users\RAHULT~1\AppData\Local\Temp\bazel_script_path4096262122.bat: %1 is not a valid Win32 application.
iBazel [7:00PM]: Run start failed fork/exec C:\Users\RAHULT~1\AppData\Local\Temp\bazel_script_path4096262122.bat: %1 is not a valid Win32 application.

################################################################################
# Did you know iBazel can invoke programs like Gazelle, buildozer, and         #
# other BUILD file generators for you automatically based on bazel output?     #
# Documentation at: https://github.com/bazelbuild/bazel-watcher#output-runner  #
################################################################################

@AleksanderBodurri
Copy link
Member Author

@AleksanderBodurri AleksanderBodurri commented May 18, 2022

@tiwarirahul Interesting 😮

Found some issues with similar error messages:
angular/components#18880
#35981

Not sure the exact approach to diagnose this. Any ideas @devversion?

@tiwarirahul
Copy link

@tiwarirahul tiwarirahul commented May 18, 2022 •
edited

Thanks @AleksanderBodurri for the response. After trying so many things, this got fixed and working now.
I have tried re-installing bazel & node_modules and one key thing, this is only working when I am running it using git bash in admin mode, not running on cmd/powershell.

Now, I will be working on the original issue. As of now what I have looked so far, it seems that inspecting on sources works through node's position array and inside our profiler's node, we don't have position array. So I will be working to see, how we could have that information so that while selecting a node on click, we can mimic the behavior as we have on DirectiveExplorer.

so is that the correct direction I am moving or do you have any pointers for me on where I should start on this.

@AleksanderBodurri
Copy link
Member Author

@AleksanderBodurri AleksanderBodurri commented May 24, 2022 •
edited

@tiwarirahul I would start by taking a look at

angular/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts

Line 25 in 2a1ff17

export const start = (onFrame: (frame: ProfilerFrame) => void): void => {
and seeing what data we have access to as the profiler is running. Keeping track of the element position might not be good enough because the position might change between profile frames. I'm thinking we can do something like:

  • Create a lookup object that maps some generated ID for a directive to a directive constructor
  • As the profiler is running, add each id / directive constructor key-value pair to the object
  • Make sure the id gets passed through to the profiler.
  • When a directive is clicked in the profiler, use the id as a key to lookup the directive constructor from the lookup object.
  • When the profiler is cleared, reset the lookup object.

In the case where someone uploads a profile instead of recording it, we can disable this functionality.

Let's try to get this working for directive/components first and then we can try a similar approach for lifecycles.

Apologies for the late reply 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tiwarirahul tiwarirahul

Labels
comp: devtools feature good first issue
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
2 participants
@tiwarirahul @AleksanderBodurri