14 |
68 |
82 |
83 |
99 |
84 |
86 |
87 |
88 |
90 |
91 |
92 |
94 |
95 | Native
93 |
96 |
98 |
17 | {key}:
18 | onEdit([...path, key])}
22 | onSave={(newVal) => onSave([...path, key], newVal)}
23 | onCancel={() => onCancel([...path, key])}
24 | />
25 |
26 | {:else}
27 | {key}:
28 | {#if isArray(value)}
29 | {value.length}
30 | {/if}
31 |
40 | {i}:
41 | onEdit([...path, i])}
45 | onSave={(newVal) => onSave([...path, i], newVal)}
46 | onCancel={() => onCancel([...path, i])}
47 | />
48 |
49 | {:else}
50 | {i}:
51 | {#if isArray(item)}
52 | Array [{item.length}]
53 | {/if}
54 |
81 |
82 |
83 | {#if isComplex(valueObject.value)}
84 | {valueObject.name}
85 | {#if isArray(valueObject.value)}
86 | Array ({valueObject.value.length})
87 | {/if}
88 |
103 |
105 |
106 |
107 |
108 |
109 |
125 |
126 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
91 | {valueObject.name}:
92 | handleEdit(["root"])}
97 | onSave={(newVal) => handleSave(["root"], newVal)}
98 | onCancel={() => handleCancel(["root"])}
99 | />
100 |
101 | {/if}
102 |
110 |
124 | Type: {valueObject.type}
111 |
112 | {dataAttribute}
113 |
115 |
116 | {`this.${valueObject.name}Value`}
117 |
119 |
120 | {`this.has${capitalizeFirstChar(valueObject)}Value`}
121 |
123 |
2 |
3 | # Hotwire Dev Tools
4 |
5 | **Hotwire Dev Tools is a browser extension designed to help developers inspect their Turbo and Stimulus applications.**
6 |
7 | 
8 |
9 | [](https://addons.mozilla.org/en-US/firefox/addon/hotwire-dev-tools/)
10 | [](https://chromewebstore.google.com/detail/hotwire-dev-tools/phdobjkbablgffmmgnjbmfbbofnbkajc)
11 | [](https://apps.apple.com/ch/app/hotwire-dev-tools/id6503706225)
12 |
13 |
14 |
15 | ## Features
16 |
17 | **Turbo**:
18 |
19 | - Highlight Turbo Frames
20 | - Monitor incoming Turbo Streams
21 | - Display Turbo context information (Turbo Drive enabled, morphing enabled, ...)
22 | - Log all Turbo related events
23 | - Log warning when a Turbo Frame ID is not unique
24 | - Log warning when an element has `data-turbo-permanent` but no ID or a non-unique ID
25 | - Highlight Turbo Frame changes
26 |
27 | **Stimulus**:
28 |
29 | - Highlight Stimulus controllers
30 | - List all Stimulus controllers on the page
31 | - Log warning when a `data-controller` doesn't match any registered controller
32 | - Log warning when a Stimulus target is not nested within the corresponding controller
33 |
34 | ## Installation
35 |
36 | The extension can be installed at:
37 |
38 | - [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/hotwire-dev-tools/)
39 | - [Chrome Web Store](https://chromewebstore.google.com/detail/hotwire-dev-tools/phdobjkbablgffmmgnjbmfbbofnbkajc)
40 | - [App Store for Safari](https://apps.apple.com/ch/app/hotwire-dev-tools/id6503706225)
41 |
42 | ## Usage
43 |
44 | Once installed, click the extension icon (or press Alt+Shift+S) to open the DevTools options.
45 | From there, you can enable/disable the features you want to use.
46 |
47 | > [!NOTE]
48 | > On Firefox you may need to select "Always allow on example.com" to enable the extension on your site
49 |
50 | ## Development
51 |
52 | - Fork the project locally
53 | - `npm install`
54 | - `npm run dev` - to build the extension and watch for changes
55 | - `npm run build` - to bundle the extension into static files for production
56 | - `npm run format` - to format changes with Prettier
57 |
58 | > [!NOTE]
59 | > By default, the extension will be built for Chrome. To build for Firefox or Safari just add `firefox` or `safari` as an argument to the build command: `npm run build firefox` or `npm run build safari`.
60 |
61 | ### Test on Chrome
62 |
63 | 1. Open Chrome and navigate to `chrome://extensions/`
64 | 2. Enable Developer mode
65 | 3. Click on `Load unpacked` and select the `public` folder (make sure to build the extension first)
66 |
67 | ### Test on Firefox
68 |
69 | The easiest way is to make use of the [web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) tool:
70 |
71 | ```bash
72 | npm install --global web-ext
73 |
74 | cd public
75 | web-ext run
76 | ```
77 |
78 | That will open a new Firefox instance with the extension installed and hot reloading enabled.
79 |
80 | ### Test on Safari
81 |
82 | First [configure Safari to run unsigned extensions](https://developer.apple.com/documentation/safariservices/safari_web_extensions/running_your_safari_web_extension#3744467):
83 |
84 | 1. Choose Safari > Settings
85 | 2. Select the Advanced tab
86 | 3. Check the "Show features for web developers" box
87 | 4. Select the Developer tab.
88 | 5. Check the Allow unsigned extensions box.
89 |
90 | This may depend on the version of macOS and Safari you are using.
91 | So if you can't find the settings, you may need to search for the specific version you are using.
92 |
93 | Then you can load the extension by following these steps:
94 |
95 | 1. Open Xcode
96 | 2. Choose "Open Existing Project"
97 | 3. Select the [xcode/HotwireDevTools.xcodeproj](./xcode/HotwireDevTools.xcodeproj) workspace (blue icon)
98 | 4. Build the project (you may need to select a team in the project settings -> Signing & Capabilities)
99 | 5. Open Safari > Settings > Extensions and enable the Hotwire Dev Tools extension
100 |
101 | ## Contributing
102 |
103 | Bug reports and pull requests are welcome on GitHub at https://github.com/leonvogt/hotwire-dev-tools.
104 |
105 | ### Coding Standards
106 |
107 | This project uses Prettier to format the code and ensure a consistent style.
108 |
109 | Please run `npm run format` prior to submitting pull requests.
110 |
111 | ---
112 |
113 | This Dev Tool were inspired by [turbo-devtool](https://github.com/lcampanari/turbo-devtools) and [turbo_boost-devtools](https://github.com/hopsoft/turbo_boost-devtools) 🙌
114 |
--------------------------------------------------------------------------------
/src/lib/devtool.js:
--------------------------------------------------------------------------------
1 | import { loadCSS } from "$utils/utils"
2 | import { getContext, setContext } from "svelte"
3 |
4 | export default class Devtool {
5 | constructor(origin = null) {
6 | this.options = this.defaultOptions
7 | this.registeredStimulusControllers = []
8 | this.turboDetails = {}
9 |
10 | this.origin = origin
11 | this.detailPanelCSSContent = null
12 | }
13 |
14 | setOptions = async () => {
15 | this.options = await this.getOptions()
16 | }
17 |
18 | getOptions = async () => {
19 | const globalOptions = await this.globalUserOptions()
20 | const originOptions = await this.originOptions()
21 |
22 | let options = originOptions || globalOptions || this.defaultOptions
23 | options = this.addMissingDefaultOptions(options)
24 | return options
25 | }
26 |
27 | globalUserOptions = async () => {
28 | const options = await chrome.storage.sync.get("options")
29 | return options?.options
30 | }
31 |
32 | originOptions = async () => {
33 | const pageOptions = await chrome.storage.sync.get(this.origin)
34 | return pageOptions[this.origin]?.options
35 | }
36 |
37 | saveOptions = async (options, saveToOriginStore = null) => {
38 | const newOptions = { ...this.options, ...options }
39 | let dataToStore = newOptions
40 | let key = "options"
41 |
42 | if (saveToOriginStore === null) {
43 | saveToOriginStore = await this.originOptionsExist()
44 | }
45 |
46 | if (saveToOriginStore) {
47 | dataToStore = this.origin ? { options: newOptions } : newOptions
48 | key = this.origin || "options"
49 | }
50 |
51 | chrome.storage.sync.set({ [key]: dataToStore }, () => {
52 | const error = chrome.runtime.lastError
53 | if (error) {
54 | if (error.message.includes("MAX_WRITE_OPERATIONS_PER_MINUTE")) {
55 | console.error("Hotwire Dev Tools: Whoops! We are sorry but you've reached the maximum number of options changes allowed per minute. Please try again later.")
56 | } else {
57 | console.error("Hotwire Dev Tools: Error while saving options:", error)
58 | }
59 | return
60 | }
61 |
62 | // Options were saved successfully
63 | this.options = newOptions
64 | })
65 | }
66 |
67 | removeOptionsForOrigin = async () => {
68 | await chrome.storage.sync.remove(this.origin)
69 | }
70 |
71 | originOptionsExist = async () => {
72 | const options = await this.originOptions()
73 | return !!options
74 | }
75 |
76 | detailPanelCSS = async () => {
77 | if (this.detailPanelCSSContent) return this.detailPanelCSSContent
78 |
79 | this.detailPanelCSSContent = await loadCSS(chrome.runtime.getURL("styles/hotwire_dev_tools_detail_panel.css"))
80 | return this.detailPanelCSSContent
81 | }
82 |
83 | shouldRenderDetailPanel = () => {
84 | const { show, showStimulusTab, showTurboFrameTab, showTurboStreamTab } = this.options.detailPanel
85 | return show && (showStimulusTab || showTurboFrameTab || showTurboStreamTab)
86 | }
87 |
88 | addMissingDefaultOptions = (options) => {
89 | if (options.addOptionsForVersion === this.version) return options
90 |
91 | const defaultOptions = this.defaultOptions
92 | for (const key in defaultOptions) {
93 | if (options[key] === undefined) {
94 | options[key] = defaultOptions[key]
95 | }
96 | }
97 |
98 | options.addOptionsForVersion = this.version
99 | return options
100 | }
101 |
102 | get version() {
103 | return chrome.runtime.getManifest().version
104 | }
105 |
106 | get isFirefox() {
107 | return navigator.userAgent.toLowerCase().indexOf("firefox") > -1
108 | }
109 |
110 | get defaultOptions() {
111 | return {
112 | turbo: {
113 | highlightFrames: false,
114 | highlightFramesOutlineWidth: "2px",
115 | highlightFramesOutlineStyle: "dashed",
116 | highlightFramesOutlineColor: "#5cd8e5",
117 | highlightFramesBlacklist: "",
118 | highlightFramesWithOverlay: false,
119 | highlightFramesChanges: false,
120 | ignoreEmptyFrames: false,
121 | consoleLogTurboStreams: false,
122 | },
123 | stimulus: {
124 | highlightControllers: false,
125 | highlightControllersOutlineWidth: "2px",
126 | highlightControllersOutlineStyle: "dashed",
127 | highlightControllersOutlineColor: "#77e8b9",
128 | highlightControllersBlacklist: "",
129 | },
130 | detailPanel: {
131 | show: false,
132 | showStimulusTab: true,
133 | showTurboFrameTab: true,
134 | showTurboStreamTab: true,
135 | collapsed: false,
136 | currentTab: "hotwire-dev-tools-stimulus-tab",
137 | },
138 | monitor: {
139 | events: [],
140 | },
141 | logWarnings: true,
142 | }
143 | }
144 | }
145 |
146 | const DEFAULT_KEY = "$_devtool_state"
147 |
148 | export const getDevtoolInstance = (key = DEFAULT_KEY) => {
149 | return getContext(key)
150 | }
151 |
152 | export const setDevtoolInstance = (key = DEFAULT_KEY) => {
153 | const devtoolInstance = new Devtool()
154 | return setContext(key, devtoolInstance)
155 | }
156 |
--------------------------------------------------------------------------------
/src/utils/icons.js:
--------------------------------------------------------------------------------
1 | export const info = `
2 |
6 | `
7 |
8 | export const arrowUp = `
9 |
13 | `
14 |
15 | export const xmark = `
16 |
20 | `
21 |
22 | export const clock = `
23 |
27 | `
28 |
29 | export const inspectElement = `
30 |
34 | `
35 |
36 | export const refresh = `
37 |
41 | `
42 |
43 | export const copy = `
44 |
48 | `
49 |
50 | export const trash = `
51 |
55 | `
56 |
57 | export const check = `
58 |
62 | `
63 |
--------------------------------------------------------------------------------
/src/browser_panel/panel/App.svelte:
--------------------------------------------------------------------------------
1 |
53 |
54 | {#if connection.isPermanentlyDisconnected}
55 |
8 |
9 | [](https://addons.mozilla.org/en-US/firefox/addon/hotwire-dev-tools/)
10 | [](https://chromewebstore.google.com/detail/hotwire-dev-tools/phdobjkbablgffmmgnjbmfbbofnbkajc)
11 | [](https://apps.apple.com/ch/app/hotwire-dev-tools/id6503706225)
12 |
13 | 58 | Unable to connect to the current page. Try closing and reopening the inspection panel to resolve the issue. 59 |
60 | If this issue persists, consider reporting it on GitHub:
61 |
62 | https://github.com/leonvogt/hotwire-dev-tools/issues/new 63 |
64 | 62 | https://github.com/leonvogt/hotwire-dev-tools/issues/new 63 |
102 |
137 | {/if}
138 |
--------------------------------------------------------------------------------
/src/browser_panel/panel/panel.js:
--------------------------------------------------------------------------------
1 | // Entry point for the DevTools panel.
2 | // Initializes the Svelte app, injects the backend script into the inspected page,
3 | // and establishes a connection to the background.js for communication.
4 |
5 | import App from "./App.svelte"
6 | import { mount } from "svelte"
7 | import { connection } from "../State.svelte.js"
8 |
9 | import { panelPostMessage, handleBackendToPanelMessage, devToolPanelName } from "../messaging"
10 | import { HOTWIRE_DEV_TOOLS_PANEL_SOURCE, PANEL_TO_BACKEND_MESSAGES } from "$lib/constants"
11 |
12 | // Mount Svelte app
13 | document.body.classList.toggle("dark", chrome.devtools.panels.themeName === "dark")
14 | export default mount(App, { target: document.querySelector("#app") })
15 |
16 | let lastBackendMessageAt
17 | let currentPort = null
18 | let isConnecting = false
19 | let connectionAttempts = 0
20 | let healthCheckInterval = null
21 | let backendCheckInterval = null
22 | const maxConnectionAttempts = 10
23 |
24 | async function connect() {
25 | if (isConnecting) return
26 |
27 | if (connectionAttempts >= maxConnectionAttempts) {
28 | console.error(`Max connection attempts (${maxConnectionAttempts}) reached. Giving up.`)
29 | connection.isPermanentlyDisconnected = true
30 | clearIntervals()
31 | return
32 | }
33 |
34 | isConnecting = true
35 | connectionAttempts++
36 |
37 | try {
38 | await injectBackendScript()
39 | currentPort = createConnection()
40 | console.log(`Connected successfully (attempt ${connectionAttempts})`)
41 | connection.connectedToBackend = true
42 | connectionAttempts = 0
43 | if (__IS_SAFARI__) {
44 | // Health checks are only needed for Safari because it doesn't trigger the `port.onDisconnect` event consistently.
45 | // More: https://github.com/leonvogt/hotwire-dev-tools/pull/123
46 | startHealthCheck()
47 | }
48 | } catch (error) {
49 | console.warn(`Connection failed (attempt ${connectionAttempts}/${maxConnectionAttempts}):`, error)
50 | connection.connectedToBackend = false
51 |
52 | if (connectionAttempts < maxConnectionAttempts) {
53 | setTimeout(() => {
54 | isConnecting = false
55 | connect()
56 | }, 500)
57 | } else {
58 | console.error(`Failed to connect after ${maxConnectionAttempts} attempts`)
59 | }
60 | isConnecting = false
61 | return
62 | }
63 |
64 | isConnecting = false
65 | }
66 |
67 | function createConnection() {
68 | const port = chrome.runtime.connect({
69 | name: devToolPanelName(chrome.devtools.inspectedWindow.tabId),
70 | })
71 |
72 | port.onDisconnect.addListener(() => {
73 | cleanup()
74 | clearIntervals()
75 | connection.connectedToBackend = false
76 | })
77 |
78 | port.onMessage.addListener((message) => {
79 | lastBackendMessageAt = Date.now()
80 | handleBackendToPanelMessage(message, port)
81 | })
82 |
83 | return port
84 | }
85 |
86 | function injectBackendScript() {
87 | const scriptId = "hotwire-dev-tools-backend-script"
88 | const scriptURL = chrome.runtime.getURL("/dist/browser_panel/page/backend.js")
89 |
90 | const injectionScript = `
91 | (function() {
92 | if (document.getElementById('${scriptId}')) return 'already-injected';
93 |
94 | const script = document.createElement('script');
95 | script.src = "${scriptURL}";
96 | script.id = "${scriptId}";
97 | script.async = true;
98 |
99 | (document.head || document.documentElement).appendChild(script);
100 | return 'injected';
101 | })()
102 | `
103 |
104 | return new Promise((resolve, reject) => {
105 | chrome.devtools.inspectedWindow.eval(injectionScript, (result, error) => {
106 | if (error) {
107 | reject(new Error(`Injection failed: ${error.description || error.message}`))
108 | } else {
109 | resolve()
110 | }
111 | })
112 | })
113 | }
114 |
115 | function reconnect() {
116 | if (connectionAttempts >= maxConnectionAttempts) {
117 | console.error("Reconnect - Max reconnection attempts reached. Stopping retries.")
118 | clearIntervals()
119 | connection.isPermanentlyDisconnected = true
120 | return
121 | }
122 |
123 | connectionAttempts++
124 | setTimeout(connect, 200)
125 | }
126 |
127 | function setupReconnectionHandlers() {
128 | chrome.devtools.network.onNavigated.addListener(() => {
129 | console.log("Page navigated, reconnecting...")
130 | connection.connectedToBackend = false
131 | cleanup()
132 | reconnect()
133 | })
134 |
135 | if (__IS_CHROME__) {
136 | chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
137 | if (tabId === chrome.devtools.inspectedWindow.tabId && changeInfo.status === "complete" && !currentPort) {
138 | console.log("Tab reloaded, reconnecting...")
139 | connection.connectedToBackend = false
140 | cleanup()
141 | reconnect()
142 | }
143 | })
144 | }
145 | }
146 |
147 | function startHealthCheck() {
148 | if (!currentPort) {
149 | console.warn("HealthCheck - Cannot start without an established connection.")
150 | return
151 | }
152 |
153 | clearIntervals()
154 |
155 | // Send every 0.5 seconds a health check message to the backend.
156 | healthCheckInterval = setInterval(() => {
157 | panelPostMessage({
158 | action: PANEL_TO_BACKEND_MESSAGES.HEALTH_CHECK,
159 | source: HOTWIRE_DEV_TOOLS_PANEL_SOURCE,
160 | })
161 | }, 500)
162 |
163 | // Check every second (plus a small buffer) if the backend is still responsive.
164 | backendCheckInterval = setInterval(() => {
165 | if (Date.now() - lastBackendMessageAt > 1100) {
166 | console.log("HealthCheck - Backend unresponsive, reconnecting...")
167 | connection.connectedToBackend = false
168 | reconnect()
169 | }
170 | }, 1100)
171 | }
172 |
173 | function clearIntervals() {
174 | clearInterval(healthCheckInterval)
175 | clearInterval(backendCheckInterval)
176 | }
177 |
178 | function cleanup() {
179 | connectionAttempts = 0
180 | isConnecting = false
181 |
182 | if (currentPort) {
183 | currentPort.disconnect()
184 | currentPort = null
185 | }
186 | }
187 |
188 | setupReconnectionHandlers()
189 | connect()
190 |
--------------------------------------------------------------------------------
/public/styles/panel/utilities.css:
--------------------------------------------------------------------------------
1 | .d-flex {
2 | display: flex;
3 | }
4 | .justify-content-center {
5 | justify-content: center;
6 | }
7 | .justify-content-between {
8 | justify-content: space-between;
9 | }
10 | .justify-content-end {
11 | justify-content: flex-end;
12 | }
13 | .align-items-center {
14 | align-items: center;
15 | }
16 | .align-items-top {
17 | align-items: flex-start;
18 | }
19 | .flex-column {
20 | flex-direction: column;
21 | }
22 | .flex-center {
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | }
27 |
28 | .cursor-pointer {
29 | cursor: pointer;
30 | }
31 |
32 | .d-none {
33 | display: none;
34 | }
35 |
36 | .button-as-link {
37 | border: unset;
38 | background-color: unset;
39 | color: inherit;
40 | }
41 |
42 | .scrollable-list {
43 | overflow-y: auto;
44 | max-height: 100%;
45 | scrollbar-width: thin;
46 | }
47 |
48 | .h-100 {
49 | height: 100%;
50 | }
51 |
52 | .h-100vh {
53 | height: 100vh;
54 | }
55 |
56 | .h-inherit {
57 | height: inherit;
58 | }
59 |
60 | .visibility-hidden {
61 | visibility: hidden;
62 | }
63 |
64 | .w-100 {
65 | width: 100%;
66 | }
67 |
68 | .max-w-100 {
69 | max-width: 100%;
70 | }
71 |
72 | .overflow-hidden {
73 | overflow: hidden;
74 | }
75 | .overflow-x-hidden {
76 | overflow-x: hidden;
77 | }
78 | .overflow-x-auto {
79 | overflow-x: auto;
80 | }
81 | .white-space-nowrap {
82 | white-space: nowrap;
83 | }
84 |
85 | .scrollbar-none {
86 | scrollbar-width: none;
87 | }
88 |
89 | .text-align-center {
90 | text-align: center;
91 | }
92 |
93 | .text-align-right {
94 | text-align: right;
95 | }
96 |
97 | .text-muted {
98 | color: var(--wa-color-text-quiet);
99 | }
100 |
101 | .p-0 {
102 | padding: 0;
103 | }
104 | .p-1 {
105 | padding: 0.25rem;
106 | }
107 | .p-2 {
108 | padding: 0.5rem;
109 | }
110 | .p-3 {
111 | padding: 1rem;
112 | }
113 | .p-4 {
114 | padding: 1.5rem;
115 | }
116 | .p-5 {
117 | padding: 3rem;
118 | }
119 | .ps-0 {
120 | padding-left: 0;
121 | }
122 | .ps-1 {
123 | padding-left: 0.25rem;
124 | }
125 | .ps-2 {
126 | padding-left: 0.5rem;
127 | }
128 | .ps-3 {
129 | padding-left: 1rem;
130 | }
131 | .ps-4 {
132 | padding-left: 1.5rem;
133 | }
134 | .ps-5 {
135 | padding-left: 3rem;
136 | }
137 | .pe-0 {
138 | padding-right: 0;
139 | }
140 | .pe-1 {
141 | padding-right: 0.25rem;
142 | }
143 | .pe-2 {
144 | padding-right: 0.5rem;
145 | }
146 | .pe-3 {
147 | padding-right: 1rem;
148 | }
149 | .pe-4 {
150 | padding-right: 1.5rem;
151 | }
152 | .pe-5 {
153 | padding-right: 3rem;
154 | }
155 | .pt-0 {
156 | padding-top: 0;
157 | }
158 | .pb-0 {
159 | padding-bottom: 0;
160 | }
161 | .py-0 {
162 | padding-top: 0;
163 | padding-bottom: 0;
164 | }
165 | .py-1 {
166 | padding-top: 0.25rem;
167 | padding-bottom: 0.25rem;
168 | }
169 | .py-2 {
170 | padding-top: 0.5rem;
171 | padding-bottom: 0.5rem;
172 | }
173 | .py-3 {
174 | padding-top: 1rem;
175 | padding-bottom: 1rem;
176 | }
177 | .py-4 {
178 | padding-top: 1.5rem;
179 | padding-bottom: 1.5rem;
180 | }
181 | .py-5 {
182 | padding-top: 3rem;
183 | padding-bottom: 3rem;
184 | }
185 |
186 | .mt-1 {
187 | margin-top: 0.25rem;
188 | }
189 | .mt-2 {
190 | margin-top: 0.5rem;
191 | }
192 | .mt-3 {
193 | margin-top: 1rem;
194 | }
195 | .mt-4 {
196 | margin-top: 1.5rem;
197 | }
198 |
199 | .mt-5 {
200 | margin-top: 3rem;
201 | }
202 | .mb-1 {
203 | margin-bottom: 0.25rem;
204 | }
205 | .mb-2 {
206 | margin-bottom: 0.5rem;
207 | }
208 | .mb-3 {
209 | margin-bottom: 1rem;
210 | }
211 | .mb-4 {
212 | margin-bottom: 1.5rem;
213 | }
214 | .mb-5 {
215 | margin-bottom: 3rem;
216 | }
217 |
218 | .ms-1 {
219 | margin-left: 0.25rem;
220 | }
221 | .ms-2 {
222 | margin-left: 0.5rem;
223 | }
224 | .ms-3 {
225 | margin-left: 1rem;
226 | }
227 | .me-1 {
228 | margin-right: 0.25rem;
229 | }
230 | .me-2 {
231 | margin-right: 0.5rem;
232 | }
233 | .me-3 {
234 | margin-right: 1rem;
235 | }
236 |
237 | .m-0 {
238 | margin: 0;
239 | }
240 | .m-1 {
241 | margin: 0.25rem;
242 | }
243 | .m-2 {
244 | margin: 0.5rem;
245 | }
246 | .m-3 {
247 | margin: 1rem;
248 | }
249 | .m-4 {
250 | margin: 1.5rem;
251 | }
252 | .m-5 {
253 | margin: 3rem;
254 | }
255 | .gap-0 {
256 | gap: 0;
257 | }
258 | .gap-1 {
259 | gap: 0.25rem;
260 | }
261 | .gap-2 {
262 | gap: 0.5rem;
263 | }
264 | .gap-3 {
265 | gap: 1rem;
266 | }
267 | .gap-4 {
268 | gap: 1.5rem;
269 | }
270 | .gap-5 {
271 | gap: 3rem;
272 | }
273 |
274 | .position-relative {
275 | position: relative;
276 | }
277 |
278 | .position-absolute {
279 | position: absolute;
280 | }
281 |
282 | .end-0 {
283 | right: 0;
284 | }
285 |
286 | .fs-100 {
287 | font-size: var(--fs-100);
288 | }
289 | .fs-200 {
290 | font-size: var(--fs-200);
291 | }
292 | .fs-300 {
293 | font-size: var(--fs-300);
294 | }
295 | .fs-400 {
296 | font-size: var(--fs-400);
297 | }
298 | .fs-500 {
299 | font-size: var(--fs-500);
300 | }
301 | .fs-600 {
302 | font-size: var(--fs-600);
303 | }
304 | .fs-700 {
305 | font-size: var(--fs-700);
306 | }
307 | .fs-800 {
308 | font-size: var(--fs-800);
309 | }
310 | .fs-900 {
311 | font-size: var(--fs-900);
312 | }
313 |
314 | .code-keyword {
315 | background: var(--wa-color-surface-lowered);
316 | width: fit-content;
317 | border-radius: 3px;
318 | padding: 2px 5px;
319 | font-weight: 600;
320 | }
321 |
322 | .scrollable-y {
323 | overflow-y: auto;
324 | scrollbar-width: thin;
325 | }
326 |
327 | .show-in-200ms {
328 | animation: showIn 0.3s ease forwards;
329 | animation-delay: 0.2s;
330 | opacity: 0;
331 | visibility: hidden;
332 | }
333 |
334 | .show-in-1000ms {
335 | animation: showIn 0.3s ease forwards;
336 | animation-delay: 1s;
337 | opacity: 0;
338 | visibility: hidden;
339 | }
340 |
341 | @keyframes showIn {
342 | to {
343 | opacity: 1;
344 | visibility: visible;
345 | }
346 | }
347 |
348 | .d-table-row {
349 | display: table-row;
350 | }
351 |
352 | .code-key {
353 | color: var(--wa-color-blue-60);
354 | }
355 | .code-value {
356 | color: var(--wa-color-purple-50);
357 | }
358 |
359 | .error-text-underline {
360 | text-decoration: underline wavy #f14c4c;
361 | text-decoration-thickness: 1px;
362 | text-underline-offset: 2px;
363 | }
364 |
--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
1 | export const getMetaElement = (name) => {
2 | return document.querySelector(`meta[name="${name}"]`)
3 | }
4 |
5 | export const getMetaContent = (name) => {
6 | const element = getMetaElement(name)
7 | return element && element.content
8 | }
9 |
10 | export const debounce = (fn, delay) => {
11 | let timeoutId = null
12 |
13 | return (...args) => {
14 | const callback = () => fn.apply(this, args)
15 | clearTimeout(timeoutId)
16 | timeoutId = setTimeout(callback, delay)
17 | }
18 | }
19 |
20 | export const loadCSS = async (url) => {
21 | return fetch(url)
22 | .then((response) => response.text())
23 | .then((css) => css)
24 | .catch((error) => console.error("Hotwire Dev Tools: Error loading CSS", error))
25 | }
26 |
27 | export const inspectElement = (selector) => {
28 | chrome.devtools.inspectedWindow.eval(`inspect(document.querySelector('${selector}'))`)
29 | }
30 |
31 | export const stringifyHTMLElementTag = (element, createClosingTag = true) => {
32 | if (!(element instanceof Element)) {
33 | throw new Error("Expected an Element")
34 | }
35 |
36 | const attributes = Array.from(element.attributes)
37 | .filter(({ name }) => name !== "data-hotwire-dev-tools-id")
38 | .map((attr) => `${attr.name}="${attr.value}"`)
39 | .join(" ")
40 |
41 | const tagName = element.tagName.toLowerCase()
42 | let string = `<${tagName}${attributes ? " " + attributes : ""}>`
43 | if (createClosingTag) {
44 | string += ``
45 | }
46 |
47 | return string
48 | }
49 |
50 | export const stringifyHTMLElementTagShallow = (element) => {
51 | if (!(element instanceof Element)) {
52 | throw new Error("Expected an Element")
53 | }
54 | const tagName = element.tagName.toLowerCase()
55 | const id = element.id ? ` id="${element.id}"` : ""
56 | return `<${tagName}${id} ...>`
57 | }
58 |
59 | export const generateUUID = () => {
60 | // 8 Chars should be enough for our use case
61 | // Orignal UUIDs could make the inspection tab quite noisy
62 | return Date.now().toString(36) + Math.random().toString(36).slice(2, 5)
63 | }
64 |
65 | // Copy to clipboard is bit tricky from a devtool panel context.
66 | // Currently, we're using the common trick of creating a textarea and using the `document.execCommand("copy")` method, which is deprecated.
67 | // Problem: When calling `navigator.clipboard.writeText` from:
68 | // - a devtools panel context, it throws the error: "The Clipboard API has been blocked because of a permissions policy applied to the current document."
69 | // - a content script context, it throws the error: "Failed to execute 'writeText' on 'Clipboard': Document is not focused"
70 | // In the future, we should look into how we can improve this.
71 | // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
72 | export const copyToClipboard = (value) => {
73 | const textarea = document.createElement("textarea")
74 | textarea.value = value != null ? value : ""
75 | textarea.style.position = "absolute"
76 | textarea.style.opacity = "0"
77 | document.body.appendChild(textarea)
78 | textarea.select()
79 | document.execCommand("copy")
80 | textarea.remove()
81 | }
82 |
83 | export const handleKeyboardNavigation = (event, collection, currentIndex) => {
84 | let newIndex = currentIndex
85 |
86 | switch (event.key) {
87 | case "ArrowDown":
88 | event.preventDefault()
89 | newIndex = currentIndex < collection.length - 1 ? currentIndex + 1 : 0
90 | break
91 | case "ArrowUp":
92 | event.preventDefault()
93 | newIndex = currentIndex > 0 ? currentIndex - 1 : collection.length - 1
94 | break
95 | case "Home":
96 | event.preventDefault()
97 | newIndex = 0
98 | break
99 | case "End":
100 | event.preventDefault()
101 | newIndex = collection.length - 1
102 | break
103 | case "Enter":
104 | event.preventDefault()
105 | newIndex = currentIndex
106 | break
107 | default:
108 | return
109 | }
110 |
111 | return newIndex
112 | }
113 |
114 | export const getUUIDFromElement = (element) => {
115 | const uuid = element.getAttribute("data-hotwire-dev-tools-id")
116 | return uuid || null
117 | }
118 |
119 | export const setUUIDToElement = (element) => {
120 | const uuid = generateUUID()
121 | element.setAttribute("data-hotwire-dev-tools-id", uuid)
122 | return uuid
123 | }
124 |
125 | export const ensureUUIDOnElement = (element) => {
126 | let uuid = getUUIDFromElement(element)
127 | if (!uuid) {
128 | uuid = setUUIDToElement(element)
129 | }
130 | return uuid
131 | }
132 |
133 | export const getElementPath = (element) => {
134 | const path = []
135 | while (element && element.parentElement) {
136 | const siblings = Array.from(element.parentElement.children)
137 | const index = siblings.indexOf(element)
138 | path.unshift(index)
139 | element = element.parentElement
140 | }
141 | return path
142 | }
143 |
144 | export const getElementFromIndexPath = (path) => {
145 | let element = document.documentElement
146 | for (const index of path) {
147 | element = element.children[index]
148 | if (!element) return null
149 | }
150 | return element
151 | }
152 |
153 | export const safeStringifyEventDetail = (detail) => {
154 | const seen = new WeakSet()
155 | return JSON.parse(
156 | JSON.stringify(detail, (key, value) => {
157 | if (typeof value === "object" && value !== null) {
158 | if (seen.has(value)) {
159 | return "[Circular Reference]"
160 | }
161 | seen.add(value)
162 | }
163 | // Remove problematic DOM elements and functions
164 | if (value instanceof HTMLElement || typeof value === "function") {
165 | return "[Object]"
166 | }
167 | return value
168 | }),
169 | )
170 | }
171 |
172 | export const capitalizeFirstChar = (str) => {
173 | if (typeof str !== "string" || str === undefined || str.length === 0) {
174 | return str
175 | }
176 | return str.charAt(0).toUpperCase() + str.slice(1)
177 | }
178 |
179 | export const selectorByUUID = (uuid) => {
180 | return `[data-hotwire-dev-tools-id="${uuid}"]`
181 | }
182 |
183 | export const serializeAttributes = (element) => {
184 | return Array.from(element.attributes).reduce((map, attr) => {
185 | map[attr.name] = attr.value
186 | return map
187 | }, {})
188 | }
189 |
--------------------------------------------------------------------------------
/src/browser_panel/page/stimulus_observer.js:
--------------------------------------------------------------------------------
1 | import { ensureUUIDOnElement, getUUIDFromElement, capitalizeFirstChar, serializeAttributes } from "$utils/utils.js"
2 |
3 | export default class StimulusObserver {
4 | constructor(delegate) {
5 | this.delegate = delegate
6 | this.controllerElements = new Map() // UUID -> [controller data]
7 | }
8 |
9 | matchElement(element) {
10 | const controllerValue = element.dataset?.controller
11 | if (controllerValue === undefined) return false
12 | const identifiers = controllerValue
13 | .split(" ")
14 | .map((id) => id.trim())
15 | .filter((id) => id.length > 0)
16 | return identifiers.length > 0
17 | }
18 |
19 | matchElementsInTree(tree) {
20 | const match = this.matchElement(tree) ? [tree] : []
21 | const matches = Array.from(tree.querySelectorAll("*")).filter((el) => this.matchElement(el))
22 | return match.concat(matches)
23 | }
24 |
25 | elementMatched(element) {
26 | const identifiers = (element.dataset.controller || "")
27 | .split(" ")
28 | .map((id) => id.trim())
29 | .filter((id) => id.length > 0)
30 |
31 | const uuid = ensureUUIDOnElement(element)
32 | if (!this.controllerElements.has(uuid)) {
33 | this.controllerElements.set(uuid, [])
34 | }
35 | identifiers.forEach((identifier) => {
36 | const controllerData = this.buildStimulusElementData(element, identifier)
37 | this.controllerElements.get(uuid).push(controllerData)
38 | })
39 | this.delegate.stimulusDataChanged()
40 | }
41 |
42 | elementUnmatched(element) {
43 | const uuid = getUUIDFromElement(element)
44 |
45 | if (this.controllerElements.has(uuid)) {
46 | this.controllerElements.delete(uuid)
47 | this.delegate.stimulusDataChanged()
48 | }
49 | }
50 |
51 | elementAttributeChanged(element, attributeName, oldValue) {
52 | if (this.matchElement(element)) {
53 | const uuid = getUUIDFromElement(element)
54 | if (this.controllerElements.has(uuid)) {
55 | const newControllerElementData = this.controllerElements.get(uuid).map((controllerData) => {
56 | return this.buildStimulusElementData(element, controllerData.identifier)
57 | })
58 | this.controllerElements.set(uuid, newControllerElementData)
59 | this.delegate.stimulusDataChanged()
60 | }
61 | }
62 | }
63 |
64 | buildStimulusElementData(element, identifier) {
65 | const controller = window.Stimulus?.getControllerForElementAndIdentifier(element, identifier)
66 | return {
67 | id: element.id,
68 | uuid: getUUIDFromElement(element),
69 | identifier: identifier,
70 | attributes: serializeAttributes(element),
71 | tagName: element.tagName.toLowerCase(),
72 | values: this.buildControllerValues(controller),
73 | targets: this.buildControllerTargets(controller),
74 | outlets: this.buildControllerOutlets(controller),
75 | classes: this.buildControllerClasses(controller),
76 | actions: this.buildControllerActions(controller),
77 | element,
78 | }
79 | }
80 |
81 | buildControllerValues(controller) {
82 | if (!controller || !controller.valueDescriptorMap) return []
83 |
84 | return Object.values(controller.valueDescriptorMap).map((descriptor) => {
85 | return {
86 | key: descriptor.key,
87 | name: descriptor.name,
88 | type: descriptor.type,
89 | defaultValue: descriptor.defaultValue,
90 | value: controller[descriptor.name],
91 | }
92 | })
93 | }
94 |
95 | buildControllerTargets(controller) {
96 | if (!controller) return []
97 |
98 | const keys = Object.keys(Object.getOwnPropertyDescriptors(Object.getPrototypeOf(controller)))
99 | const targetKeys = keys.filter((key) => key.endsWith("Target") && !key.startsWith("has"))
100 | return targetKeys.map((targetKey) => {
101 | const targets = controller[`has${capitalizeFirstChar(targetKey)}`] ? controller[`${targetKey}s`] : []
102 | return {
103 | name: targetKey,
104 | key: targetKey.replace("Target", ""),
105 | elements: Array.from(targets).map((target) => {
106 | return {
107 | id: target.id,
108 | uuid: ensureUUIDOnElement(target),
109 | attributes: serializeAttributes(target),
110 | tagName: target.tagName.toLowerCase(),
111 | }
112 | }),
113 | }
114 | })
115 | }
116 |
117 | buildControllerOutlets(controller) {
118 | if (!controller) return []
119 |
120 | const keys = Object.keys(Object.getOwnPropertyDescriptors(Object.getPrototypeOf(controller)))
121 | const outletKeys = keys.filter((key) => key.endsWith("Outlet") && !key.startsWith("has"))
122 | return outletKeys.map((outletKey) => {
123 | const outlets = controller[`has${capitalizeFirstChar(outletKey)}`] ? controller[`${outletKey}s`] : []
124 | const key = outletKey.replace("Outlet", "")
125 | return {
126 | name: outletKey,
127 | key: key,
128 | selector: controller.outlets.getSelectorForOutletName(key),
129 | elements: Array.from(outlets).map((outlet) => {
130 | return {
131 | id: outlet.id,
132 | uuid: ensureUUIDOnElement(outlet.element),
133 | attributes: serializeAttributes(outlet.element),
134 | tagName: outlet.element.tagName.toLowerCase(),
135 | }
136 | }),
137 | }
138 | })
139 | }
140 |
141 | buildControllerClasses(controller) {
142 | if (!controller) return []
143 |
144 | const keys = Object.keys(Object.getOwnPropertyDescriptors(Object.getPrototypeOf(controller)))
145 | const classKeys = keys.filter((key) => key.endsWith("Class") && !key.startsWith("has"))
146 | return classKeys.map((classKey) => {
147 | const classes = controller[`has${capitalizeFirstChar(classKey)}`] ? controller[`${classKey}es`] : []
148 | const key = classKey.replace("Class", "")
149 | return {
150 | name: classKey,
151 | key: key,
152 | classes: Array.from(classes),
153 | }
154 | })
155 | }
156 |
157 | buildControllerActions(controller) {
158 | if (!controller?.context?.bindingObserver) return []
159 |
160 | return controller.context.bindingObserver.bindings.map((binding) => {
161 | const action = binding.action
162 | return {
163 | descriptor: action.toString(),
164 | eventName: action.eventName,
165 | methodName: action.methodName,
166 | element: {
167 | id: action.element.id || null,
168 | attributes: serializeAttributes(action.element),
169 | tagName: action.element.tagName.toLowerCase(),
170 | classes: Array.from(action.element.classList),
171 | uuid: ensureUUIDOnElement(action.element),
172 | },
173 | keyFilter: action.keyFilter || null,
174 | eventTarget: action.eventTargetName || "element",
175 | params: action.params,
176 | hasParams: Object.keys(action.params).length > 0,
177 | }
178 | })
179 | }
180 |
181 | getStimulusData() {
182 | const allControllers = []
183 |
184 | this.controllerElements.forEach((controllersData) => {
185 | controllersData.forEach((controllerData) => {
186 | allControllers.push(controllerData)
187 | })
188 | })
189 |
190 | // Remove DOM elements before sending
191 | const stripDOMElements = (data) => {
192 | const { element, ...cleanData } = data
193 | return cleanData
194 | }
195 |
196 | return allControllers.map((controller) => stripDOMElements(controller))
197 | }
198 | }
199 |
--------------------------------------------------------------------------------
/public/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
103 |
106 | Setting up Hotwire DevTool...
104 |
107 |
116 |
136 | Hmm... this is taking a bit longer than expected.
108 | Check the browser console for any errors.
109 | {#if __IS_CHROME__}
110 | Right-click anywhere on this panel → Inspect → Console
111 | {/if}
112 |
113 | {#if __IS_FIREFOX__}
114 | If there isn't something showing up, you can also try to inspect the extension itself by:
115 | 116 |
117 | Open the "Debug Add-ons" page in Firefox: about:debugging#/runtime/this-firefox
118 |
119 | Then clicking on the "Inspect" button next to the Hotwire DevTool. There you should see the console output.
120 | {/if}
121 |
122 | {#if __IS_SAFARI__}
123 |
124 | On Safari, you might need to enable the inspection option first by:
125 |
126 | Safari Web Inspector Setting (Gear Icon on the top right) → Experimental → Allow Inspecting Web Inspector 127 |
128 | {/if}
129 |
130 | 126 | Safari Web Inspector Setting (Gear Icon on the top right) → Experimental → Allow Inspecting Web Inspector 127 |
131 | Found something weird? Please open an issue on GitHub:
132 |
133 | https://github.com/leonvogt/hotwire-dev-tools/issues/new 134 |
135 | 133 | https://github.com/leonvogt/hotwire-dev-tools/issues/new 134 |
v0.0.0
13 |
14 |
15 |
17 |
18 |
25 |
26 |
85 |
86 |
123 |
124 |
149 |
150 |
178 |
179 |
180 |
--------------------------------------------------------------------------------
/xcode/HotwireDevTools/Base.lproj/Main.storyboard:
--------------------------------------------------------------------------------
1 |
2 | Hotwire Dev Tools
16 |
120 |
187 |
121 |
151 |
152 | {#if turboEvents.length > 0}
153 | Events
122 |
123 |
124 |
125 |
127 | {#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]}
128 | handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}>
129 | {groupName}
130 |
131 |
132 | {#each events as event}
133 | handleFilterToggle(e)}
139 | onclick={(e) => handleFilterToggle(e)}
140 | value={event}
141 | checked={turboEventsFilter.includes(event)}>{event}
143 | {/each}
144 | {/each}
145 |
146 | {#if turboEvents.length > 0}
147 |
150 |
154 | {#each turboEvents as event (event.uuid)}
155 |
180 | {:else}
181 | setSelectedTurboEvent(event)}
163 | onkeydown={handleEventListKeyboardNavigation}
164 | onmouseenter={() => addHighlightOverlayByPath(event.targetElementPath)}
165 | onmouseleave={() => hideHighlightOverlay()}
166 | >
167 |
178 | {/each}
179 |
168 |
177 |
169 | {event.eventName}
170 |
171 |
172 |
173 |
176 | {event.time}
174 |
175 |
182 | No Turbo Events spotted yet
183 | We'll keep looking
184 |
185 | {/if}
186 | 195 | {i}: {@render valueViewer(item)} 196 |
197 | {/each} 198 | {:else} 199 | {#each Object.entries(value) as [k, v]} 200 |201 | {k}: {@render valueViewer(v, k)} 202 |
203 | {/each} 204 | {/if} 205 | {:else if EVENT_TIMESTAMP_KEYS.includes(key)} 206 | {new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })} 207 | {:else} 208 | {String(value)} 209 | {/if} 210 | {/snippet} 211 | 212 |
213 | {#if selected.type === SELECTABLE_TYPES.TURBO_EVENT && selected.uuid}
214 |
278 |
215 |
216 | Event
217 |
219 |
220 |
221 |
216 | Event
217 | {selected.turboEvent.eventName}
218 |
219 |
222 | {#if selected.turboEvent.eventName === "turbo:before-stream-render"}
223 |
232 |
233 | {#if selected.turboEvent.action}
234 |
269 |
270 | {:else}
271 |
272 |
224 |
226 |
227 |
229 | {/if}
230 |
231 | action |
236 | {selected.turboEvent.action} | 237 |
| Target | 243 |
244 |
245 |
250 |
247 |
249 | |
251 |
| Target | 255 ||
{key} |
263 | {@render valueViewer(value)} | 264 |
273 | Nothing selected
274 | Select a Turbo Event to see its details
275 |
276 | {/if}
277 |