https://github.com/playcanvas/playcanvas-inspector
Chrome extension for inspecting published PlayCanvas apps
https://github.com/playcanvas/playcanvas-inspector
chrome-extension debugging-tool playcanvas webgl
Last synced: 3 months ago
JSON representation
Chrome extension for inspecting published PlayCanvas apps
- Host: GitHub
- URL: https://github.com/playcanvas/playcanvas-inspector
- Owner: playcanvas
- License: mit
- Created: 2020-06-10T09:40:43.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-18T22:28:34.000Z (about 2 years ago)
- Last Synced: 2025-06-19T03:18:16.609Z (4 months ago)
- Topics: chrome-extension, debugging-tool, playcanvas, webgl
- Language: JavaScript
- Size: 373 KB
- Stars: 15
- Watchers: 9
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PlayCanvas Inspector
Chrome extension for inspecting published PlayCanvas apps.
## Installation
1. In Chrome, navigate to chrome://extensions/
2. In the top left of the tab, hit 'Load unpacked'
3. Select the root folder of your clone of the playcanvas-inspector repo
## Enabling the Inspector
Open Chrome DevTools and select the PlayCanvas tab. Press the 'Add devtools' button to add the debug menu to the app.
Note that the Inspector will not activate if the PlayCanvas app is contained within an iframe. Apps published to the https://playcanv.as domain are wrapped in an iframe. For example, this is the link for a PlayCanvas app:
https://playcanv.as/p/2OlkUaxF/
The same app without the iframe requires you to add a `/e` (which stands for embed) to the URL:
https://playcanv.as/e/p/2OlkUaxF/
The Inspector will now be able to activate.
## Available Tools
### Mini Stats
Shows the CPU, GPU and total frame time in ms. Can be enabled/disabled via the menu.
### Physics debug renderer
Render physics volumes in the scene. Requires the script to be added to the scene first by clicking on `addPhysicsDebug`.
### Print scene graph
This will print out the scene hierarchy to the console to see the current state is. Really useful if you are adding/removing entities at runtime.
`entitiesOnly` will only print nodes that are entities (no meshInstances)
`enabledNodesOnly` will filter out disabled nodes from the print out
`printPaths` will print out the hierarchy paths of each node which makes it easier to modify the entity on the console
e.g.
```
var e = pc.app.root.findByPath('some/path/to/entity');
e.enabled = false;
```
`withFilter` allows you to add use the conditional in the filterString to print out where `node` represents the node to filter.
e.g.
Set the `filterString` to `node.model` will on print nodes with a model component.
### Entity picker
Allows you to middle click or touch on any object in the scene and print the details to the console. Useful for finding where entities are in the hierarchy and investigating the current prosperities on said entity. The hierarchy path is also printed to make easier to directly modify the entity on the console.
e.g.
```
var e = pc.app.root.findByPath('some/path/to/entity');
e.enabled = false;
```
The camera list should be set to camera that is used for the current view.