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

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 );

}

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 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

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

-			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!

Uh oh!

mrdoob commented May 12, 2025

Uh oh!

mrdoob commented Jul 14, 2025

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!

Uh oh!

mrdoob commented Jul 18, 2025 •

edited

Loading