Using Google Chrome, for Webflow

Chrome DevTools

No items found.
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
Int
7:46
204
Chrome DevTools
Chrome DevTools
401
Performance Testing
800
Advanced
Advanced Chrome Dev
900
No items found.

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

CTRL+SHIFT+I Open DevTools

Right-Click Inspect

CTRL+SHIFT+C Select Element for Inspection

CTRL+SHIFT+J Javascript

CTRL+SHIFT+U Source

Sizing

CTRL+PLUS

CTRL+MINUS

CTRL+KEYPAD-0 Return everything on the page to the default size

Table of Contents
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.