-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtalk.html
153 lines (139 loc) · 5.25 KB
/
talk.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<title>Chrome Debug Tips</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="slide.css" />
</head>
<body>
<div class="container">
<h1><img class="logo" src="favicon.png" /> Hi there, I'm matt (<a href="http://github.com/heidmotron">@heidmotron)</h1>
<div>
<div><a href="#cmd-alt-j"><pre>cmd alt j</pre></a></div>
<div><a href="#cmd-+"><pre>cmd +</pre></a></div>
<div><a href="#$0"><pre>$0</pre></a></div>
<div><a href="#cmd-h"><pre>h (elements panel)</pre></a></div>
<div><a href="#-$x"><pre>$x</pre></a></div>
<div><a href="#{}"><pre>{ }</pre></a></div>
<div><a href="#purple"><pre>Purple Uncaught Exceptions Button</pre></a></div>
<div><a href="#bp-cond"><pre>Conditional Breakpoints</pre></a></div>
<div><a href="#bp-dom"><pre>DOM Breakpoints</pre></a></div>
<div><a href="#bp-xhr"><pre>XHR Breakpoints</pre></a></div>
<div><a href="#bp-event"><pre>Event Listener Breakpoints</pre></a></div>
<div><a href="#credits"><pre>Credits</pre></a></div>
</div>
<div class="big-bumper"></div>
<div id="cmd-alt-j" class="slide">
<h1>cmd alt j</h1>
<div class="panel panel-default">
<div class="panel-body lead">
Opens the developer console
</div>
</div>
<a class="next" href="#cmd-+">Next</a>
</div>
<div id="cmd-+" class="slide">
<h1>cmd +</h1>
<div class="panel panel-default">
<div class="panel-body lead">
Increases the font
</div>
</div>
<a class="next" href="#$0">Next</a>
</div>
<div id="$0" class="slide">
<h1>$0</h1>
<div class="panel panel-default">
<div class="panel-body lead">
$0 represents the currently selected Elements panel
</div>
</div>
<a class="next" href="#cmd-h">Next</a>
</div>
<div id="cmd-h" class="slide">
<h1>h (elements panel)</h1>
<div class="panel panel-default">
<div class="panel-body lead">
hides the currently selected element
</div>
</div>
<a class="next" href="#-$x">Next</a>
</div>
<div id="-$x" class="slide">
<h1>$x</h1>
<div class="panel panel-default">
<div class="panel-body lead">
$x is xpath shortcut function for the console panel
</div>
</div>
<a class="next" href="#{}">Next</a>
</div>
<div id="{}" class="slide">
<h1>{ }</h1>
<div class="panel panel-default">
<div class="panel-body lead">
<img src="curly.png"/> Pretty prints minified code
</div>
</div>
<a class="next" href="#purple">Next</a>
</div>
<div id="purple" class="slide">
<h1>Purple Uncaught Exceptions</h1>
<div class="panel panel-default">
<div class="panel-body lead">
<img src="purple.png"/> Breaks on uncaught exception <button id="error">error</button>
</div>
</div>
<a class="next" href="#bp-cond">Next</a>
</div>
<div id="bp-cond" class="slide">
<h1>Conditional Breakpoints</h1>
<div class="panel panel-default">
<div class="panel-body lead">
Breaks when a condition is met on manual breakpoints <button id="cond-button">Press me</button>
</div>
</div>
<a class="next" href="#bp-dom">Next</a>
</div>
<div id="bp-dom" class="slide">
<h1>Dom Breakpoints</h1>
<div class="panel panel-default">
<div class="panel-body lead">
Breaks on <a id="node-rem">Node Removal</a>, <a id="sub-tree">Subtree</a> & <a id="attr-mod">Attribute Modification</a>
</div>
</div>
<a class="next" href="#bp-xhr">Next</a>
</div>
<div id="bp-xhr" class="slide">
<h1>XHR Breakpoints</h1>
<div class="panel panel-default">
<div class="panel-body lead">
Breaks when XHR matches url set
</div>
</div>
<a class="next" href="#bp-event">Next</a>
</div>
<div id="bp-event" class="slide">
<h1>Event Listener Breakpoints</h1>
<div class="panel panel-default">
<div class="panel-body lead">
Breaks when event listener of a selected type is <a id="mouseover">called</a>
</div>
</div>
<a class="next" href="#credits">Next</a>
</div>
<div id="credits" class="slide">
<h1>Credits</h1>
<div class="panel panel-default">
<div class="panel-body lead">
<p>The Breakpoint on <a href="http://www.youtube.com/playlist?list=PLNYkxOF6rcIBQ8j3J_PyM8JLAGKqZRByw">YouTube</a></p>
<p><a href="https://developers.google.com/chrome-developer-tools/docs/shortcuts">Dev Shortcuts</a></p>
</div>
</div>
</div>
<div class="bumper"></div>
</div>
<script src="underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="slide.js"></script>
</body>
</html>