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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182447/pasted-from-clipboard.png)
View (Live) Source
- By "live" it means "live"
- Better representation vs viewing source
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182485/pasted-from-clipboard.png)
View (Live) Code
- See the code that crafts the page
- Javascript debugging with breakpoints
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182488/pasted-from-clipboard.png)
View Network requests
- See what's loading and from where
- See bottlenecks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6183899/pasted-from-clipboard.png)
Performance Testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182494/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182495/pasted-from-clipboard.png)
Performance Testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182503/pasted-from-clipboard.png)
Performance Testing
Page/Application Details
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182508/pasted-from-clipboard.png)
Page/Application Details
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6183884/pasted-from-clipboard.png)
Page/Application Details
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6183875/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6183880/pasted-from-clipboard.png)
The favourite - Console
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6182517/pasted-from-clipboard.png)
Going deeper!
Don't bother with source
- Look for `intercom`
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184289/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184290/pasted-from-clipboard.png)
(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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184304/pasted-from-clipboard.png)
Narrow the search
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184322/pasted-from-clipboard.png)
- Filter by type
Narrow the search
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184471/pasted-from-clipboard.png)
- Filter by common URL
Narrow the search
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184497/pasted-from-clipboard.png)
- Regular Expressions!
Search all the things
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184518/pasted-from-clipboard.png)
- Finding weird installations
- Common search terms:
-
APP_ID / Intercom("boot") / Intercom('boot') / Intercom("update")...
-
Prettify Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184548/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184552/pasted-from-clipboard.png)
Speed Testing and Caching
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184265/pasted-from-clipboard.png)
Preserving logs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184590/pasted-from-clipboard.png)
- On full page loads logs disappear and AJAX requests get cancelled
- Help identify possible timing issues
CSS Hacks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6186029/pasted-from-clipboard.png)
See Events on Elements
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184607/pasted-from-clipboard.png)
See Events on Elements
![](https://s3.amazonaws.com/media-p.slid.es/uploads/87792/images/6184610/pasted-from-clipboard.png)
- Hover and Delete!
Resources
Share your tips!
Questions?
Tips and Tricks with Chrome DevTools / Web Inspector
By Timothy Lim
Tips and Tricks with Chrome DevTools / Web Inspector
- 971