86 | Chrome Developer Tools Walkthrough

Sep 23, 2022

Ask episode

Chapters

Transcript

Episode notes

Are You Partial to Memphis Barbecue?

Redwood - Your First Introduction to Redwood

The Berlin Wall and It's Resting

Chrome Developer Tools

Is It the V8 Engine or the No Js Engine?

Adding Custom Styles to HTML Elements

Data CMS - Back to Styles

JavaScript Developer Panel - Styles Panel

The Layout Panel I've Never Used Before

The Dom Break Points Panel

How to Preserve Logs in VS Code

Website Coding Zeal Calm

JavaScript Debugging With Google Chrome and VS Code

Vs Code and Chrome Tools to Find the Bug Problem

Optimize Your Web Application Using Cloudinary

Can You Disable Cache?

Using Vercel to Host a Compressed Website

How to Get a Lighthouse Score From Google Chrome

Is There a Developer Panel for React?

Get Paid a Nickel a Month

Is There a Way to Add a Console Log?

I Liked the Invention of Anna

My Pick for the Week Is a TV Show

In this episode, James and Amy talk about the Chrome Developer Tools including familiar tabs like Elements, Console, Network, and a few you've probably never heard of! They also share some of their favorite tips and tricks along the way.

Sponsors

ZEAL

ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit codingzeal.com

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

DatoCMS

DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."

For more information, visit datocms.com

Show Notes

00:00:00 - Intro
00:04:43 - Amy's Trip to Berlin for Prisma Days
00:07:47 - What Are Chrome Developer Tools?
00:12:18 - The Elements Tab
00:16:00 - Sponsor: DatoCMS
00:16:54 - Tweaking Styles in the Elements Tab
00:19:06 - The Layout Tab, Event Listeners, Breakpoints, and Accessibility Tabs
00:23:34 - The Console
00:27:18 - Sponsor: Zeal
00:28:12 - Performance Insights and Performance
00:29:07 - Debugging and the Sources Tab
00:31:22 - The Network Tab
00:37:07 - Sponsor: Vercel
00:38:14 - The Application Tab - Local Storage, Cookies, and More
00:41:30 - The Lighthouse Tab and Framework Specific Tabs
00:44:52 - Grab Bag Questions
00:50:02 - Picks and Plugs