Elements

• 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

Styles

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

• 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

Coverage

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

Sources

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

Workspaces

• 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

• 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.group();
  console.groupCollapse()
• console.time(label);
  console.timeEnd(label)

Snippets

• 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

Resources

• 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

Screenshots

Click on on camera and reload with Command + R

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

Breakpoints

• 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

 

Cookies

• Under Application manage your cookies

Profiler

• 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

Memory

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

Layers

• 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.

Rendering

• 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.

Audits

• 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.

HTTPS

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

Lighthouse

• 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