Using Safari to Deliver and Debug a Responsive Web Design

Transcription

1 Media #WWDC15 Using Safari to Deliver and Debug a Responsive Web Design Session 505 Jono Wells Safari and WebKit Engineer 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 WebKit Safari

3

4

5

6

7 Web Inspector

8 Web Inspector + Responsive Design Mode

9 Web Inspector

10

11

12

13 Great Performance

14 60fps

15 16.67ms

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38 Do Without Thinking

39

40

41

42

43

44 var name = "Trevor"; var age = 28; var obj = {};

45 var String name = "Trevor"; var Integer age = 28; var Object obj = {};

46 function add(value1, value2) { var result = value1 + value2; return result; } var v1 = 2.3, v2 = "2.7"; add(v1, v2); // => "2.32.7"

47 function add(value1, value2) { var result = value1 + value2; return result; } var v1 = 2.3, v2 = "2.7"; add(v1, v2); // => "2.32.7"

48 function add( Double value1, String value2) String { var String result = value1 + value2; return result; } var v1 = 2.3, v2 = "2.7"; add(v1, v2); // => "2.32.7"

49 function add( Double value1, String value2) String { var String result = value1 + value2; return result; } var v1 = 2.3, v2 = "2.7"; add(v1, v2); // => "2.32.7"

50

51

52

53

54

55

56

57 function Person() { } function DeveloperPerson() { Person.call(this); } DeveloperPerson.prototype = Object.create(Person.prototype); DeveloperPerson.prototype.constructor = DeveloperPerson; var employee = new DeveloperPerson();

58 function Person() { } function DeveloperPerson() { Person.call(this); } DeveloperPerson.prototype = Object.create(Person.prototype); DeveloperPerson.prototype.constructor = DeveloperPerson; var employee = new DeveloperPerson();

59 function Person() { } function DeveloperPerson() { Person.call(this); } DeveloperPerson.prototype = Object.create(Person.prototype); DeveloperPerson.prototype.constructor = DeveloperPerson; var DeveloperPerson employee = new DeveloperPerson();

60 function Person() { } function DeveloperPerson() { Person.call(this); } DeveloperPerson.prototype = Object.create(Person.prototype); DeveloperPerson.prototype.constructor = DeveloperPerson; var DeveloperPerson employee = new DeveloperPerson();

61 class Person { } class DeveloperPerson extends Person { } class ManagerPerson extends Person { } var DeveloperPerson employee = new DeveloperPerson();

62 class Person { } class DeveloperPerson extends Person { } class ManagerPerson extends Person { } var DeveloperPerson employee = new DeveloperPerson();

63 function register(person) Object Person DeveloperPerson ManagerPerson

64 function register(person) Object Person DeveloperPerson ManagerPerson

65 function register( DeveloperPerson attendee) Object Person DeveloperPerson ManagerPerson register(new DeveloperPerson());

66 function register( DeveloperPerson attendee) Object Person DeveloperPerson ManagerPerson register(new DeveloperPerson());

67 function register( ManagerPerson attendee) Object Person DeveloperPerson ManagerPerson register(new ManagerPerson());

68 function register( ManagerPerson attendee) Object Person DeveloperPerson ManagerPerson register(new ManagerPerson());

69 function register( Person attendee) Object Person DeveloperPerson ManagerPerson register(new DeveloperPerson()); register(new ManagerPerson());

70 function register( Person attendee) Object Person DeveloperPerson ManagerPerson register(new DeveloperPerson()); register(new ManagerPerson());

71 function register( Object attendee) Object Person DeveloperPerson ManagerPerson register(new DeveloperPerson()); register(new ManagerPerson()); register(new Extraterrestrial());

72 function register( Object attendee) Object Person DeveloperPerson ManagerPerson register(new DeveloperPerson()); register(new ManagerPerson()); register(new Extraterrestrial());

73 Object String Array Function Null Undefined Boolean Integer Number Double

74 (many) Undefined Function Boolean Integer Object Number Double String Null Array

75 Double Null

76 Double Null

77 Double? Null

78

79

80

81

82

83

84 Better Console

85

86

87

88

89 $0 Is Still the Currently Selected DOM Element

90

91

92

93

94

95

96

97

98

99 Great for Native API Exploration!

100

101

102

103 Number RegExp Boolean Symbol String Element Object Function Null Custom Getter

104 Demo Web Inspector Andy Estes Safari and WebKit Engineer

105 Make Your Site Faster

106 Make Your Site Faster Turn on paint flashing on Run Rendering Frames Timeline Try in ios

107 Make Your Code Better

108 Make Your Code Better Use the type profiler on your JavaScript Explore your JS objects in the console Explore the DOM APIs (window, HTMLElement, etc.)

109 Web Inspector

110 Web Inspector + Responsive Design Mode

111 Responsive Design Mode

112 Responsive Design

113 Responsive Design

114 Responsive Design

115 Responsive Design

116 Responsive Design

117 Responsive Design

118 Responsive Design

119 Responsive Design

120 Responsive Design

121 Responsive Design

122 srcset

123

124

125

126

127

128

129

130 Demo Responsive Design Mode Andy Estes Safari and WebKit Engineer

131 Responsive Design Mode Focus is on layout and resolution Scalable page preview Screen size presets ios Multitasking screen size presets Custom sizes Works alongside Web Inspector New in Safari 9

132 Responsive Design Mode

133 Web Inspector + Responsive Design Mode

134 When You Leave Here

135 When You Leave Here Get the developer release of OS X El Capitan

136 When You Leave Here Get the developer release of OS X El Capitan Turn on the develop menu

137 When You Leave Here Get the developer release of OS X El Capitan Turn on the develop menu Customize Web Inspector tabs

138 When You Leave Here Get the developer release of OS X El Capitan Turn on the develop menu Customize Web Inspector tabs Use paint flashing and Rendering Frames Timeline

139 When You Leave Here Get the developer release of OS X El Capitan Turn on the develop menu Customize Web Inspector tabs Use paint flashing and Rendering Frames Timeline Turn on the Type Information Profiler

140 When You Leave Here Get the developer release of OS X El Capitan Turn on the develop menu Customize Web Inspector tabs Use paint flashing and Rendering Frames Timeline Turn on the Type Information Profiler Play in the console

141 When You Leave Here Get the developer release of OS X El Capitan Turn on the develop menu Customize Web Inspector tabs Use paint flashing and Rendering Frames Timeline Turn on the Type Information Profiler Play in the console Try Responsive Design Mode

142 Make Your Content Shine

143 More Information Technical Support Resources for Safari Developers Safari Developer Library General Inquiries Jon Davis, Web Technologies Evangelist

144 Related Labs Safari and WebKit Lab Safari and WebKit Lab Graphics, Games, and Media Lab A Graphics, Games, and Media Lab A Wednesday 10:00AM Friday 12:00PM

145