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!

Deep dive into Chrome & Firefox's DevTools

By Pava

Deep dive into Chrome & Firefox's DevTools

Browsers are pretty amazing pieces of software! They not only enable access to the The Web, but their DevTools are full-fledged IDEs making us more capable and productive developers! So we'd say it's about time to put our "diving gear" on and explore the depths of how browsers can help us in our day-to-day jobs.

  • 326
Loading comments...

More from Pava