Developer Tools
- Layout and Style inspector
- JavaScript debugging
- Performance monitoring
- Responsive view
- Canvas, Web Audio, Storage inspector
If you are a web developer, you NEED it.
Page Inspector
- View and Modify HTML
- Walk the DOM
- Examine Box model
- Look at styles for each DOM element.
- Ctrl-Shift-C
(Cmd-Option-C on the Mac & Linux)
Web Console
- View warnings and errors
- From JavaScript
- From CSS
- From network
- Instant REPL
- Special helper commands, like help()
- Control-Shift-K
(Command-Option-K on the Mac)
JavaScript Debugger
- Examine JavaScript code
- Set breakpoints
- Pause on exceptions
- Pause on events (click)
- Step through code
- Control-Shift-S
(Command-Option-S on the Mac).
Network Monitor
- Inspect all network requests
- images, css/js files, ajax
- Examine request
- Examine response
- Timeline
- Edit and resend
JavaScript Profiler
- What is JavaScript doing?
- Hot functions
- Where to optimize
Useful stuff
- Responsive Design View (Ctrl-Shift-M)
- Developer Toolbar (Shift-F2)
- 3D view
- Paint Flashing Tool
- Colour Picker
- Full page screenshot
- Device Debugging with WebIDE