Using Google Chrome, for Webflow

Chrome DevTools

Overview
Using Chrome Efficiently
Google Chrome Hotkeys
101
Chrome's Bookmarks Bar
103
Searching Tabs
104
Chrome Profiles
105
Expanding Chrome
Chrome Browser Extensions
201
Chrome's Custom Search
7:46
204
Chrome DevTools
Chrome DevTools
401
Performance Testing
800
Advanced
Advanced Chrome Dev
900
No items found.
Published
Updated
November 6, 2022
in lightbox

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

FAQs

Answers to frequently asked questions.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.