leonvogt/hotwire-dev-tools

Dev Tools for Turbo and Stimulus

hotwire-dev-tools's Issues

Add an Event list

Maybe we could add an event list that logs various Turbo and Stimulus events. For example:

11:56:05  turbo:load 
11:56:06  turbo:click
11:56:07  turbo:before-stream - received Turbo Stream: [...]
11:58:01  turbo:before-submit
11:58:02  turbo:submit-end
11:58:03  turbo:morph

Since this can pretty quickly become noisy, we probably want to have a way to filter the possible events.

Highlighting Turbo Frames could break layouts

When highlighting Turbo Frames we:

• Set the display property of the frame to block
• Set a border-radius of 5px to the frame
• Insert a info badge with position: relative; to the frame

All of these have the potential to break layouts.

Not quite sure how we can avoid this.
The most problematic is probably the display: block property.
We could try to wrap the frame in a div and apply the styles to the div instead.
That way if a user has some custom styles for the frame, they won't be overwritten.
This would solve some of the problems, but I'm sure there are still many situations where this would break.

---

Another solution would be, to have an extra div with position: absolute; on top of the Turbo Frame.
Similar to the overlay function we have for highlighting whole elements and not just borders.

CSS for the checkbox (switch style) elements inside popup.html need 'user-select: none'

Hi Leon,

as the Title mentioned already, i discovered some issues whilst iam accidentally selected some text during click on the checkbox (switch) elements inside the popup.html, see screenshot below.

Add Stimulus controller highlighting

Similar to the Turbo Frame highlighting. Maybe also with the option to highlight all the targets / outlets?
But before doing this, it would make sense to first finish Add more customization options to the Turbo Frame highlighting, so we can reuse the additional options for highlighting.

Option to ignore empty Turbo Frames

Add option to not highlight empty Turbo Frames

Add a checkbox option for console logging of stream events

Hi,

another cool idea is to add a checkbox for logging of stream events, thus we dont need to write own debug code.

Track time of eager-loading Turbo Frames

Track the time it takes for a eager-loaded (or lazy-loaded) Turbo Frames to load.
This information could be displayed in the Turbo Frame tab from the detail panel, or directly in the DOM besides the Turbo Frame info badge.

Icon visibility in dark mode browser

Hi, I just installed this extension, and I have hard time seeing it in my toolbar in dark mode browser. It's just a minor annoyance, nothing serious, but if it's possible to maybe have different icon for dark mode, or make icon work in both modes (maybe black lightning bolt with white outline would work?), it would be neat :)

Add custom color highlighting for nested Turbo Frames

Hi,

nested turbo frames should have a differnt color so we can distinguish there boundings.

<div class="w-75 mx-auto mt-9">
	<%= turbo_frame_tag "foo" do %>
		<p>stuff in "foo" frame</p>
		<%= turbo_frame_tag "bar" do %>
			<p>some stuff in inner "bar" frame</p>
		<% end %>
	<% end %>
</div>

looks actually like this...

Actually i don't know how hard it is to implement, but maybe in a future version, that whould be a nice feature.

Indicate that a Turbo Frame has been updated

It would be nice to have a visual indication that a Turbo Frame has been updated.
We could probably use a MutationObserver to monitor the busy and completed attribute on the frame, as documented here.
Or maybe even listen to the turbo:frame-render event.

Improve Element Highlighting

Currently, we have two methods to highlight Turbo Frames:

1. Direct Outline:
   • Add an outline directly to the frame.
   • Set the display property to block.

This approach is more reliable and is the default behavior of this extension.
However, setting the display property to block can break the layout of the page.

2. Additional div Element:
   • Add a div element with the same dimensions as the frame.
   • Set the position to absolute and add the outline to the div.

This approach is less intrusive to the page layout but can be less reliable. If the frame changes size and we don’t detect it, the outline will be incorrect. It also impacts performance as it requires adding multiple additional elements to the page.

---

Highlighting Stimulus controllers presents a similar issue. When we add an outline to the controller element, we assume the element and a potential outline is visible. However, if the element has for example display: contents, the outline won’t be visible.

---

I currently don't have a good solution for this, but I hope we can come up with a more reliable method in the future for highlighting elements.

inject.js got injected on all WebSites, no matter if "Show Panel" is toggled or not

Hi,

seems inject.js got inject on all Sites by default, iam not sure if this is intentionally. Other plugins eg. Livereload inject things on user action, not by default.

Affected version: 0.2.1
(Screenshots where made within version 0.2.0, but issue still exist)

Propagate the version inside popup.html

Hi,

maybe a god enhancement to propagate the version inside popup.html.

const version = chrome.app.getDetails().version

Helps to indentify the version inside issues (Screenshots).

Display warnings

Like:

• Multiple Turbo Frames with the same ID
• Turbo Stream with a non existing target
• Empty data-controller attribute

Prevent CSS leak

Currently the HTML and CSS of the Dev Tools lives in the same context as the inspected web page. This means that the web page can alter the styles of the Dev Tools, which is far from ideal.

The proper solution seems to be, to use custom elements and scope the styles of the Dev Tools to the shadow DOM of the
custom elements.
To create custom elements in a content script however, isn't as straight forward as I would like.
After some research, I found two ways to create custom elements in a content script (there might be more):

• Using polyfills
• Using a injection pipeline like ProjectVisBug does (Background service worker which injects a scripts to the web page which itself injects the main content script)
  Also there still seems to be lack of background service worker support in Firefox for Manifest v3.
  So we would need to support two different Manifests to support Chrome and Firefox. (Not sure about Safari)

