DevTools
description
Transcript of DevTools
![Page 1: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/1.jpg)
The Future of Web App Development Tools
Ross BoucherCo-Founder, 280 North
![Page 2: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/2.jpg)
![Page 3: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/3.jpg)
Developer Tools
![Page 4: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/4.jpg)
Four Categories•Debugging
•Performance Tuning
•Automated Testing
•Development
![Page 5: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/5.jpg)
1. Debugging
![Page 6: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/6.jpg)
alert()
![Page 7: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/7.jpg)
1998: Netscape JavaScript Debugger
![Page 8: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/8.jpg)
2000: Microsoft Script Debugger
![Page 9: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/9.jpg)
2001: Mozilla Venkman
![Page 10: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/10.jpg)
alert()
![Page 11: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/11.jpg)
I suspect that most JavaScript developers out there are a lot like me... We want to be able to pause our scripts, look at the call stack, and step through them one line at a time, but it's easier to just use "alert debugging" than to fire up a big clunky debugger.
- Joe Hewitt, 2006
![Page 12: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/12.jpg)
2006: Firebug
![Page 13: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/13.jpg)
Firebug Features•JavaScript Debugger
•JavaScript Profiler
•Network Monitor
•DOM Inspector
•Logging System
•Integrated right on the page
![Page 14: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/14.jpg)
2008: WebKit Inspector
![Page 15: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/15.jpg)
2008: Opera Dragonfly
![Page 16: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/16.jpg)
2009: IE 8 Developer Tools
![Page 17: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/17.jpg)
Common Functionality•JavaScript Debugger
•DOM Inspector
•Logging System
•Network Monitor
![Page 18: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/18.jpg)
Common API
![Page 19: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/19.jpg)
![Page 20: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/20.jpg)
What do we need now?
![Page 21: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/21.jpg)
Common API
![Page 22: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/22.jpg)
![Page 23: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/23.jpg)
Scriptability
![Page 24: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/24.jpg)
![Page 25: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/25.jpg)
2.Per
formance Tuning
![Page 26: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/26.jpg)
JavaScript Profiling
![Page 27: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/27.jpg)
![Page 28: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/28.jpg)
function.displayName
![Page 29: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/29.jpg)
![Page 30: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/30.jpg)
![Page 31: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/31.jpg)
Top Down vs. Bottom Up
![Page 32: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/32.jpg)
aFunction
F1
F2
F01
9
1
8
78 7
1
1
![Page 33: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/33.jpg)
aFunction
F1
F2
F01
9
1
8
78 7
1
1
![Page 34: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/34.jpg)
1788
88
1
78 1
8
8
F1
F2
F0
aFunction
aFunction
![Page 35: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/35.jpg)
1788
88
1
78 1
8
8
F1
aFunction
![Page 36: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/36.jpg)
Instrumented vs. Statistical
![Page 37: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/37.jpg)
Memory Analysis
![Page 38: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/38.jpg)
Understand Overall Memory
Usage
![Page 39: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/39.jpg)
Find Leaks
![Page 40: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/40.jpg)
Visualize Garbage Collection
Information
![Page 41: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/41.jpg)
![Page 42: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/42.jpg)
Browser Metrics
![Page 43: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/43.jpg)
How much time is the browser spending...
![Page 44: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/44.jpg)
Painting
Parsing JavaScript
Executing Code
Downloading Files
Processing Events
in Worker Threads
Accessing Databases
Re-flowing
Applying Styles
Parsing HTML
Parsing CSS
![Page 45: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/45.jpg)
3.Automated Testing
![Page 46: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/46.jpg)
JsTestDriver
![Page 47: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/47.jpg)
![Page 48: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/48.jpg)
Test Swarm
![Page 49: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/49.jpg)
![Page 50: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/50.jpg)
![Page 51: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/51.jpg)
AJAX ScopeFrom Microsoft Research
![Page 52: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/52.jpg)
Distributed Profiling and Debugging
![Page 53: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/53.jpg)
http://www-users.itlabs.umn.edu/classes/Fall-2008/csci8101/AjaxScope.pdf
Copyright Emre Kiciman & Benjamin Livshits
![Page 54: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/54.jpg)
4. Development
![Page 55: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/55.jpg)
Network Monitoring
![Page 56: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/56.jpg)
HTTP Client
![Page 57: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/57.jpg)
Charles Proxy
![Page 58: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/58.jpg)
Code Analysis
![Page 59: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/59.jpg)
JSure, JavaScript Lint, JSLint
![Page 60: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/60.jpg)
Objective-J Runtime Type
Checking
![Page 61: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/61.jpg)
Web Based IDEs
![Page 62: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/62.jpg)
![Page 63: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/63.jpg)
![Page 64: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/64.jpg)
Wrap Up
![Page 65: DevTools](https://reader033.fdocuments.us/reader033/viewer/2022061116/546568f6af7959c04e8b4e03/html5/thumbnails/65.jpg)