One of the most useful environment you'll ever find;
What's it for...
Basic informational stuff...
- Determining if your scripts have errors
- Determining if files like scripts & CSS cannot be found
- Viewing Generated HTML and CSS
- Clicking on elements to see that HTML and CSS are applied to them
Intermediate...
- Modifying HTML and CSS to see what the changes will look like
Performance & Diagnostics
- Checking for script errors, or missing files
- Site load performance
- Performance Insights ( NEW )
Developers
- Cookies
- Script and event debugging
- Console logging
- Script breaks and step-through
Accessing DevTools
CTRL+SHIFT+I Open DevTools
Right-Click Inspect
CTRL+SHIFT+C Select Element for Inspection
CTRL+SHIFT+J Javascript
CTRL+U Source
Troubleshooting
Chrome's debugger keeps invoking
The Problem
Exceptionally well summarized by Dennis Karg in the partner forums.
The new Bot Protection aka Cloudflare TURNSTILE regularly starts the Dev Debugger.
On Webflow websites where Bot Protection is enabled, the web workers (usually 2) active from TURNSTILE seem to start the debugger every 8-12 seconds and stop again after 1 second. The fact that the debugger is switched on ensures that the ‘Sources’ panel is always selected regardless of the currently active Dev Tool Panel. This happens both in regular use with Chrome Extensions and in incognito.
The Solution
Shared by Webflow's James Mosier:
This is a side effect with Turnstile, not Webflow specifically. It is a security measure to ensure Turnstile is not tampered with and is implemented by Cloudflare.
To prevent this you can disable breakpoints in your browser devtools.
Zooming
CTRL+PLUS
CTRL+MINUS
CTRL+KEYPAD-0 Return everything on the page to the default size
