Embed Dart DevTools in Chrome DevTools #1502

elliette · 2022-02-14T20:01:32Z

Adds a Dart panel to Chrome DevTools with the Dart DevTools debugger view embedded
Currently the Dart panel is only added for Dart apps with the data-ddr-dart-app, this is to gate the feature for internal Dart apps for now (currently they are the only ones that have the correct response headers for IFRAME-ing).
Also provides a quick fix for If Chrome DevTools and Dart DevTools are opened at the same time, both show a debugger overlay #1501

grouma

What happens in the following scenarios:

You have chrome devtools opened and connected but you try to click the extension again?
You click Start Debugging before a Dart app is detected?

grouma · 2022-02-14T23:29:18Z

dwds/debug_extension/CONTRIBUTING.md

@@ -6,6 +6,7 @@
 pub run build_runner build web -o build -r
 ```

+TODO(elliette): Building with DDC no longer works, figure out why.


Are you loading the extension correctly from the built directory?

To clarify, there are two directories:

/dwds/debug_extension/web

/dwds/debug_extension/build/web
Which one is the correct one to load from? Is it (1) for dart2js and (2) for DDC?

That's correct, unless something has changed.

Interesting. I've opened #1506 to investigate (this occurs on master branch as well)

Update the TODO with the issue number please.

grouma · 2022-02-14T23:32:22Z

dwds/debug_extension/web/background.dart

+    } else {
+      alert('''
+          Could not find a Dart app to start debugging. 
+          Has the Dart Debug Extension icon turned blue yet?


Maybe rephrase this to: The Dart Debug Extension will turn blue when a Dart application is detected.

That's better, changed to that

grouma · 2022-02-14T23:34:07Z

dwds/debug_extension/web/manifest.json

+        ],
+        "run_at": "document_end"
+    }]
+}


[nit] newline

This is how it autoformats on save for me 🤷‍♀️

You'll want to update your IDE settings.

Got it working, added old formatting back. Thanks!

grouma · 2022-02-14T23:35:19Z

dwds/debug_extension/web/panel.html

+      <p>Before debugging, please <strong>disable</strong> focus on the Sources panel for breakpoints:</p>
+      <code>Settings > Preferences > Sources > uncheck "Focus Sources panel when triggering a breakpoint"</code>
+      <img src="devtools_settings.png" alt="Picture of the setting in Chrome DevTools to disable.">
+      <p>And make sure the Dart Debug Extension is <strong>pinned</strong> to your Chrome profile:</p>


Why must they pin it?

Ah good point, they don't have to for this. Removed that part of the instructions.

elliette · 2022-02-16T00:43:54Z

What happens in the following scenarios:

You have chrome devtools opened and connected but you try to click the extension again?

You click Start Debugging before a Dart app is detected?

If you click the Dart Debug Extension while the embed Dart DevTools is debugging the app, you will see an alert: "DevTools is already opened on a different window." We could change that alert to make it more generic since it's not technically a different window.
If you click the button before a Dart app is detected, nothing will happen. Again, we could add an alert or error message so that the user knows they should wait.

Wdyt? These could be in this PR or follow up polish items.

grouma · 2022-02-16T00:46:14Z

What happens in the following scenarios:

You have chrome devtools opened and connected but you try to click the extension again?

You click Start Debugging before a Dart app is detected?

If you click the Dart Debug Extension while the embed Dart DevTools is debugging the app, you will see an alert: "DevTools is already opened on a different window." We could change that alert to make it more generic since it's not technically a different window.

Updating so the message is more generic makes sense to me.

If you click the button before a Dart app is detected, nothing will happen. Again, we could add an alert or error message so that the user knows they should wait.

Can we not make the button conditionally enabled?

Wdyt? These could be in this PR or follow up polish items.

It's fine to be left for a follow up PR.

grouma · 2022-02-16T00:49:26Z

dwds/debug_extension/CONTRIBUTING.md

@@ -6,6 +6,7 @@
 pub run build_runner build web -o build -r
 ```

+TODO(elliette): Building with DDC no longer works, figure out why.


Update the TODO with the issue number please.

elliette added 3 commits February 14, 2022 10:14

Embed Dart DevTools in Chrome DevTools

8af7385

Update DevHandler to only return Dart DevTools URI when requested

2d6f4fc

Clean up

085ff2c

elliette requested a review from grouma February 14, 2022 20:10

elliette added 2 commits February 14, 2022 14:53

Update versions

b1d2741

Fix failing test

657a030

grouma reviewed Feb 14, 2022

View reviewed changes

elliette added 5 commits February 14, 2022 16:34

Fix the other test

7594ed3

Respond to PR comments

1f10c4b

Fix formatting of manifest.json

c305901

Merge in master and rebuild

329240b

Recompile background.dart to JS

888e8ad

grouma approved these changes Feb 16, 2022

View reviewed changes

Update TODO

4f0c078

elliette merged commit 3fbe522 into dart-lang:master Feb 16, 2022

elliette deleted the b218721601 branch May 4, 2022 22:38

Embed Dart DevTools in Chrome DevTools #1502

Embed Dart DevTools in Chrome DevTools #1502

Uh oh!

Conversation

elliette commented Feb 14, 2022

Uh oh!

grouma left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elliette commented Feb 16, 2022

Uh oh!

grouma commented Feb 16, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!