Added new DevTools #30870

mrdoob · 2025-04-05T02:40:21Z

Description

Started a new and simpler Three.js DevTools.

devtools/bridge.js

devtools/inject.js

devtools/panel/panel.js

… local variable Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

devtools/panel/panel.js

devtools/bridge.js

devtools/content-script.js

devtools/bridge.js

mrdoob · 2025-05-12T12:46:07Z

We now show the three.js version detected in the icon badge:

mrdoob · 2025-07-14T00:26:43Z

We can now show the object transforms.

Screen.Recording.2025-07-13.at.5.44.41.PM_.mov

Copilot

Pull Request Overview

This PR introduces a new, simplified Chrome DevTools extension for inspecting Three.js scenes and renderers, including panel UI, messaging infrastructure, and documentation.

Added panel UI (panel.js, panel.html, panel.css) for rendering scene and renderer details
Implemented messaging flow (devtools.js, content-script.js, bridge.js, background.js) between page, background, and panel
Included extension manifest and README for setup and architecture overview

Reviewed Changes

Copilot reviewed 10 out of 13 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
devtools/panel/panel.js	UI logic for scene tree, renderer sections, and floating panel
devtools/panel/panel.html	HTML structure for DevTools panel
devtools/panel/panel.css	Styling for panel components and floating details
devtools/manifest.json	Extension metadata, permissions, and devtools page configuration
devtools/index.html	Loader page for DevTools panel
devtools/devtools.js	Registers the “Three.js” tab in Chrome DevTools
devtools/content-script.js	Injects bridge script and relays messages
devtools/bridge.js	In-page bridge interacting with Three.js and dispatching events
devtools/background.js	Manages port connections and message forwarding
devtools/README.md	Installation and architecture documentation

Comments suppressed due to low confidence (1)

devtools/panel/panel.js:4

The utility function getObjectIcon has no associated tests. Adding unit tests to cover each icon mapping will help prevent regressions as new object types are added.

