SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
React Developer Tools
Debug UIs
Leva
R3F-Perf
Shortcuts ⌨️
⚠️ Update
Use version 0.9.34
of leva
:
npm install leva@0.9.34
⚠️ Update
Use version 7.2
of r3f-perf
:
npm install r3f-perf@7.2
Unlock content 🔓
To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!
Want to learn more? 🖖
That's the end of the free part 😔
To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction 00:00
We’ve been using React and React Three Fiber, but we haven’t really discussed monitoring and debugging.
This concerns both React and React Three Fiber and it’s important to make our developer life as easy as possible so that we can focus on the application and not on debugging or on understanding why the frame rate suddenly drops.
We are going to talk about React debugging first, then focus on React Three Fiber debugging and monitoring.
Setup 00:33
The starter is very similar to the previous starter with a sphere, a cube and a green floor.
The @react-three/drei
dependency is already installed within the project and we are using the OrbitControls
helper to be able to move the camera around.
StrictMode 00:59
There is one important React feature that we haven’t used yet for the sake of simplification, but that you should add to all your React projects and it’s the StrictMode
.
The StrictMode
will warn you about potential problems in your application.
Here are some examples:
- Unused import
- Infinite render loop
- Forgotten
useEffect
dependencies - Deprecated practices
- Etc.
Adding it to your application is as simple as adding a tag around it.
In /src/index.jsx
, import StrictMode
from react
:
import { StrictMode } from 'react'
Wrap the <Canvas>
in a <StrictMode>
:
root.render(
<StrictMode>
<Canvas
camera={ {
fov: 45,
near: 0.1,
far: 50,
position: [ - 4, 3, 6 ]
} }
>
<Experience />
</Canvas>
</StrictMode>
)
And that’s all.
Potential errors will now be shown as a warning in the terminal and in the console.
In the following lessons, we should not encounter specific errors, which is why we are not going to use it, but you should retain the StrictMode
when you start adventuring on your own.
Don’t worry about the impact of the StrictMode
in production. It’ll be ignored once the application is built.
Browser extension 03:54
We can install an extension named React Developer Tools that will help us check and modify our components live.
How to use it 🤔
- Download the Starter pack or Final project
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm install
to install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run dev
to launch the local server
(project should open on your default browser automatically) - Start coding
- The JS is located in src/script.js
- The HTML is located in src/index.html
- The CSS is located in src/style.css