Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Dev Tools Tabs Explained — Plus Tips & Tricks

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Vonage__Sponsor_9" name="Vonage__Sponsor_9"></a>Vonage - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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 <a href= "https://vonage.dev/syntax">vonage.dev/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Sentry__Sponsor_15" name="Sentry__Sponsor_15"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17">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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 3:50 - Network</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> See all requests, filter by type or name</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Used to understand all requests coming or going</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Turn off caching</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> View timing</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> See the true GZIP size</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Slow down network speed</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> See time for page load</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Copy as fetch or CURL</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> View request, response, and headers</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> See CORS issues</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> See which requests have happened</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> See if an asset is cached (both in dev tools, also Cloudflare)</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> See blocked requests because of extensions</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> Tip: You can see the network info from the console in Firefox</li> </ul> <p class="has-line-data" data-line-start="35" data-line-end="36"> 22:03 - Memory</p> <ul> <li class="has-line-data" data-line-start="36" data-line-end="42"> See what is taking up memory <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> Strings</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> DOM nodes</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> Objects</li> <li class="has-line-data" data-line-start="40" data-line-end="42"> Actual .js</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="42" data-line-end="43"> 26:44 - Performance</p> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Click record and use the site</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Flame chart useful for finding slow functions and debugging janky animations</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Get FPS in coordination with flame chart</li> <li class="has-line-data" data-line-start="46" data-line-end="47"> Save performance recording data to be able to share for debugging</li> <li class="has-line-data" data-line-start="47" data-line-end="49"> You can also upload saved data to debug without using the site</li> </ul> <p class="has-line-data" data-line-start="49" data-line-end="50"> 30:48 - Console</p> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> Interfaces with the JS runtime</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Shows errors, warnings, and logs</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Tip: Negate noisy warnings/errors that clutter your console with <code>-</code></li> <li class="has-line-data" data-line-start="53" data-line-end="56"> Tip: Use $0 to select current element <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> $1 for second last</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> $r for current React element</li> </ul> </li> <li class="has-line-data" data-line-start="56" data-line-end="57"> Tip: Use $$ to shortcut Query SelectorAll and Array.from</li> <li class="has-line-data" data-line-start="57" data-line-end="59"> Tip: Use $ to shortcut Query Selector</li> </ul> <p class="has-line-data" data-line-start="59" data-line-end="60"> 40:28 - Storage / Application</p> <ul> <li class="has-line-data" data-line-start="60" data-line-end="62"> Working with LocalStorage, Cookies, Index DB, and Session Storage</li> </ul> <p class="has-line-data" data-line-start="62" data-line-end="63"> 44:56 - Audit / Lighthouse (Chrome and Firefox)</p> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> Run lighthouse to check for performance, accessibility, and UI stuff</li> <li class="has-line-data" data-line-start="64" data-line-end="66"> Not the silver bullet audit that many people think it is <ul> <li class="has-line-data" data-line-start="65" data-line-end="66"> Colors are sometimes like “Really?!”</li> </ul> </li> <li class="has-line-data" data-line-start="66" data-line-end="68"> Can be helpful regardless</li> </ul> <p class="has-line-data" data-line-start="68" data-line-end="69"> 50:28 - DOM Tab</p> <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> Firefox only</li> <li class="has-line-data" data-line-start="70" data-line-end="72"> Shows everything that is in the scope of the browser</li> </ul> <h2 class="code-line" data-line-start="72" data-line-end="73"> <a id="Links_72" name="Links_72"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://adamwathan.me/">Adam Wathan</a></li> <li class="has-line-data" data-line-start="74" data-line-end="76"> <a href="https://twitter.com/bentlegen">Ben Vinegar</a></li> </ul> <h2 class="code-line" data-line-start="76" data-line-end="77"> <a id="_SIIIIICK__PIIIICKS__76" name= "_SIIIIICK__PIIIICKS__76"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> Scott: <a href= "https://dupeguru.voltaicideas.net/">dupeGuru</a></li> <li class="has-line-data" data-line-start="78" data-line-end="80"> Wes: <a href="https://amzn.to/38IFvlt">Moccamaster Coffee Maker</a></li> </ul> <h2 class="code-line" data-line-start="80" data-line-end="81"> <a id="Shameless_Plugs_80" name="Shameless_Plugs_80"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="81" data-line-end="82"> Scott: <a href="https://www.leveluptutorials.com/pro">Node Fundamentals Authentication</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="82" data-line-end="84"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="84" data-line-end="85"> <a id="Tweet_us_your_tasty_treats_84" name= "Tweet_us_your_tasty_treats_84"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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  Adam Wathan

 Ben Vinegar

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: dupeGuru

 Wes: Moccamaster Coffee Maker

  Shameless Plugs  Scott: Node Fundamentals Authentication - Sign up for the year and save 25%!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Dev Tools Tabs Explained — Plus Tips & Tricks

Poslechněte si podcast