Artwork

内容由Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers提供。所有播客内容(包括剧集、图形和播客描述)均由 Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers 或其播客平台合作伙伴直接上传和提供。如果您认为有人在未经您许可的情况下使用您的受版权保护的作品,您可以按照此处概述的流程进行操作https://zh.player.fm/legal
Player FM -播客应用
使用Player FM应用程序离线!

Dev Tools Tabs Explained — Plus Tips & Tricks

1:02:50
 
分享
 

Manage episode 289952553 series 1469447
内容由Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers提供。所有播客内容(包括剧集、图形和播客描述)均由 Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers 或其播客平台合作伙伴直接上传和提供。如果您认为有人在未经您许可的情况下使用您的受版权保护的作品,您可以按照此处概述的流程进行操作https://zh.player.fm/legal

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
Links ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!
  continue reading

750集单集

Artwork
icon分享
 
Manage episode 289952553 series 1469447
内容由Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers提供。所有播客内容(包括剧集、图形和播客描述)均由 Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers 或其播客平台合作伙伴直接上传和提供。如果您认为有人在未经您许可的情况下使用您的受版权保护的作品,您可以按照此处概述的流程进行操作https://zh.player.fm/legal

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
Links ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!
  continue reading

750集单集

Alle episoder

×
 
Loading …

欢迎使用Player FM

Player FM正在网上搜索高质量的播客,以便您现在享受。它是最好的播客应用程序,适用于安卓、iPhone和网络。注册以跨设备同步订阅。

 

快速参考指南