-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
843 lines (608 loc) · 29.2 KB
/
index.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Better Web Debugging: a Developer Tools Workshop</title>
<meta name="description" content="Slides and class notes for GDI Burlington’s Developer Tools 2.5 hour workshop. Materials by Rachael Arnold.">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/gdidefault.css" id="theme">
<link rel="stylesheet" href="css/class.css">
<!-- For syntax highlighting -->
<!-- light editor --><link rel="stylesheet" href="lib/css/light.css">
<!-- dark editor <link rel="stylesheet" href="lib/css/dark.css">-->
<!-- <link rel="stylesheet" href="lib/css/zenburn.css"> -->
<link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<!-- ---------------------------------------------------
PRESENTING TIPS:
Up, Down, Left, Right: Navigation
f: Full-screen
s: Show slide notes
o: Toggle overview
. or b: Turn screen black
Esc: Escape from full-screen, or toggle overview
----------------------------------------------------- -->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Class Intro -->
<section>
<h1>Better Web Debugging</h1>
<h3>a Developer Tools Workshop</h3>
<!-- CUSTOMIZE ME! -->
<p><br>Follow along in Google Chrome at
<br><a href="gdibtv.github.io/gdi-developer-tools/">gdibtv.github.io/gdi-developer-tools</a></p>
<aside class="notes" data-markdown>
Before starting, open Network tab and reload so we track it all and don't have to refresh later to demo. Then open slide notes!
</aside>
</section>
<section>
<h3>Welcome!</h3>
<div class="left-align">
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
<p class="green">Some "rules"</p>
<ul>
<li>We are here for you!</li>
<li>Every question is important</li>
<li>Help each other</li>
<li>Have fun</li>
</ul>
</div>
</section>
<section class="hide-pdf">
<h3>Welcome!</h3>
<div class="left-align">
<p class="green">Tell us about yourself.</p>
<ul>
<li>Who are you?</li>
<li>What do you hope to get out of the workshop?</li>
<li>What is your go-to debugging comment?</li>
</ul>
</div>
</section>
<!-- History -->
<section>
<h3>Debugging, then</h3>
<p>Debugging client-side code was hard for a long time.</p>
<p class="fragment">CSS had a lot of this:</p>
<pre class="fragment"><code class="css"> div.classname {
outline: 1px solid green;
}
body {
background: red !important;
}
</code></pre>
<p class="fragment">and JS had a lot of this:</p>
<p class="fragment" id="alertMe"><small>( a.k.a. <code>alert();</code> all the things! )</small></p>
<aside class="notes" data-markdown>
Beware, an alert will pop up for the final fragment.
</aside>
</section>
<section>
<h3>Debugging, then</h3>
<p>So basically:</p>
<p>Inexact</p>
<p>Time-consuming</p>
<p><strong>Totally not fun</strong></p>
</section>
<section>
<h3>Debugging, now</h3>
<p>Web debugging got infinitely better in early 2006.<br><br></p>
<p><a href="https://www.webkit.org/blog/41/introducing-the-web-inspector/" target="_blank">Webkit Introduced the “Web Inspector”</a></p>
<p>and</p>
<p><a href="http://joehewitt.com/2006/03/15/firebug-a-love-story" target="_blank">Joe Hewitt introduced Firebug for Firefox</a></p>
<p><br><br><small>IE didn’t have equivalent debugging tools until IE8 was released in 2009.</small></p>
<aside class="notes" data-markdown>
Chrome wasn't released until 2008.
Most developers used Firebug, since at the time, Safari was just that browser that people use on those weird Mac computers.
As of this authoring (2015), all major browsers have access to feature-parity, but Chrome is the only one that is platform agnostic (compare IE/Safari) and doesn't rely on third-party plugins (Firebug/Firefox)
</aside>
</section>
<section>
<h3>Debugging, now</h3>
<img src="img/devtools-overview-screencap.png" alt="Screencap of this presentation in dev tools.">
</section>
<section>
<h3>Debugging, now</h3>
<div class="left-align">
<p class="green">Chrome Developer Tools is…</p>
<ul>
<li>a <abbr title="Document Object Model">DOM</abbr> inspector</li>
<li>a <abbr title="Document Object Model">DOM</abbr> manipulator</li>
<li>an emulator</li>
<li>a Javascript <abbr title="Read-Evaluate-Print-Loop">REPL</abbr></li>
<li>a debugger</li>
<li>a network profiler</li>
<li>an <abbr title="Integrated Development Environment">IDE</abbr>?</li>
</ul>
<p>… and more!</p>
</div>
</section>
<!-- Settings -->
<section>
<h3>Enough History, Dive In</h3>
<p>Open Developer Tools</p>
<img src="img/open-main-menu.png" alt="Hamburger menu > More Tools > Developer Tools | option/alt + command/control + i">
<p><small>Mac: option+command+i <br>Win: alt+control+i</small></p>
</section>
<section>
<h3>Overview</h3>
<img src="img/devtools-overview-screencap-2.png" alt="Screencap of overall dev tools panel" width="70%">
</section>
<section>
<h3>Workflow Customization</h3>
<p>Placement</p>
<img src="img/dock-bottom-screencap.png" alt="Screencap of panel docked to bottom of window" width="30%">
<img src="img/dock-right-screencap.png" alt="Screencap of panel docked to right of window" width="30%">
<img src="img/popout-screencap.png" alt="Screencap of panel in own window" width="30%">
<aside class="notes" data-markdown>
Pro of right-alignment: the computed styles tab is usually visible when in Element view—very handy for CSS workflows, less important when you're focusing on JS
</aside>
</section>
<section>
<h3>Workflow Customization</h3>
<p>Toggle Console</p>
<img src="img/console-drawer.png" alt="Screencap of console in drawer" width="40%">
<img src="img/console-hidden.png" alt="Screencap of console hidden" width="40%">
<aside class="notes" data-markdown>
Console can also be on its own tab, which we'll cover later.
</aside>
</section>
<section>
<h3>Workflow Customization</h3>
<p>Settings</p>
<img src="img/settings-pane.png" alt="Screencap of settings" width="50%">
<aside class="notes" data-markdown>
No need to cover all the settings—people can play around on their own later.
Mention cache disabling, JS disabling
</aside>
</section>
<!-- DOM Inspection and Manipulation -->
<section>
<h2>Working with the <abbr title="Document Object Model">DOM</abbr></h2>
</section>
<section>
<h3>The <strong class="yellow">Elements</strong> Tab</h3>
<p>What is the DOM?</p>
<p>Think of it as your HTML…</p>
<p class="fragment">…+ anything JS adds.</p>
<div class="fragment push">
<p>The <strong class="yellow">Elements</strong> Tab is a visual representation of how the browser sees the DOM.</p>
<p>You can explore the nested levels by clicking the arrows next to elements.</p>
</div>
</section>
<section>
<h3>Inspecting Elements</h3>
<p>You can inspect any element on the page to learn more about it.</p>
<div class="columns">
<div class="half">
<img src="img/elements-context-menu.png" alt="Right click > Inspect Element"/>
</div>
<div class="half">
<img src="img/elements-inspector-button.png" alt="Turn on Inspector Mode, then select element"/>
</div>
</div>
</section>
<section>
<h3>Manipulating the DOM</h3>
<p>Use the context menu (right-click) to:</p>
<ul>
<li>Delete elements</li>
<li>Change element attributes</li>
<li>Edit as HTML</li>
</ul>
<p class="push">Drag and drop to reorder elements</p>
</section>
<section>
<section>
<h3>CSS Debugging</h3>
<img src="img/inspecting-css.png" alt="Screencap of CSS pane" class="right"/>
<p>When an element is selected, all of the CSS rules that are applied show in the <strong>Styles</strong> section, ordered by specificity.</p>
<p class="push">You can see what is applied, what is overridden, and what is invalid.</p>
<aside class="notes" data-markdown>
Explain that at different screen breakpoints, box model and computed sections may be in a separate tab.
Press down for slides on specificity, if time allows and audience needs that level of coverage
</aside>
</section>
<section>
<h3>CSS Specificity</h3>
<p><em class="yellow">Specificity</em> refers to how CSS rules are applied based on ordering, inheritance, and the cascade (the 'C' in CSS).</p>
<h4 class="push">The Basics: Where Do The Styles Live?</h4>
<ul>
<li>User Agent Stylesheet (least important)</li>
<li>External Stylesheet</li>
<li>Inline Styles / modified by JS</li>
<li>Anything with <code>!important</code> (most important)</li>
</ul>
</section>
<section>
<h3>CSS Specificity</h3>
<p>Order matters, so do selectors. Code as simply as possible. Complex selectors modify specificity in complex ways!</p>
<h4 class="push">The Basics: What's the Selector?</h4>
<ul>
<li>Tag (least important)
<pre><code class="css"> div { color: lime; }
</code></pre></li>
<li>Class, Attribute
<pre><code class="css"> .orange { color: orange; }
[href^="http"] { color: purple; }
</code></pre></li>
<li>ID
<pre><code class="css"> #specialsnowflake { color: gray; }
</code></pre></li>
<li>Inline style attribute (most important)
<pre><code class="css"> style="color: black;"
</code></pre></li>
</ul>
</section>
<section>
<h3>CSS Specificity</h3>
<p>Further reading:</p>
<p>Beginners: <a href="https://css-tricks.com/specifics-on-css-specificity/" rel="external" target="_blank">Specifics on CSS Specificity @ CSS-Tricks</a></p>
<p>Advanced: <a href="https://css-tricks.com/a-specificity-battle/" rel="external" target="_blank">A Specificity Battle @ CSS-Tricks</a></p>
</section>
</section>
<section>
<h3>CSS Prototyping</h3>
<img src="img/inspecting-manipulating.png" alt="Manipulating CSS attributes" class="right"/>
<p>You can manipulate CSS by changing attributes, adding them, using a color picker, and more!</p>
<p class="push">Remember, these changes aren't saved, but it's great for dialing in styles before you put them in your code.</p>
</section>
<section>
<h3>CSS Prototyping</h3>
<img src="img/prototyping-add-style.png" alt="Adding CSS style rules" style="max-width: 50%;" class="right"/>
<p>You can add new selectors by clicking the plus icon, or inline styles in the <code>element.style</code> section.</p>
<hr style="clear:both;"/>
<img src="img/prototyping-force-state.png" alt="Force CSS state" style="max-width: 50%;" class="right"/>
<p>You can also force element states to easily modify the styles that are applied there by clicking the pin icon.</p>
<p><a href="#" title="this link doesn't do anything">(think link styling)</a></p>
</section>
<section>
<h3>Animations</h3>
<img src="img/animations-pane.png" alt="Animations pane" style="max-width: 50%;" class="right"/>
<p>The Animations section gives you tools to debug CSS animations. Open it by clicking the stacked diamonds icon.</p>
<div class="animate-me"></div>
<aside class="notes" data-markdown>
Demo speed, change easing function and show curve in graph
</aside>
</section>
<!-- Device Emulating and Breakpoints -->
<section>
<h3>Device Mode</h3>
<p>Set screen size, pixel ratio, throttle network, and more…</p>
<img src="img/device-mode.png" alt="Screencap of emulation" >
<aside class="notes" data-markdown>
Emulation is inexact. You're spoofing sizes, UA to some degree, but it doesn't take the place of testing on a specific device for interaction, certain CSS properties, etc.
</aside>
</section>
<section>
<h3>Responsive Breakpoints</h3>
<p>See how CSS applies with different media queries and quickly jump to those different sizes.</p>
<img src="img/gdi-mobile.png" alt="Screencap of emulation mobile" >
<img src="img/gdi-tablet.png" alt="Screencap of emulation tablet" >
</section>
<section>
<section>
<p style="margin-top: 20%">That’s a lot so far…</p>
<h2>Take A 5-minute Break</h2>
<p>Let it all sink in</p>
<aside class="notes" data-markdown>
Think they're doing okay? Pull up the let's develop it section instead.
</aside>
</section>
<section>
<h2>Let's Develop It!</h2>
<a href="http://girldevelopit.com" target="_blank"><img src="img/gdi-home.png" alt="girldevelopit.com"></a>
<ul>
<li>Reorder the nav</li>
<li>Figure out the size of the 'Fork me on GitHub' image</li>
<li>Change the nav hover states</li>
</ul>
</section>
</section>
<!-- JavaScript Debugging -->
<section>
<h2>Basic JavaScript Debugging</h2>
</section>
<section>
<h3>The <strong class="yellow">Console</strong> (Tab)</h3>
<p>The Console allows you to interact with your page and Dev Tools through JavaScript.</p>
<p>At its most basic, it's a <abbr title="Read-Evaluate-Print-Loop">REPL</abbr>—you can execute basic JS commands in it.</p>
<img src="img/console-repl.png" alt="Console as REPL">
</section>
<section data-state="triggerConsoleLog">
<h3>The Console API</h3>
<p>There is also a Console API that makes debugging much more streamlined than a bunch of <code>alert()</code> messages.</p>
<pre><code class="js"> console.log('A debugging message to show');
console.warn('A fancier message!');
</code></pre>
<p>You can use filters to sort through the different types of messages in the console.</p>
<img src="img/console-filter.png" alt="Filtering the console">
<aside class="notes" data-markdown>
There's some JS attached to this slide. It'll console.warn about the notes. And throw a fake error.
Act shocked. "You're getting a view of my secret notes for this slide! Oh no!"
We can filter the various console message types.
Show the JavaScript that handles all of this.
</aside>
</section>
<section>
<h3>The Console API</h3>
<p>The Console will also show messages from the browser, network issues, and actual errors in your JavaScript.</p>
<p>There are many ways to use the Console API, and there’s much more to learn.</p>
<p><a href="https://developer.chrome.com/devtools/docs/console" target="_blank">Using the Console @ Google Developer DevTools docs</a> </p>
<p class="push"><em>Caveat Developer</em>: it's a best practice to remove any Console API calls before releasing code, because it will break your JS in browsers that don't support the Console API!</p>
<img src="img/this-image-intentionally-left-blank.png" alt="Intentional 404" style="display:none;"/>
</section>
<section>
<h3>The <strong class="yellow">Sources</strong> Tab</h3>
<p>Our JavaScript errors, warnings, and logs link to the exact code that triggered them in the <strong class="yellow">Sources</strong> Tab*</p>
<img src="img/sources-error.png" alt="Source Error screenshot"/>
<p class="push"><small>* Minified JS makes it difficult to debug, so use unminified code when testing, but switch to minified for production</small></p>
</section>
<section data-state="triggerDebugger">
<h3><code>debugger;</code></h3>
<p>Ever wish you could just make your JS stop at a certain point so you can study your variables?</p>
<p><code>debugger;</code> triggers a special state so that you can do that.</p>
<img src="img/debugger.png" alt="Debugger screenshot"/>
<p>Press the blue arrow at the top of the page to continue JS execution, or the arrow over a dot to jump to the next line of your script.</p>
</section>
<section>
<h3>JS Breakpoints</h3>
<img src="img/js-breakpoint.png" alt="JS breakpoint screenshot" class="right"/>
<p>You can set <strong>breakpoints</strong> in the Sources Tab to stop your JS when it gets to a certain point.</p>
<button id="js-breakpoint-button" class="button-large" type="button">Click Me!</button>
<aside class="notes" data-markdown>
There will be more time for breakpoints when you demo performance, if you want to step through the tricky slowFunction()
</aside>
</section>
<section>
<h3>DOM Breakpoints</h3>
<img src="img/dom-breakpoint.png" alt="DOM breakpoint screenshot" class="right"/>
<p>It may be important to know when your DOM is changed by JS. You can set <strong>
DOM breakpoints</strong> too.</p>
<button id="dom-breakpoint-button" class="button-large" type="button">Click Me!</button>
</section>
<section>
<h3>The <strong class="yellow">JavaScript Profile</strong> Tab</h3>
<p>The <strong class="yellow">JavaScript Profile</strong> Tab allows you to see the CPU usage of your JavaScript. This lets you check for poor performance.</p>
<button id="slow-function-button" class="button-large" type="button">Slow Function</button>
<button id="fast-function-button" class="button-large" type="button">Fast Function</button>
<img src="img/profile-functions.png" alt="Profile screenshot"/>
</section>
<section>
<h3>The <strong class="yellow">Performance</strong> Tab</h3>
<p>The <strong class="yellow">Performance</strong> Tab allows you to see a lot more information about your page’s performance.</p>
<p>Check out the timeline from our <code>slowFunction()</code>.</p>
<img src="img/timeline.png" alt="Timeline screenshot"/>
<p class="push"><small><em>Warning:</em> Timelines are resource hogs! Stick to recording a few seconds at a time.</small></p>
<aside class="notes" data-markdown>
Talk about how our example is very script-heavy, but low on animations. Other things might have a lot more rendering or painting time.
Animation examples?
[http://codepen.io/juliangarnier/pen/idhuG](http://codepen.io/juliangarnier/pen/idhuG)
[http://mrdoob.github.io/three.js/examples/css3d_periodictable.html](http://mrdoob.github.io/three.js/examples/css3d_periodictable.html)
</aside>
</section>
<section>
<p style="margin-top: 20%">Is your brain full yet?</p>
<h2>Take Another 5-minute Break</h2>
<p>Let it all sink in</p>
</section>
<!-- Network -->
<section>
<h2>Assets and Connections</h2>
</section>
<section>
<h3>The <strong class="yellow">Network</strong> Tab</h3>
<p>Web pages are rarely made from a single HTML file. The <strong class="yellow">Network</strong> Tab shows us all of the different <em>requests</em> our page makes.</p>
<img src="img/network-panel.png" alt="Network Panel screenshot"/>
</section>
<section>
<h3>Checking Out Requests</h3>
<p>Each request in the Network tab shows important information, including:</p>
<ul>
<li>Status Code</li>
<li>Request Method</li>
<li>Response</li>
<li>Headers</li>
</ul>
<p class="push">Learn more about what all those mean at <br><a href="http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177" target="_blank">HTTP Protocol @ Tutsplus</a></p>
<aside class="notes" data-markdown>
Talk about checking for 404s
Advanced: make sure you're making the correct call type (post v get)
Good chance for GA tracking check: [http://girldevelopit.com](girldevelopit.com) filter to utma for GA
show API call to meetup for upcoming events? [https://www.girldevelopit.com/chapters/burlington](https://www.girldevelopit.com/chapters/burlington)
</aside>
</section>
<section>
<h3>Network Performance Checking</h3>
<p>You can use the timeline on the Network tab to learn about performance of your page:</p>
<ul>
<li>Bottlenecks: is an asset causing loading to hang?</li>
<li>Are you trying to access things that don't exist?</li>
<li>Do you have a huge image that takes forever to download?</li>
<li>What's the experience like for slow connections?</li>
</ul>
</section>
<section>
<h3>The <strong class="yellow">Application</strong> Tab</h3>
<p>The <strong class="yellow">Application</strong> Tab shows us additional information and data our page has access to, like cookies, local storage, and session storage.</p>
<p>It also shows all the files comprising your page, and updates as additional requests are made (e.g. lazy loaded images).</p>
<img src="img/resource-tab.png" alt="Resource Panel screenshot"/>
<aside class="notes" data-markdown>
sessionStorage.setItem('mySessionItem','Some info I want to store in the session');
</aside>
</section>
<section>
<h3>The <strong class="yellow">Security</strong> Tab</h3>
<p>The <strong class="yellow">Security</strong> Tab shows us information about the SSL Encryption, and security certificates for the various domains the page requests resources from.</p>
<img src="img/security-panel.png" alt="Security Panel screenshot"/>
<aside class="notes" data-markdown>
[https://www.google.com/](https://www.google.com/) (good security, bad audit)
[https://css-tricks.com/](https://css-tricks.com/) (mixed security, bad audit)
</aside>
</section>
<section>
<h3>The <strong class="yellow">Audits</strong> Tab</h3>
<p>The <strong class="yellow">Audits</strong> Tab shows us information about overall performance of the page, and how we might be able to speed up loading times.</p>
<img src="img/audits-panel.png" alt="Audits Panel screenshot"/>
<aside class="notes" data-markdown>
Everything doesn't have to be green, as you can see! But it gives you things to think about.
</aside>
</section>
<!-- Resources -->
<section>
<h2>Resources</h2>
<ul>
<li><a href="https://developers.google.com/web/tools/chrome-devtools/" target="_blank">Google Developers DevTools Docs</a></li>
<li><a href="https://developer.chrome.com/devtools/index" target="_blank">Deprecated DevTools Docs</a> — Clearer explanations of the basics</li>
<li><a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIBQ8j3J_PyM8JLAGKqZRByw" target="_blank">The Breakpoint Video Series</a></li>
<li><a href="http://discover-devtools.codeschool.com/" target="_blank">CodeSchool Explore and Master Chrome DevTools</a></li>
<li><a href="https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/" target="_blank">JavaScript Profiling @ Smashing Magazine</a></li>
</ul>
</section>
<!-- The End -->
<section>
<h2 style="margin-top: 20%">Questions?</h2>
<!-- CUSTOMIZE ME! -->
<h4 style="margin-top: 20%">Stay In Touch</h4>
<p><a href="http://raearnold.com">Rachael Arnold</a></p>
<p><small><a href="https://twitter.com/raevenfea">@raevenfea</a></small></p>
<aside class="notes" data-markdown>
Still have some time?
Show more complex console API stuff [https://developer.chrome.com/devtools/docs/console](https://developer.chrome.com/devtools/docs/console)
Demo workspaces?
Mention gray hat stuff?
Like, you can change input type of a password to text and it'll show the saved password.
You can kill overlays and modal windows to access content below
You can keep Pinterest from blocking pins
</aside>
</section>
</div>
<footer>
<div class="copyright">
<!-- CUSTOMIZE ME! -->
Better Web Debugging: a Developer Tools Workshop -- GDI Burlington --
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
<script>
(function(){
if (!window.chrome || !window.console) {
alert('For the best experience, open this page in Google Chrome and follow along!');
}
})();
document.addEventListener('DOMContentLoaded', function(){
var jsBreakpointButtonCounter = 0,
jsBreakpointButton = document.getElementById('js-breakpoint-button'),
domBreakpointButtonCounter = 0,
domBreakpointButton = document.getElementById('dom-breakpoint-button'),
fastFunctionButton = document.getElementById('fast-function-button'),
fastFunction = function fastFunction() {
console.log('Called Fast Function');
return 'I was very fast!';
},
slowFunctionButton = document.getElementById('slow-function-button'),
slowFunction = function slowFunction() {
console.log('Called Slow Function');
var slowFunctionSeed = 8,
factorial = function factorial(num){
var tmp = [];
for(var i = 0; i < 400000; i++) {
tmp.push(i);
}
for (var j = 0; j < tmp.length; j++){
tmp[j]++;
}
if (num < 0) {
return -1;
}
else if (num == 0) {
return 1;
}
else {
return (num * factorial(num - 1));
}
};
return factorial(slowFunctionSeed);
};
fastFunctionButton.addEventListener('click', fastFunction);
slowFunctionButton.addEventListener('click', slowFunction);
jsBreakpointButton.addEventListener('click', function() {
jsBreakpointButtonCounter++;
console.log('Clicked the JS Breakpoint button %d times!', jsBreakpointButtonCounter);
console.log('You should set a breakpoint in the click handling function, then click again.');
this.innerText = 'Click me again!';
});
domBreakpointButton.addEventListener('click', function() {
domBreakpointButtonCounter++;
console.log('Clicked the DOM Breakpoint button %s times!', this.getAttribute('data-click-count'));
console.log('You should set a dom breakpoint on the button, then click again.');
this.setAttribute('data-click-count', domBreakpointButtonCounter);
});
} );
Reveal.addEventListener( 'fragmentshown', function( event ) {
// Example of JS debugging
if (event.fragment.id === "alertMe") {
alert("Why isn't this working!?!");
}
}, false );
Reveal.addEventListener( 'slidechanged', function( event ) {
// Example of console.log, etc.
if (event.currentSlide.dataset.state == 'triggerConsoleLog') {
console.log('Switched to slide %s', event.indexh);
console.error("I'm not a real error, but I want to be when I grow up.");
console.warn(event.currentSlide.querySelector('.notes').innerText);
}
// Example of debugger
else if (event.currentSlide.dataset.state == 'triggerDebugger') {
var myVariable = ['have','some','data'];
debugger;
console.warn("You shouldn't see me until you've interacted with the debugger!");
}
}, false );
</script>
</body>
</html>