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

ruofeidu · 2025-07-17T04:56:40Z

This is amazing!

mrdoob · 2025-07-18T03:13:51Z

Some times is not easy to see where in the page the renderer is...

Screen.Recording.2025-07-18.at.12.08.59.PM.mov

Copilot

Pull Request Overview

This PR introduces a new and simpler Three.js DevTools extension for Chrome, providing debugging capabilities for Three.js applications. The extension creates a DevTools panel that allows inspection of scenes, objects, and renderers with real-time updates and interactive features like canvas scrolling and floating object details.

Key changes include:

Complete Chrome extension architecture with background script, content script, and DevTools panel
Bridge script for direct Three.js integration and object monitoring
Interactive UI with collapsible renderer details and floating object inspection panels

Reviewed Changes

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

Show a summary per file

File	Description
devtools/panel/panel.js	Main panel JavaScript implementing UI rendering, object hierarchy display, and floating details functionality
devtools/panel/panel.html	Simple HTML structure for the DevTools panel
devtools/panel/panel.css	Comprehensive styling with light/dark theme support and responsive design
devtools/manifest.json	Chrome extension manifest defining permissions and entry points
devtools/index.html	DevTools page entry point
devtools/devtools.js	Script to create the Three.js panel in Chrome DevTools
devtools/content-script.js	Content script handling bridge injection and message relay
devtools/bridge.js	Bridge script for Three.js integration and object observation
devtools/background.js	Background service worker managing extension lifecycle and communications
devtools/README.md	Comprehensive documentation of extension architecture and usage

devtools/panel/panel.js

Copilot · 2025-07-22T08:32:32Z

devtools/panel/panel.js

