Finding and debugging memory leaks in JavaScript with Chrome DevTools
Chorme devtools
Transcript of Chorme devtools
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");
Try it !
console.timeStamp()
Marking the Timelinefunction AddResult(name, result) { console.timeStamp("Adding result"); //do something….}
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]);
Try it !
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();
Try it !
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"]);
還有些很好用的…
console.assert(expression, object)
console.dir(object)
console.dirxml(object)
console.trace()
Selecting Elements
$_ : the most recently evaluated expression
$0 - $4 : last five DOM elements
$('#id') : document.querySelector().
$$('img') : document.querySelectorAll()
$x('html/body/p') : Xpath
inspect() //display the element
function sum(x, y) { return x + y;}monitor(sum); unmonitor(sum);
monitor
inpsect
Try it !
monitor event
monitorEvents(object[,events])
monitorEvents(window, ["resize", "scroll"]);
unmonitorEvents(window);
Tips
Hide element : [H]
Element pseudo states: (:active, :hover, :focus, :visited)
Styles : color palette
Event Listeners SetInterval SetTimeout XMLHttpRequest Promises RequestAnimationFrame MutationObservers
Resource Timing API
window.performance.timing
[firebug]
參考資料 : http://ppt.cc/HHeT3