Chorme devtools

Chrome DevTools

Console API

Before we start..

Console API

Do not useconsole.log

ONLY!

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.time()

console.time( "Array initialize" );

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 !

It’s

Easy !!

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.table()

還有些很好用的…

console.assert(expression, object)

console.dir(object)

console.dirxml(object)

console.trace()

Command Line API

Selecting Elements

$_ : the most recently evaluated expression

$0 - $4 : last five DOM elements

$('#id') : document.querySelector().

$$('img') : document.querySelectorAll()

$x('html/body/p') : Xpath

$_ :

…………………

Demo : google.com

inspect() //display the element

function sum(x, y) { return x + y;}monitor(sum); unmonitor(sum);

monitor

inpsect

Try it !

monitor event

monitor event

monitorEvents(object[,events])

monitorEvents(window, ["resize", "scroll"]);

unmonitorEvents(window);

Element

Tips

Hide element : [H]

Element pseudo states: (:active, :hover, :focus, :visited)

Styles : color palette

Dom Breakpoints

http://ppt.cc/mjm3j

Porperties

Workspace

Tips

Replace Sublime Text

Source Map

Source

Debugging JavaScript

Event Listeners SetInterval SetTimeout XMLHttpRequest Promises RequestAnimationFrame MutationObservers

Asynchronous JS callbacks

Full stack trace

Breakpoints

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

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

Demo 1

Demo 2

Watch Expressions

debugger

console.trace()

Demo 3MutationObserver

Network

Resource Timing API

window.performance.timing

[firebug]

參考資料 : http://ppt.cc/HHeT3

Resource Timing API

window.performance.getEntries()

//return an array of “resource timing objects”

HAR

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

Tips

Resource previews

Sorting and filtering

Websocket frames

Websocket Frames

https://www.websocket.org/

Request Sent / Sending Waiting (TTFB) Content Download / Downloading

Thank you