Chrome & Firefox's

Dev Tools

- TalkTorial -

DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

👍 Must know

👌 Should know

🤘 Good to know

🤓 Nerd material

*

👍 Must know

Recently started with Front-end development.

   elements & styles

1

  • See the Nodes resulted from HTML
    
  • See the entire style cascade applied to them

   networking

2

  • See the full Network activity
    
  • Good way of finding "why isn't my CSS applying?" bugs
    
https://username.github.io/repo
<img src="/images/logo.png" />

   console

3

  • View logs, errors & run code
    
  • Can be opened within any tab with Esc key
    
  • $0, $1, $2, $3, $4 can be used to reference previously selected nodes in the Elements panel
    
  • console.dir($0)
  • console.log( {x} );
$('body a'); // document.querySelector

$$('body a'); // document.querySelectorAll
  • Has a jQuery'like elements selector

   sources

4

  • Debug your app (▶)
    
  • debugger;
  • Ctrl/Command + P to navigate between files
  • Snippets

   device emulation

5

Live

From practice/dummy apps to

real-life* products

👌 Should know

   application/storage

1

  • Client-side storage
    

   debugging

2

  •  NodeJS debugging
    
  •  Remote debugging
    

   audits

3

📷 Optimize #1: compression

📷 Optimize #2: code splitting

   sensors

4

🌍

geolocation

State of the art apps

 

Maybe accessibility, performance or simply pushing the limit of being efficient

🤘 Good to know

   performance

1

🔴 Configure recording
🎥 FPS
📈 CPU usage
📈 Network
👨‍💻 Details

⌚ Optimize #1:

page loading too slow

🎨 Optimize #2: app drops FPS

   coverage

2

  • How much of the code do you actually use?
    

   pwa

3

  • Manifest debug
    
  • PWA functionality debug
  • Service Worker debug

   accessibility

4

  • Position in the accessibility tree
    
  • ARIA attributes
    

   tips & tricks

5

  • 😁 Breaking on DOM changes
  • 😁 Breaking on XHR
  • 😁 Blackboxing scripts
  • 😁 Show event listeners
    

Straight out nerd!

🤓 Nerd material

   memory profiler

1

A bug in the page which causes it to progressively use more and more memory.

   workspaces

2

  • Add a folder to Chrome & use it as an IDE
    

   experiments

3

  • Terminal in browser
    

   CSS Grid

4

Special tool for
CSS Grid

   animations

5

  • Debug & modify animations
    

Q&A

 

-or-

 

What did I miss?

🔍 Let's audit an app!

📅 Next time:

⚡ Lightning talks

Register here

It doesn't have to be

rocket science!

Thank you!