Added button to scroll the page to the canvas element.

devtools/background.js

@@ -24,6 +24,10 @@ chrome.runtime.onConnect.addListener( port => {
 
 			chrome.tabs.sendMessage( tabId, message );
 
+		} else if ( message.name === 'scroll-to-canvas' && tabId ) {
+
+			chrome.tabs.sendMessage( tabId, message );
+
 		} else if ( tabId === undefined ) {
 
 			console.warn( 'Background: Message received from panel before init:', message );

devtools/bridge.js

@@ -101,7 +101,8 @@
 					uuid: renderer.uuid || generateUUID(),
 					type: renderer.isWebGLRenderer ? 'WebGLRenderer' : 'WebGPURenderer',
 					name: '',
-					properties: getRendererProperties( renderer )
+					properties: getRendererProperties( renderer ),
+					canvasInDOM: renderer.domElement && document.contains( renderer.domElement )
 				};
 				return data;
 
@@ -376,6 +377,10 @@
 
 				sendObjectDetails( message.uuid );
 
+			} else if ( message.name === 'scroll-to-canvas' ) {
+
+				scrollToCanvas( message.uuid );
+
 			}
 
 		} );
@@ -455,6 +460,36 @@
 
 		}
 
+		function scrollToCanvas( rendererUuid ) {
+
+			// Find the renderer with the given UUID
+			const renderer = observedRenderers.find( r => r.uuid === rendererUuid );
+			
+			if ( renderer && renderer.domElement ) {
+
+				// Scroll the canvas element into view
+				renderer.domElement.scrollIntoView( {
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'center'
+				} );
+
+				// Optional: Add a brief highlight effect
+				const originalOutline = renderer.domElement.style.outline;
+				renderer.domElement.style.outline = '3px solid #007ACC';
+				
+				setTimeout( () => {
+					renderer.domElement.style.outline = originalOutline;
+				}, 1000 );
+
+			} else {
+
+				console.warn( 'DevTools: Renderer or canvas element not found for UUID:', rendererUuid );
+
+			}
+
+		}
+
 		function dispatchEvent( name, detail ) {
 
 			try {

devtools/content-script.js

@@ -114,6 +114,11 @@ function handleBackgroundMessage( message ) {
 		message.id = 'three-devtools';
 		window.postMessage( message, '*' );
 
+	} else if ( message.name === 'scroll-to-canvas' ) {
+
+		message.id = 'three-devtools';
+		window.postMessage( message, '*' );
+
 	}
 
 }

devtools/manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "Three.js DevTools",
-	"version": "1.9",
+	"version": "1.10",
 	"description": "Developer tools extension for Three.js",
 	"icons": {
 		"128": "icons/128-light.png"

devtools/panel/panel.css

@@ -149,4 +149,29 @@ details.renderer-container[open] > summary.renderer-summary .toggle-icon::before
 .floating-details .property-row {
 	margin-bottom: 1px;
 	font-size: 10px;
+}
+
+/* Scroll to canvas button */
+.scroll-to-canvas-btn {
+	background: none;
+	border: none;
+	cursor: pointer;
+	font-size: 12px;
+	margin-left: 8px;
+	padding: 2px 4px;
+	border-radius: 3px;
+	opacity: 0.6;
+	transition: opacity 0.2s ease, background 0.2s ease;
+}
+
+.scroll-to-canvas-btn:hover {
+	opacity: 1;
+	background: light-dark( rgba(0,0,0,0.1), rgba(255,255,255,0.1) );
+}
+
+.scroll-to-canvas-placeholder {
+	font-size: 12px;
+	margin-left: 8px;
+	padding: 2px 4px;
+	opacity: 0.3;
 } 

devtools/panel/panel.js

@@ -83,6 +83,15 @@ backgroundPageConnection.postMessage( {
 	tabId: chrome.devtools.inspectedWindow.tabId
 } );
 
+// Function to scroll to canvas element
+function scrollToCanvas( rendererUuid ) {
+	backgroundPageConnection.postMessage( {
+		name: 'scroll-to-canvas',
+		uuid: rendererUuid,
+		tabId: chrome.devtools.inspectedWindow.tabId
+	} );
+}
+
 const intervalId = setInterval( () => {
 
 	backgroundPageConnection.postMessage( {
@@ -292,9 +301,13 @@ function renderRenderer( obj, container ) {
 	const displayName = `${obj.type} <span class="object-details">${details.join( ' ・ ' )}</span>`;
 
 	// Use toggle icon instead of paint icon
+	const scrollButton = obj.canvasInDOM ? 
+		`<button class="scroll-to-canvas-btn" data-canvas-uuid="${obj.uuid}" title="Scroll to canvas">🙂</button>` : 
+		`<span class="scroll-to-canvas-placeholder" title="Canvas not in DOM">󠀠🫥</span>`;
 	summaryElem.innerHTML = `<span class="icon toggle-icon"></span> 
 		<span class="label">${displayName}</span>
-		<span class="type">${obj.type}</span>`;
+		<span class="type">${obj.type}</span>
+		${scrollButton}`;
 	detailsElement.appendChild( summaryElem );
 
 	const propsContainer = document.createElement( 'div' );
@@ -370,6 +383,16 @@ function renderRenderer( obj, container ) {
 
 	detailsElement.appendChild( propsContainer );
 
+	// Add click handler for scroll to canvas button
+	const scrollBtn = detailsElement.querySelector( '.scroll-to-canvas-btn' );
+	if ( scrollBtn ) {
+		scrollBtn.addEventListener( 'click', ( event ) => {
+			event.preventDefault();
+			event.stopPropagation();
+			scrollToCanvas( obj.uuid );
+		} );
+	}
+
 	container.appendChild( detailsElement ); // Append details to the main container
 
 }