I love neither of these solutions, because of the overhead and complexity they would introduce.
Even though it would be nice to have custom elements, maybe it's enough to use a shadow DOM for the Dev Tools content.
This would solve the style leak issue and is much easier to implement.

Highlight non registered Stimulus controllers

It would be handy to have a "connected indicator" in the Stimulus tab, which indicates if the Stimulus identifier was found on the window.Stimulus object.

List of all Stimulus controllers, in the current context:

window.Stimulus?.controllers.map(controller => controller.scope.identifier)

---

Since the content script doesn't have access to the same window object, we have to inject a custom JS file which will gather the currently registered controllers.

Also, although window.Stimulus is the default we probably need to let the user configure the mapped window application.

References:

• https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#host-page-communication
• https://developer.chrome.com/docs/extensions/reference/manifest/web-accessible-resources
• https://dev.to/qmenoret/browser-extension-extension-architecture-13m1

Error: Extension context invalidated

Hi,

content.js throws errors on various sites (for whatever reason), try to reading "options" from storage.

Add application name option

Currently this Dev Tools makes an assumption, that your Stimulus application is assigned to window.Stimulus and Turbo to window.Turbo.
Since you can customize these names, it would be nice to have configurable options for the Stimulus and Turbo application name.

The only tricky part will probably be to the fetch the application name in the inject.js file, since we don't have access to the chrome.storage API.
One option would be to define a meta tag with the application name, before loading the inject.js file.

Display additional Hotwire infos

Like:

• Turbo Drive activated?
• Turbo Prefetch activated?
• Turbo -/ Stimulus version (if that is somehow possible to figure out programmatically)
• Meta tags
  • turbo-refresh-method
  • turbo-refresh-scroll
  • turbo-visit-control
  • turbo-cache-control
  • view-transition

Show connection between elements

Inspired by the TurboBoost Devtools, it would be nice to visualize the connections related to a Turbo Frame or Stimulus Controller.
Like display the connection between a:

• Link and its corresponding Turbo Frame
• Form and its corresponding Turbo Frame
• Stimulus Controller element and its Targets
• Stimulus Controller element and its Outlets

Monitor `<turbo-cable-stream-source>` elements

We could look for <turbo-cable-stream-source> elements and monitor the connected attribute on it.
That way we could show how many websockets are open and print a warning if the connection gets lost.

Enhance Turbo Frame blacklist

• Use CSS selectors instead of a comma separated list of ID's
• Avoid global blacklist - scope list to the respective URL

Show Panel on per page/project basis (not always on every page)

Hi,

a wish from me. The plugin is nice, but whould be better to just show the panel (bottom right) on per page/project basis (not on every page/tab opened in the browser)!?

I dont know how complicated it is to implement, such a behavior. The browser own devtools panel does this already, maybe worth a visit on there solution.

Thanks.

zooming the whole page also scales then detail_panel content

Hi,

as the title mentioned already, the detail_panel scales with the page zoom, but expected behavior is to stay at the inital scale!?

Here a screenshot....

popup.js throws a URL related error on opening Inspector (using the menu entry)

Hi,

during bug hunting on #47 , i found a new bug in popup.js (see Screenshots on Line 291)...

that bug appeared inside my Chrome Version 125.0.6422.141 (Official Build) (64-bit), if i use the right click menu on the extension icon to visit Inspect popup, see Screenshot below...

Shortcut Alt+Shift+A doesn't seem to work in Chrome

Hi,

as the title already mentioned, the shortcut doesn't work. I tried in Chrome Version 125.0.6422.141 (Official Build) (64-bit)

In Firefox it worked.

Highlight DOM elements on hover

It would be nice to have the corresponding DOM elements highlighted when hovering over a Stimulus controller, Turbo Frame, or Turbo Stream with targets.
Similar to what React Developer Tools does.

Color picker doesn't work in Firefox

When selecting the color picker in the popup, for picking an outline color, the popup should stay open so we can listen to the change event on the input and update the Dev Tool settings.

When selecting the color picker in the popup to choose an outline color, the popup should remain open so we can listen to the change event on the input and update the Dev Tool settings accordingly.

This works as expected in Chrome and Safari, but not in Firefox.
In Firefox, clicking on the color picker causes the popup to close immediately. This prevents the color from being updated.

Screen.Recording.2024-06-05.at.09.54.52.mov

Add some radio input to the plugin, which allows us rearange of the panel overlay

Hi,

sometimes it can be hard to debug a page item, if the overlay is in there way (occupies the same coordinates and space). So it maybe a good idea to add some radio inputs to the options panel for...

• left top / bottom
• right top / bottom

...so the panel used that information to change there render location.

Add more customization options to the Turbo Frame highlighting

Like:

• z-index
• font-size
• outline style (solid / dashed / thick / ridge ...)
• outline width
• outline offset

Use a different color highlight for Turbo Frames with a `src` attribute

Could be handy to quickly see, which Turbo Frames were eager / lazy loaded.

Storage API error: `MAX_WRITE_OPERATIONS_PER_MINUTE`

When updating the options in the popup too many times in a short time, the Chrome browser isn't to happy about it and print the error: This request exceeds the MAX_WRITE_OPERATIONS_PER_MINUTE quota. and won't save the changes. (Not sure about Firefox's behaviour yet)

See the storage API for more information about the error.
It seems like, we should not exceed 2 write operations per second.

---

Possible solutions that come to mind:

• Throttle the save operations with a debounce mechanism
• Manually track the amount of changes and print a user friendly warning in the popup, when too many changes are made in a short time