Tips and Tricks with Chrome DevTools / Web Inspector
For Intercom Debugging
Apologies to users of other browsers but for most of these there should be an equivalent feature in your browser of choice
What is it?
- A Swiss army knife for web development debugging
- View Live Source
- View HTML and Javascript Code
- View Network requests
- See memory usage
- Performance testing
- And much more
How to use it?
View (Live) Source
- By "live" it means "live"
- Better representation vs viewing source
View (Live) Code
- See the code that crafts the page
- Javascript debugging with breakpoints
View Network requests
- See what's loading and from where
- See bottlenecks
Performance Testing
Performance Testing
Performance Testing
Page/Application Details
Page/Application Details
Page/Application Details
The favourite - Console
Going deeper!
Don't bother with source
- Look for `intercom`
(most of the times)
Ping is King / Trust the Ping
- Look for `ping`
- Most of the data you really need
-
Some notables that are missing: Messenger Attributes
- alignment
- hide_default_launcher
- custom_launcher_selector
Narrow the search
- Filter by type
Narrow the search
- Filter by common URL
Narrow the search
- Regular Expressions!
Search all the things
- Finding weird installations
- Common search terms:
-
APP_ID / Intercom("boot") / Intercom('boot') / Intercom("update")...
-
Prettify Code
Speed Testing and Caching
Preserving logs
- On full page loads logs disappear and AJAX requests get cancelled
- Help identify possible timing issues
CSS Hacks
See Events on Elements
See Events on Elements
- Hover and Delete!