+		let objectCount = - 1;
+		function countObjects( uuid ) {
+
+			const object = state.objects.get( uuid );
+			if ( object ) {
+
+				objectCount ++; // Increment count for the object itself


Starting the object count at -1 and incrementing is confusing. Consider starting at 0 and adjusting the logic or adding a comment explaining why -1 is used as the initial value.

Suggested change

let objectCount = - 1;

function countObjects( uuid ) {

const object = state.objects.get( uuid );

if ( object ) {

objectCount ++; // Increment count for the object itself

let objectCount = 0;

function countObjects( uuid ) {

const object = state.objects.get( uuid );

if ( object ) {

objectCount++; // Increment count for the object itself

Copilot · 2025-07-22T08:32:32Z

devtools/bridge.js

+		function generateUUID() {
+
+			const array = new Uint8Array( 16 );
+			crypto.getRandomValues( array );


The generateUUID function doesn't handle cases where crypto.getRandomValues might not be available (e.g., in insecure contexts). Consider adding error handling or a fallback method.

Suggested change

crypto.getRandomValues( array );

try {

if (crypto && typeof crypto.getRandomValues === 'function') {

crypto.getRandomValues( array );

} else {

// Fallback to Math.random for insecure contexts

for (let i = 0; i < array.length; i++) {

array[i] = Math.floor(Math.random() * 256);

}

}

} catch (error) {

// Fallback in case of unexpected errors

for (let i = 0; i < array.length; i++) {

array[i] = Math.floor(Math.random() * 256);

}

}

Copilot · 2025-07-22T08:32:32Z

devtools/bridge.js

+			const array = new Uint8Array( 16 );
+			crypto.getRandomValues( array );
+			array[ 6 ] = ( array[ 6 ] & 0x0f ) | 0x40; // Set version to 4
+			array[ 8 ] = ( array[ 8 ] & 0x3f ) | 0x80; // Set variant to 10
+			return [ ...array ].map( ( b, i ) => ( i === 4 || i === 6 || i === 8 || i === 10 ? '-' : '' ) + b.toString( 16 ).padStart( 2, '0' ) ).join( '' );
+


The UUID generation logic is complex and hard to read. Consider breaking this into multiple lines or using a more readable approach with clear variable names for better maintainability.

Suggested change

const array = new Uint8Array( 16 );

crypto.getRandomValues( array );

array[ 6 ] = ( array[ 6 ] & 0x0f ) | 0x40; // Set version to 4

array[ 8 ] = ( array[ 8 ] & 0x3f ) | 0x80; // Set variant to 10

return [ ...array ].map( ( b, i ) => ( i === 4 || i === 6 || i === 8 || i === 10 ? '-' : '' ) + b.toString( 16 ).padStart( 2, '0' ) ).join( '' );

// Generate 16 random bytes

const randomBytes = new Uint8Array( 16 );

crypto.getRandomValues( randomBytes );

// Set the UUID version to 4 (0100 in binary)

const versionByte = ( randomBytes[ 6 ] & 0x0f ) | 0x40;

randomBytes[ 6 ] = versionByte;

// Set the UUID variant to 10 (binary)

const variantByte = ( randomBytes[ 8 ] & 0x3f ) | 0x80;

randomBytes[ 8 ] = variantByte;

// Convert bytes to hexadecimal and format as UUID

const uuid = randomBytes.map( ( byte, index ) => {

const hex = byte.toString( 16 ).padStart( 2, '0' );

return ( index === 4 || index === 6 || index === 8 || index === 10 ? '-' : '' ) + hex;

} ).join( '' );

return uuid;

Copilot · 2025-07-22T08:32:33Z

devtools/panel/panel.js

+	header.style.justifyContent = 'space-between'; // Align items left and right
+
+	const miscSpan = document.createElement( 'span' );
+	miscSpan.innerHTML = '<a href="https://docs.google.com/forms/d/e/1FAIpQLSdw1QcgXNiECYiPx6k0vSQRiRe0FmByrrojV4fgeL5zzXIiCw/viewform?usp=preview" target="_blank">+</a>';


Using innerHTML with external URLs could pose security risks. Consider using textContent and addEventListener instead of inline HTML with external links.

Suggested change

miscSpan.innerHTML = '<a href="https://docs.google.com/forms/d/e/1FAIpQLSdw1QcgXNiECYiPx6k0vSQRiRe0FmByrrojV4fgeL5zzXIiCw/viewform?usp=preview" target="_blank">+</a>';

const link = document.createElement('a');

link.href = 'https://docs.google.com/forms/d/e/1FAIpQLSdw1QcgXNiECYiPx6k0vSQRiRe0FmByrrojV4fgeL5zzXIiCw/viewform?usp=preview';

link.target = '_blank';

link.textContent = '+';

miscSpan.appendChild(link);

Copilot · 2025-07-22T08:32:33Z

devtools/bridge.js

+				function traverseForBatch( currentObj ) {
+
+					if ( ! currentObj || ! currentObj.uuid || processedUUIDs.has( currentObj.uuid ) ) return;
+					processedUUIDs.add( currentObj.uuid );
+
+					const objectData = getObjectData( currentObj );
+					if ( objectData ) {
+
+						batchObjects.push( objectData );
+						devTools.objects.set( currentObj.uuid, objectData ); // Update local cache during batch creation
+
+					}
+
+					// Process children
+					if ( currentObj.children && Array.isArray( currentObj.children ) ) {
+
+						currentObj.children.forEach( child => traverseForBatch( child ) );
+


The recursive traverseForBatch function could cause stack overflow for deeply nested scene graphs. Consider implementing an iterative approach using a stack or queue for better performance and safety.

Suggested change

function traverseForBatch( currentObj ) {

if ( ! currentObj || ! currentObj.uuid || processedUUIDs.has( currentObj.uuid ) ) return;

processedUUIDs.add( currentObj.uuid );

const objectData = getObjectData( currentObj );

if ( objectData ) {

batchObjects.push( objectData );

devTools.objects.set( currentObj.uuid, objectData ); // Update local cache during batch creation

}

// Process children

if ( currentObj.children && Array.isArray( currentObj.children ) ) {

currentObj.children.forEach( child => traverseForBatch( child ) );

function traverseForBatch( rootObj ) {

const stack = [ rootObj ]; // Initialize stack with the root object

while ( stack.length > 0 ) {

const currentObj = stack.pop(); // Pop the next object to process

if ( ! currentObj || ! currentObj.uuid || processedUUIDs.has( currentObj.uuid ) ) continue;

processedUUIDs.add( currentObj.uuid );

const objectData = getObjectData( currentObj );

if ( objectData ) {

batchObjects.push( objectData );

devTools.objects.set( currentObj.uuid, objectData ); // Update local cache during batch creation

}

// Add children to the stack for processing

if ( currentObj.children && Array.isArray( currentObj.children ) ) {

stack.push( ...currentObj.children );

}

…nd element.

mrdoob · 2025-08-05T06:13:42Z

Made the extension icon clickable. It scrolls to the found renderer when clicked.

Screen.Recording.2025-08-05.at.3.05.22.PM.mov

mrdoob · 2025-08-05T06:14:52Z

Also fixed the wide layout.

Before:

After:

aaaidan · 2025-09-05T20:01:27Z

Is there a roadmap or todo list for the devtools?

It's such a promising tool. I'd love to see it show more detailed information about what the renderer is doing when it renders a frame (e.g. draw lists, etc).

devtools/bridge.js

+				window.postMessage( {
+					id: MESSAGE_ID,
+					name: name,
+					detail: detail
+				}, '*' );


General fix:
Restrict the target origin in calls to window.postMessage, rather than using '*'.

Detailed fix:
We should replace all occurrences of window.postMessage that use a target origin of '*' with a specific origin string, such as 'http://localhost:3000' or another whitelisted value that matches the intended recipient's origin. If the recipient origin is dynamic (e.g., not known ahead of time), establish a handshake protocol (e.g., listen for an initial message that records the caller's origin, validate it, and use that value for subsequent calls).

Implementation for this file:
The responsible code is in the dispatchEvent function.

Define a constant for the intended target origin that matches the devtools panel or injected script.

Replace the '*' argument in window.postMessage with this constant.

If the origin might be dynamic, add logic for capturing the allowed origin during an initial handshake (depending on what you’ve shown of the file), but do not introduce logic that isn’t supported by the code within this snippet.

Required additions:

Add a constant (e.g., TARGET_ORIGIN), set to a value such as 'http://localhost:3000' or a comment placeholder (like 'SPECIFY_TARGET_ORIGIN_HERE').

Replace the literal '*' in the relevant .postMessage call(s) with that constant.

mrdoob · 2025-11-09T07:30:29Z

Added yellow wireframe on rollover. Didn't think this was going to be possible.

Screen.Recording.2025-11-09.at.12.59.28_.mov

Doesn't work all the cases but it works on more cases that I thought.

…l cloning.

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

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

This comment was marked as outdated.

Sign in to view

Added button to scroll the page to the canvas element.

7b13949

Clean up.

409e2cd

mrdoob requested a review from Copilot July 22, 2025 08:31

Copilot AI reviewed Jul 22, 2025

View reviewed changes

jo-chemla mentioned this pull request Jul 28, 2025

Make a browser addon visual inspector pmndrs/triplex#270

Closed

mrdoob modified the milestones: r179, r180 Aug 1, 2025

mrdoob added 4 commits August 5, 2025 14:41

Clicking the extension icon scrolls the page to the first visible fou…

860be6c

…nd element.

Blue tint temporarily the element we're highlighting.

0e91ecf

Fix layout when in wide mode.

6b34858

Bumped version to 1.11

99df0da

mrdoob modified the milestones: r180, r181 Sep 3, 2025

mrdoob modified the milestones: r181, r182 Oct 31, 2025

mrdoob added 2 commits November 9, 2025 00:30

Clean up.

7b5ab33

Merge branch 'dev' into devtools

a8f71d9

github-advanced-security bot found potential problems Nov 8, 2025

View reviewed changes

mrdoob added 2 commits November 9, 2025 00:36

Clean up.

04b6de0

Added wireframe highlight.

d6dcfbf

mrdoob added 2 commits November 9, 2025 16:56

Clean up.

0a77d21

Display as half opacity visible false objects and more robust materia…

06e5515

…l cloning.

@@ -7,6 +7,8 @@
             	// Constants
             	const MESSAGE_ID = 'three-devtools';
+            	// TODO: Set this to the appropriate target origin for postMessage (e.g., 'chrome-extension://<extension-id>' or the devtools panel origin)
+            	const TARGET_ORIGIN = 'SPECIFY_TARGET_ORIGIN_HERE';
             	const EVENT_REGISTER = 'register';
             	const EVENT_OBSERVE = 'observe';
             	const EVENT_RENDERER = 'renderer';
@@ -586,7 +588,7 @@
             					id: MESSAGE_ID,
             					name: name,
             					detail: detail
-            				}, '*' );
+            				}, TARGET_ORIGIN );
             			} catch ( error ) {

-			crypto.getRandomValues( array );
+			try {
+				if (crypto && typeof crypto.getRandomValues === 'function') {
+					crypto.getRandomValues( array );
+				} else {
+					// Fallback to Math.random for insecure contexts
+					for (let i = 0; i < array.length; i++) {
+						array[i] = Math.floor(Math.random() * 256);
+					}
+				}
+			} catch (error) {
+				// Fallback in case of unexpected errors
+				for (let i = 0; i < array.length; i++) {
+					array[i] = Math.floor(Math.random() * 256);
+				}
+			}

-			const array = new Uint8Array( 16 );
-			crypto.getRandomValues( array );
-			array[ 6 ] = ( array[ 6 ] & 0x0f ) | 0x40; // Set version to 4
-			array[ 8 ] = ( array[ 8 ] & 0x3f ) | 0x80; // Set variant to 10
-			return [ ...array ].map( ( b, i ) => ( i === 4 || i === 6 || i === 8 || i === 10 ? '-' : '' ) + b.toString( 16 ).padStart( 2, '0' ) ).join( '' );
+			// Generate 16 random bytes
+			const randomBytes = new Uint8Array( 16 );
+			crypto.getRandomValues( randomBytes );
+			// Set the UUID version to 4 (0100 in binary)
+			const versionByte = ( randomBytes[ 6 ] & 0x0f ) | 0x40;
+			randomBytes[ 6 ] = versionByte;
+			// Set the UUID variant to 10 (binary)
+			const variantByte = ( randomBytes[ 8 ] & 0x3f ) | 0x80;
+			randomBytes[ 8 ] = variantByte;
+			// Convert bytes to hexadecimal and format as UUID
+			const uuid = randomBytes.map( ( byte, index ) => {
+				const hex = byte.toString( 16 ).padStart( 2, '0' );
+				return ( index === 4 || index === 6 || index === 8 || index === 10 ? '-' : '' ) + hex;
+			} ).join( '' );
+			return uuid;

-	miscSpan.innerHTML = '<a href="https://docs.google.com/forms/d/e/1FAIpQLSdw1QcgXNiECYiPx6k0vSQRiRe0FmByrrojV4fgeL5zzXIiCw/viewform?usp=preview" target="_blank">+</a>';
+	const link = document.createElement('a');
+	link.href = 'https://docs.google.com/forms/d/e/1FAIpQLSdw1QcgXNiECYiPx6k0vSQRiRe0FmByrrojV4fgeL5zzXIiCw/viewform?usp=preview';
+	link.target = '_blank';
+	link.textContent = '+';
+	miscSpan.appendChild(link);

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!

This comment was marked as outdated.

Uh oh!

ruofeidu commented Jul 17, 2025

Uh oh!

mrdoob commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

mrdoob commented Aug 5, 2025

Uh oh!

mrdoob commented Aug 5, 2025

Uh oh!

aaaidan commented Sep 5, 2025

Uh oh!

Check warning

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot Autofix

mrdoob commented Nov 9, 2025

Uh oh!

Reviewers

Assignees

Labels

mrdoob commented Jul 18, 2025 •

edited

Loading