Chrome DevTools

1. Chrome DevTools

2. Console API

3. Before we start..

4. Console API
Do not use
console.log
ONLY!

5. console.time()
console.time("Array initialize");
var array= new Array(100000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");

6. console.time()
console.time(
"Array initialize" );

7. console.timeStamp()
MarkingtheTimeline
function AddResult(name, result) {
console.timeStamp("Adding result");
//do something….
}

9. console.count()
function login(user) {
console.count("Login called for user " + user); }
users = ['Irish', 'Bakaus', 'Kinlan' ];
users.forEach(function(element, index, array) {
login(element);
});
login(users[0]);

10. console.group()
var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

12. function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);
console.table(family, ["firstName", "lastName", "age"]);

13. console.table()

14. 還有些很好用的…
console.assert(expression, object)
console.dir(object)
console.dirxml(object)
console.trace()

15. Command Line API

16. Selecting Elements
$_ : the most recently evaluated expression
$0 - $4 : last five DOM elements
$('#id') : document.querySelector().
$$('img') : document.querySelectorAll()
$x('html/body/p') : Xpath

17. $_ :
…………………
Demo : google.com

18. inspect() //display the element
function sum(x, y) {
return x + y;
}
monitor(sum);
unmonitor(sum);
monitor
inpsect

19. monitor event

20. monitor event
monitorEvents(object[,events])
monitorEvents(window, ["resize", "scroll"]);
unmonitorEvents(window);

21. Element

22. Tips
 Hide element : [H]
 Element pseudo states:
(:active, :hover, :focus, :visited)
 Styles : color palette

23. Dom Breakpoints
http://ppt.cc/mjm3j

24. Porperties

25. Workspace

27. Tips
 Replace Sublime Text
 Source Map

28. Source

30. Debugging JavaScript

31.  Event Listeners
 SetInterval
 SetTimeout
 XMLHttpRequest
 Promises
 RequestAnimationFrame
 MutationObservers

32. Asynchronous JS callbacks
Fullstacktrace

33. Breakpoints
A breakpoint is an intentional
stopping or pausing place in a script

34. Breakpoints http://todomvc.com/examples/angularjs/

35. Demo 1

37. Demo 2
 Watch Expressions
 debugger
 console.trace()

38. Demo 3
MutationObserver

39. Network

40. Resource Timing API
window.performance.timing
[firebug]
參考資料 : http://ppt.cc/HHeT3

41. Resource Timing API
window.performance.getEntries()
//return an array of “resource timing objects”

43. HAR
http://ericduran.github.io/chromeHAR/

44. Tips
 Resource previews
 Sorting and filtering
 Websocket frames

45. Websocket Frames
https://www.websocket.org/

47.  Request Sent / Sending
 Waiting (TTFB)
 Content Download / Downloading

48. Thank you