Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork35.9k
Added new DevTools#30870
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:dev
Are you sure you want to change the base?
Added new DevTools#30870
Uh oh!
There was an error while loading.Please reload this page.
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
We now show the three.js version detected in the icon badge:  |
We can now show the object transforms. Screen.Recording.2025-07-13.at.5.44.41.PM_.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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
getObjectIconhas no associated tests. Adding unit tests to cover each icon mapping will help prevent regressions as new object types are added.
function getObjectIcon(obj) {| 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(); | ||
| } ); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
| constintervalId=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 uses AI. Check for mistakes.
devtools/panel/panel.js Outdated
| summaryElem.innerHTML = `<span class="icon toggle-icon"></span> | ||
| <span class="label">${displayName}</span> | ||
| <span class="type">${obj.type}</span>`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
| summaryElem.innerHTML= `<spanclass="icon toggle-icon"></span> | |
| <spanclass="label">${displayName}</span> | |
| <spanclass="type">${obj.type}</span>`; | |
| consttoggleIconSpan=document.createElement('span'); | |
| toggleIconSpan.className='icon toggle-icon'; | |
| constlabelSpan=document.createElement('span'); | |
| labelSpan.className='label'; | |
| labelSpan.textContent=`${obj.type} `; | |
| constobjectDetailsSpan=document.createElement('span'); | |
| objectDetailsSpan.className='object-details'; | |
| objectDetailsSpan.textContent=details.join(' ・ '); | |
| labelSpan.appendChild(objectDetailsSpan); | |
| consttypeSpan=document.createElement('span'); | |
| typeSpan.className='type'; | |
| typeSpan.textContent=obj.type; | |
| summaryElem.appendChild(toggleIconSpan); | |
| summaryElem.appendChild(labelSpan); | |
| summaryElem.appendChild(typeSpan); |
Copilot uses AI. Check for mistakes.
| row.style.marginBottom = '2px'; | ||
| // Pad label to ensure consistent alignment | ||
| const paddedLabel = label.padEnd(16, ' '); // Pad to 16 characters |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
[nitpick] The padding length16 is a magic number. Extract it into a named constant (e.g.,LABEL_PAD_LENGTH) so its purpose is clear and maintainable.
| constpaddedLabel=label.padEnd(16,' ');// Pad to16 characters | |
| constpaddedLabel=label.padEnd(LABEL_PAD_LENGTH,' ');// Pad toLABEL_PAD_LENGTH characters |
Copilot uses AI. Check for mistakes.
| let displayName = obj.name || obj.type; | ||
| // Default rendering for other object types | ||
| const elem = document.createElement( 'div' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Copilot uses AI. Check for mistakes.
This is amazing! |
Sometime is not easy to find where in the page the renderer is... Screen.Recording.2025-07-18.at.12.08.59.PM.mov |
Description
Started a new and simpler Three.js DevTools.