Deep Dive into Chrome DevTools

@Webapp Builders Meetup

Jull Weber
My company: Monkey Kode Agency

Jull-Allan Weber Sanfiorenzo


Bayamon, Puerto Rico
2000 MIT Graduate
Monkey Kode Agency, Danceraccess
PHP, JS; Technically Full Stack, but more Front End Dev
Curious Facts:
  1. Was obsessed with building 2000 piece jigsaw puzzles when i was 4.
  2. Went to Space Camp and witnessed my first tornado at 11. I didn't fly away, Thank God.
  3. Took hiatus to dance professionally. Went on tour dancing with Madonna.

Dancing Coder



  • Inspect Element. Settings Dark or Light Theme.
  • "Select Element to inspect it." View attributes
    • Styles
    • Computed Styles
      • Box Model with spacing
      • Click arrow to take you to class
      • View css parents and overridden classes
    • Event Listeners
      • Tells you events associated with element
      • Click to go to declaration of listener in file
      • Toggle Framework and parent listeners
    • Debugger DOM breakpoints
      • Lists all breakpoints added on chrome debugger
    • Object Properties: All js properties associated with element
  • Drag and drop and delete elements.
  • Add Attribute, Edit HTML
  • Scroll to bring into view


  • Disable rules for active elements
  • Edit rules for pseudo classes
  • Link to css source
  • Live CSS edit. Add CSS class with '+'

Cool Style Editors

  • CSS transitions editor
  • Color Picker. Pick any color from anywhere on the page.
  • Text Shadow Editor

Responsive Views

  • Toggle Device Views. Preset mobile devices + Responsive.
  • View Media Queries
  • Capture Screenshot
  • Add Network Throttling
  • Device Emulation Sensors


  • See unused js and css for your app.
  • Only available in Chrome Canary


  • Edit File
  • Command Save to Browser cache.
  • Local Modifications history
    • Apply Revision content
    • Revert
    • 'Save as' to original file


  • Add Folder to Workspace. You can just drag and drop and automatically matches your local folder to browser.
  • It will detect other file types like typescript ans sass.
  • Now you'll be able to save your changes locally and use the browser like an IDE.


  • Search all files. (Command + P)
  • Go to Line: (Command + L)
  • Find in file. (Command + F)


Console Window

  • 'Esc' to open and close
  • Bling selection
    • $() – Short for document.querySelector(). Returns the first element, matching a CSS selector ( e.g. $(‘div’) will return the first div element in the page).; If using jQuery returns array: $('#title')[0]
    • $$() – Short for document.querySelectorAll(). Returns an array of elements that match the given CSS selector.
    • $0 – $4 – A history of the five most recent DOM elements that you’ve selected in the elements panel, $0 being the latest.
  • Autocompletion. Substring Completions.
  • ES6 Ready - try new features here
  • Read line smart enter.
  • Multiple Cursors (Hold Command)
  • Syntax Highlighting
  • Select Next/Prev (Command + D)
  • Preserve Log

Console Debug

  • Use 'debugger' to start Chrome debugger.
  • Handy console methods
    • console.log()
    • console.error(msg)
    • console.assert()
    • console.trace()
    • console.time(label);


  • Sources->Snippets. Add new snippets and save them to your browser. Handy to ckeep around.
  • Command + enter to play your snippet.
  • For available snippets google 'Devtools snippets.'

JS errors

  • Display error
  • Stack Trace



  • See resource's attributes:
    • Name
    • Status Code
    • File Type
    • What initiated the request
    • Size
    • How long it took. (When it was requested)
  • Waterfall
    • Colored by the file type
    • Hover to see TTF (Time to First Byte)
    • Hover to see how long it took to download
    • Zoom into area
    • Simulate Throttling
    • Simulate Offline
  • Time
    • Check to see total bytes on page
    • (Purple Line) When the browser finished parsing your html.
    • (Red Line) When all the resources have finished loading.
  • Disable cache (Also in settings)

Resources Detail

  • Click on file to see information about request:
    • Headers
    • Preview
    • Response
    • Cookies
    • Timing


Click on on camera and reload with Command + R

Debugging JS

Pretty Print

  • Click on brackets to expand minified code

Pause on Exceptions

  • Click pause to have debugger stop on refresh
  • Hover over var to see value
  • Click Play to continue
  • Click Step Over/Step Into/Step Out function call
  • Call Stack - see js stack trace


  • Add breakpoints to JS
  • Inline breakpoints will automatically be detected.
  • Blackbox Scripts
  • Break on... (Break on non-js actions)
    • Subtree modifications
    • Attribute modifications
    • Node Removal

Local Storage

  • Under Application manage your local storage variables



  • Under Application manage your cookies



  • Go to Performance click record button or just reload with command + R. Interact with page. Click stop
    • View FPS (Frames per second). Anything below 60fps is considered non-performant
    • Zoom in to get more details
    • Click to record screenshots. Hover to view.

CPU JS Profiler

Check how long js function operations are taking.
  • Go to Javascript Profiler. Click record and reload or interact with page. Stop.
    • Tree or Chart format.
    • Expand down to function calls to see what's responsible for slowing down your function. Chart format, zoom in to view, and hover for details.
    • Try again and record new profile.
    • Save profile locally.

Timeline View

All in 1 profiler. Just click record button and zoom into area.
  • View Summary of everything:
    • Info on network request.
    • FPS of section
    • Under Main, chart view of browser procedures color coded.
      • Parsing HTML - blue
      • JS Execution - yellow
      • Loading - light blue
      • Rendering - purple
    • Memory Allocation
    • Summary
      • Summary- chart with summary of browser procedures.
      • Bottom up- List of js function calls, longest at the top.
      • Call Tree- Tree view of how each browser procedure is being executed.
      • Event Log


Identify and manage memory leaks
  • Narrow down into your code and see if there are any memory leaks. Go to Memory Panel.
  • Click on object to see memory size.
  • Expand down the function calls to see what's causing the function delay.
  • Memory Profile Types
    • Heap Sanpshots
      • Make a few Profiles
      • Choose Comparison view
    • Record Allocation Profile - memory used by functions
    • Record Allocation Time -heap allocation over time



  • Inspect if your dom elements are being placed in separate layers (which is better for DOM rendering)
  • 3D view with panning and zoom.

Paint Profiler

  • Narrow down exactly what is being painted when and how much work the browser is doing.


  • Paint Flashing - Check what's being repainted.
  • Layer Borders - Outline the layer area.
  • FPS Meter - Check the frames per second live.
  • Scrolling Performance Issues - Tells you which elements can slow down scrolling.
  • Emulate things like "print" media.



  • Audit your site.
  • Get page speed recommendations for improving your site.

Network Throttling

  • Test how your site performs in different network situations.
  • Simulate a mobile experience.
  • Simulate Offline Experience.
  • Choose specific User Agent.
  • Sensors tab for motion sensitive debugging.


  • View certificate information on Security Panel.
  • Errors on your certificate and other details


  • Chrome Extension to check performance on your page.
  • Made to debug PWA (Progressive Web Apps).
  • Score
    • It will score your app according to the PWA Checklist
    • Look into Best Practices
    • Performance Metrics
    • Accessibility
    • Offline experience
    • Mobile friendliness
    • JS Audit Developer excellence