web inspector and modern javascript€¦ · 6 ecmascript. 6 ecmascript. 6 javascript. 6. 6. 6 maps...

© 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

#WWDC14

Web Inspector and Modern JavaScript

Session 512 Timothy Hatcher WebKit Developer Experience Manager

Media

Web Inspector and Modern JavaScript

Modern JavaScript and Web Inspector

Modern JavaScript

JavaScript

ECMAScript

1.0—June 1997

2.0—June 1998

3.0—December 1999

4.0—Abandoned

5.0 (3.1)—December 2009

ECMAScript 5.1—June 2011

ECMAScript

6ECMAScript

6JavaScript

6Maps

Sets

Weak Maps

Destructuring

For-of Loops

Spread Operator

Promises

Computed PropertiesMath Additions

String Additions

Iterators

Modern JavaScriptLanguage highlights

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptMath Additions

Modern JavaScriptMath Additions

sinhtanh

asinh

log10

log2

acosh

atanh

coshlog1p

expm1

hypottrunc

imul

froundcbrt


Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptMap Object


var simpleMap = {};


var simpleMap = {};simpleMap["foo"] = 42;


var simpleMap = {};simpleMap["foo"] = 42;delete simpleMap["foo"];


var simpleMap = new Map; simpleMap.set("foo", 42); simpleMap.delete("foo");

Modern JavaScriptMap with Object Keys

var nodeMap = new Map; nodeMap.set(node, data); nodeMap.get(node).foo;

Modern JavaScriptMap with Weak References

var nodeMap = new WeakMap; nodeMap.set(node, data); node.remove();


Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptDestructuring Arrays


foo() { return [1, 2] }


foo() { return [1, 2] }

var result = foo();


foo() { return [1, 2] }

var result = foo();var alpha = result[0];


foo() { return [1, 2] }

var result = foo();var alpha = result[0];var beta = results[1];


foo() { return [1, 2] } !

var [alpha, beta] = foo(); !

Modern JavaScriptDestructuring Objects


foo() { return {x: 4, y: 9} }


foo() { return {x: 4, y: 9} }

var result = foo();


foo() { return {x: 4, y: 9} }

var result = foo();var myX = result.x;


foo() { return {x: 4, y: 9} }

var result = foo();var myX = result.x;var y = result.y;


foo() { return {x: 4, y: 9} } !

var {x: myX, y} = foo(); !


Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptSpread Operator for calls

function foo(a, b, c) {} var args = [1, 2, 3]; foo.apply(null, args);

Modern JavaScriptSpread Operator for calls

function foo(a, b, c) {} var args = [1, 2, 3]; foo(...args);

Modern JavaScriptSpread Operator with constructors

var parts = fetchParts(); var d = new Date(...parts);

Modern JavaScriptSpread Operator in array literals

var a = [1, 2, 3]; var z = [5, 6, 7]; var all = [1, 2, 3, 4, 5, 6, 7];

Modern JavaScriptSpread Operator in array literals

var a = [1, 2, 3]; var z = [5, 6, 7]; var all = [...a, 4, ...z];


Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptTraditional loops

var len = items.length; for (var i = 0; i < len; ++i) total += items[i];

Modern JavaScriptTraditional loops

items.forEach(function(item) { total += item; });

Modern JavaScriptFor-of Loop

for (var item of items) total += item;

for (var value of someSet) process(value);

Modern JavaScriptFor-of Loop and Sets

for (var [k, v] of someMap) process(k, v);

Modern JavaScriptFor-of Loop and Maps

for (var [node] of nodeMap) node.remove();

Modern JavaScriptFor-of Loop and WeakMaps


Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptPromises

load(url);


var data = load(url);


load(url, function(a) { load(a.url, process); });


load(url, function(a) { load(a.url, function(b) { load(b.url, process); }); });


load(url).then(function(a) { return load(a.url); }).then(function(b) { return load(b.url); }).then(process);

Modern JavaScriptWaiting for all Promises

var imgs = [load(a), load(b)]; Promise.all(imgs).then(done);

Modern JavaScriptRacing your Promises

var imgs = [load(a), load(b)]; Promise.race(imgs).then(done);


Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScript

Modern JavaScript and Web Inspector

Web Inspector

WebKit

JavaScriptCoreWebKit

Web InspectorNew features

Mac App inspection

JavaScriptCore support

Source Code Timelines

Breakpoint Probes

Accessibility details

Color and Gradient editing

"com.apple.security.get-task-allow"


Mac App inspection



Breakpoint Probes



Web InspectorJavaScript Source URLs

-[JSContext evaluateScript:withSourceURL:] !

JSEvaluateScript(…, sourceURL, …)

Web InspectorJavaScript Context Name

@interface JSContext @property NSString *name; @end !

JSGlobalContextSetName(…)

DemoMac App and JavaScriptCore inspection

Web InspectorMac App and JavaScriptCore inspection

Any web view or JavaScript context

Only apps with “get task allow” entitlement

Name your contexts, pages, and scripts


Mac App inspection



Breakpoint Probes



◉◉

◉◉<>{?

◉◉<>{

<>{ Move Event

Click Event

Timer Added

Timer Fired

Forced Layout


Mac App inspection



Breakpoint Probes



◉ { event.pageXevent.pageYevent.buttonevent.altKey …

DemoSource Code Timelines and Breakpoint Probes


Mac App inspection



Breakpoint Probes



DemoColor and Gradient editing


Mac App inspection



Breakpoint Probes



Summary

Summary

Take advantage of new JavaScript language features

Summary


Web Inspector is now available for Mac apps

Summary



Enjoy debugging your JavaScriptCore contexts

Summary




Make your web apps accessible

Summary




Make your web apps accessible

Be a colorful person

More Information

Evangelism [email protected]

!

Developer Technical support http://developer.apple.com/contact

Apple Developer Forums http://devforums.apple.com

http://devforums.apple.com

Related Sessions

• Improving the Accessibility and Usability of Complex Web Applications

Marina Friday 9:00AM

• Designing Responsive Web Experiences Marina Friday 10:15AM

Labs

• Safari and WebKit Lab Media Lab B Thursday 2:00PM

web inspector and modern javascript€¦ · 6 ecmascript. 6 ecmascript. 6 javascript. 6. 6. 6 maps...

Documents