function getObjectIcon(obj) {

Copilot · 2025-07-14T00:29:31Z

devtools/panel/panel.js

+const intervalId = setInterval( () => {
+
+	backgroundPageConnection.postMessage( {
+		name: 'request-state',
+		tabId: chrome.devtools.inspectedWindow.tabId
+	} );
+
+}, 1000 );
+
+backgroundPageConnection.onDisconnect.addListener( () => {
+
+	console.log( 'Panel: Connection to background page lost' );
+	clearInterval( intervalId );
+	clearState();
+
+} );
+


Polling the entire state every second can be inefficient and may cause unnecessary UI updates. Consider switching to an event-driven update model where the bridge pushes updates only when data changes.

Suggested change

const intervalId = setInterval( () => {

backgroundPageConnection.postMessage( {

name: 'request-state',

tabId: chrome.devtools.inspectedWindow.tabId

} );

}, 1000 );

backgroundPageConnection.onDisconnect.addListener( () => {

console.log( 'Panel: Connection to background page lost' );

clearInterval( intervalId );

clearState();

} );

backgroundPageConnection.onMessage.addListener((message) => {

if (message.name === 'state-update') {

updateState(message.state);

}

});

backgroundPageConnection.onDisconnect.addListener(() => {

console.log('Panel: Connection to background page lost');

clearState();

});

Copilot · 2025-07-14T00:29:31Z

devtools/panel/panel.js

+	summaryElem.innerHTML = `<span class="icon toggle-icon"></span> 
+		<span class="label">${displayName}</span>
+		<span class="type">${obj.type}</span>`;


Using innerHTML with interpolated content can introduce XSS risks if any data is unexpected. Prefer building DOM nodes via createElement and textContent, or sanitize the inserted HTML.

Suggested change

summaryElem.innerHTML = `

${displayName}

${obj.type}`;

const toggleIconSpan = document.createElement('span');

toggleIconSpan.className = 'icon toggle-icon';

const labelSpan = document.createElement('span');

labelSpan.className = 'label';

labelSpan.textContent = `${obj.type} `;

const objectDetailsSpan = document.createElement('span');

objectDetailsSpan.className = 'object-details';

objectDetailsSpan.textContent = details.join(' ・ ');

labelSpan.appendChild(objectDetailsSpan);

const typeSpan = document.createElement('span');

typeSpan.className = 'type';

typeSpan.textContent = obj.type;

summaryElem.appendChild(toggleIconSpan);

summaryElem.appendChild(labelSpan);

summaryElem.appendChild(typeSpan);

Copilot · 2025-07-14T00:29:31Z

devtools/panel/panel.js

+	row.style.marginBottom = '2px';
+
+	// Pad label to ensure consistent alignment
+	const paddedLabel = label.padEnd(16, ' '); // Pad to 16 characters


[nitpick] The padding length 16 is a magic number. Extract it into a named constant (e.g., LABEL_PAD_LENGTH) so its purpose is clear and maintainable.

Suggested change

const paddedLabel = label.padEnd(16, ' '); // Pad to 16 characters

const paddedLabel = label.padEnd(LABEL_PAD_LENGTH, ' '); // Pad to LABEL_PAD_LENGTH characters

Copilot · 2025-07-14T00:29:32Z

devtools/panel/panel.js

+	let displayName = obj.name || obj.type;
+
+	// Default rendering for other object types
+	const elem = document.createElement( 'div' );


These tree-item divs represent interactive nodes but lack ARIA roles for screen readers. Consider using role="treeitem" and aria-expanded attributes to improve accessibility.

Added new DevTools

03bc87f

mrdoob added this to the r176 milestone Apr 5, 2025

mrdoob requested a review from Copilot April 5, 2025 02:40

This comment was marked as outdated.

Sign in to view

github-advanced-security bot found potential problems Apr 5, 2025

View reviewed changes

mrdoob and others added 3 commits April 5, 2025 11:45

Potential fix for code scanning alert no. 3463: Useless assignment to…

42cbb1f

… local variable Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Clean up.

676f7ad

Clean up.

05b4f75

github-advanced-security bot found potential problems Apr 5, 2025

View reviewed changes

devtools/panel/panel.js Fixed Show fixed Hide fixed

mrdoob added 3 commits April 5, 2025 11:58

Clean up.

9a7d001

Clean up.

b77af0c

Clean up.

1e071da

github-advanced-security bot found potential problems Apr 5, 2025

View reviewed changes

devtools/bridge.js Fixed Show fixed Hide fixed

devtools/bridge.js Fixed Show fixed Hide fixed

devtools/bridge.js Fixed Show fixed Hide fixed

Mugen87 reviewed Apr 5, 2025

View reviewed changes

devtools/bridge.js Outdated Show resolved Hide resolved

Mugen87 reviewed Apr 5, 2025

View reviewed changes

devtools/bridge.js Outdated Show resolved Hide resolved

mrdoob added 5 commits April 5, 2025 20:48

Clean up.

25f8efe

Clean up.

6783910

Fixed renderer parameters not updating.

09b6fd6

Simplified code.

68bf958

Merge branch 'dev' into devtools

af85042

github-advanced-security bot found potential problems Apr 5, 2025

View reviewed changes

devtools/bridge.js Fixed Show fixed Hide fixed

devtools/bridge.js Fixed Show fixed Hide fixed

devtools/content-script.js Fixed Show fixed Hide fixed

Optimized scene handling.

09422b2

github-advanced-security bot found potential problems Apr 5, 2025

View reviewed changes

devtools/bridge.js Fixed Show fixed Hide fixed

mrdoob added 4 commits April 6, 2025 00:57

Clean up.

d43d66a

Removed unused file.

3cbd00d

Robustness.

8605078

Clean up.

ec6126d

github-advanced-security bot found potential problems Apr 5, 2025

View reviewed changes

devtools/bridge.js Fixed Show fixed Hide fixed

mrdoob added 2 commits April 6, 2025 07:58

Removed premature caching.

4bbab46

Refresh the scene graph once a second.

425407c

Update version.

32b1bc3

mrdoob modified the milestones: r176, r177 Apr 24, 2025

mrdoob added 2 commits May 11, 2025 20:59

Added icons.

209a9d9

Fixed linting.

7f7963e

github-advanced-security bot found potential problems May 11, 2025

View reviewed changes

devtools/bridge.js Fixed Show fixed Hide fixed

mrdoob added 2 commits May 11, 2025 22:29

Display three.js version in the toolbar icon.

b25cbdc

Increased version.

323299a

github-advanced-security bot found potential problems May 11, 2025

View reviewed changes

devtools/bridge.js Dismissed Show dismissed Hide dismissed

mrdoob added 4 commits May 12, 2025 10:02

Fixed panel.

7721fe3

Improved color scheme support.

cf37f6c

Icon clean up.

9152b38

Fixed clearState on reload.

ada623a

mrdoob added 4 commits May 14, 2025 17:11

Removed unneeded code.

d7bdef5

Add icon badge support for older versions of the library.

cd5b8ba

Display a different badge color when dev version found.

db366f2

Add link to feature request form.

b2d1739

mrdoob modified the milestones: r177, r178 May 30, 2025

mrdoob added 2 commits June 3, 2025 21:47

Clean up.

71bde5d

Clean up.

e5f8c81

mrdoob modified the milestones: r178, r179 Jun 30, 2025

mrdoob added 2 commits July 13, 2025 17:09

Clean up.

d86b81b

Added object details.

15371a1

mrdoob force-pushed the devtools branch from cbd5251 to 15371a1 Compare July 13, 2025 08:47

mrdoob requested a review from Copilot July 14, 2025 00:28

Copilot AI reviewed Jul 14, 2025

View reviewed changes

-	summaryElem.innerHTML = `<span class="icon toggle-icon"></span>
-		<span class="label">${displayName}</span>
-		<span class="type">${obj.type}</span>`;
+	const toggleIconSpan = document.createElement('span');
+	toggleIconSpan.className = 'icon toggle-icon';
+	const labelSpan = document.createElement('span');
+	labelSpan.className = 'label';
+	labelSpan.textContent = `${obj.type} `;
+	const objectDetailsSpan = document.createElement('span');
+	objectDetailsSpan.className = 'object-details';
+	objectDetailsSpan.textContent = details.join(' ・ ');
+	labelSpan.appendChild(objectDetailsSpan);
+	const typeSpan = document.createElement('span');
+	typeSpan.className = 'type';
+	typeSpan.textContent = obj.type;
+	summaryElem.appendChild(toggleIconSpan);
+	summaryElem.appendChild(labelSpan);
+	summaryElem.appendChild(typeSpan);

	const paddedLabel = label.padEnd(16, ' '); // Pad to 16 characters
	const paddedLabel = label.padEnd(LABEL_PAD_LENGTH, ' '); // Pad to LABEL_PAD_LENGTH characters

Uh oh!

Added new DevTools #30870

Are you sure you want to change the base?

Added new DevTools #30870

Conversation

mrdoob commented Apr 5, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mrdoob commented May 12, 2025

Uh oh!

mrdoob commented Jul 14, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!