Discover the ins and outs of browser DevTools as the hosts unveil each tab's secrets. They joke about improving coding performance and optimizing API loads while revealing cache management techniques. Dive into communication solutions that enhance user interaction, and learn how to master memory leaks and performance metrics. Exciting discussions on color contrast in web design and hidden features of Chrome's developer tools round out the session. Plus, enjoy a fun detour into coffee making and personal anecdotes!
01:02:57
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
volunteer_activism ADVICE
Network Tab Usage
Use the Network tab to see all requests and disable caching for accurate debugging.
View timing, GZIP size, and identify blocked requests or analytics tracking.
volunteer_activism ADVICE
Cache Busting
After deploying, close DevTools and bust cache for users by appending a version query to assets.
Use query parameters or hashes to force browsers to download new assets instead of using cached versions.
volunteer_activism ADVICE
Debugging and Unofficial APIs
Debug network requests and utilize unofficial APIs by inspecting network activity, copying as fetch or cURL.
Delete unnecessary parts of the copied request until it breaks, then restore the last removed part.
Get the Snipd Podcast app to discover more snips from this episode
In this episode of Syntax, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them.
Vonage - Sponsor
Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
Freshbooks - Sponsor
Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor
If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes
3:50 - Network
See all requests, filter by type or name
Used to understand all requests coming or going
Turn off caching
View timing
See the true GZIP size
Slow down network speed
See time for page load
Copy as fetch or CURL
View request, response, and headers
See CORS issues
See which requests have happened
See if an asset is cached (both in dev tools, also Cloudflare)
See blocked requests because of extensions
Tip: You can see the network info from the console in Firefox
22:03 - Memory
See what is taking up memory
Strings
DOM nodes
Objects
Actual .js
26:44 - Performance
Click record and use the site
Flame chart useful for finding slow functions and debugging janky animations
Get FPS in coordination with flame chart
Save performance recording data to be able to share for debugging
You can also upload saved data to debug without using the site
30:48 - Console
Interfaces with the JS runtime
Shows errors, warnings, and logs
Tip: Negate noisy warnings/errors that clutter your console with -
Tip: Use $0 to select current element
$1 for second last
$r for current React element
Tip: Use $$ to shortcut Query SelectorAll and Array.from
Tip: Use $ to shortcut Query Selector
40:28 - Storage / Application
Working with LocalStorage, Cookies, Index DB, and Session Storage
44:56 - Audit / Lighthouse (Chrome and Firefox)
Run lighthouse to check for performance, accessibility, and UI stuff
Not the silver bullet audit that many people think it is
Colors are sometimes like “Really?!”
Can be helpful regardless
50:28 - DOM Tab
Firefox only
Shows everything that is in the scope of the browser
Syntax - Tasty Web Development Treats