forked from mozillacampusclubs/Using-Devtools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
294 lines (265 loc) · 19.3 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
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Using Firefox Developer Tools</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An activity for learning how to use DevTools to explore websites">
<meta name="author" content="Mozilla Campus Clubs">
<link rel="shortcut icon" href="favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
<!-- github acitivity css -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ******HEADER****** -->
<header class="header">
<div class="container">
<img class="profile-image img-responsive pull-left" src="assets/images/profile.png" />
<div class="profile-content pull-left">
<h1 class="name">Using Firefox Developer Tools</h1>
<h2 class="desc">learn how to use Devtools to explore websites</h2>
</div><!--//profile-->
</div><!--//container-->
</header><!--//header-->
<div class="container sections-wrapper">
<div class="row">
<div class="primary col-md-8 col-sm-12 col-xs-12">
<section class="about section">
<div class="section-inner">
<h2 class="heading">Introduction</h2>
<div class="content">
<p>Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.</p>
<p><b>Your Mission: Examine, edit, and debug HTML, CSS, and JavaScript using the DevTools.</b> Are you ready?</p>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="latest section">
<div class="section-inner">
<h2 class="heading">Getting ready</h2>
<div class="content">
<div class="item featured text-center">
<div class="featured-image">
<img class="img-responsive" src="assets/images/getting-ready.jpg" alt="Getting ready" />
</div>
<div class="desc text-left">
<p>This activity will help your Club to learn how we can use Developer tools to help in our developer activities! But first you need to <b>get your tools prepared.</b></p>
<p>First let's prepare our equipment, we will need Firefox in order to use Firefox Developer Tools. If you don't have Firefox installed on your computer you can click in the link bellow and download/install Firefox (but probably you already have it, don't you?).</p>
<p><strong>Quick tip:</strong> maybe you can help us to test Firefox, why not use Firefox Nightly and check the latest improvements and report if anything goes wrong?</p>
<a class="btn btn-cta-secondary" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox (stable)</a> <a class="btn btn-cta-primary" href="https://www.mozilla.org/en-US/firefox/channel/desktop/" target="_blank">Firefox (nightly)</a>
</div><!--//desc-->
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="projects section">
<div class="section-inner">
<h2 class="heading">How to open the devtools in your browser</h2>
<div class="content">
<div class="item">
<p class="summary">Now your Club is fired up and ready to go, it's time to learn how we can start using devtools!</p>
<p>The devtools live inside your browser in a subwindow that looks roughly like this:</p>
<img class="img-responsive" src="assets/images/devtools_1.png" alt="Devtools" />
<p>How do you pull it up?</p>
<ul>
<li><em><strong>Keyboard.</strong></em> <em>Ctrl + Shift + I</em></li>
<li><strong><em>Context menu.</em></strong> Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose <em>Inspect Element </em>from the context menu that appears. (<em>An added bonus: </em>this method straight-away highlights the code of the element you right-clicked.)</li>
</ul>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Start exploring!</h2>
<div class="content">
<div class="item">
<h3 class="title">Fork our Repo <span class="label label-theme">Students</span></h3>
<p class="summary">For going through the activity, students have to fork our GitHub repository to explore our examples. <b>This requires you to be familiar with the tool Git and the GitHub ecosystem.</b> In the Campus Clubs <a href="https://campus.mozilla.community/activities/#learn">learning activities</a> you can find two activities for mastering Git and learning how to contribute to Open Source on GitHub.</p>
<br>
<a class="btn btn-cta-secondary fork" href="https://github.com/mozillacampusclubs/Using-Devtools#fork-destination-box" aria-label="Fork mozillacampusclubs/Using-Devtools on GitHub">Fork</a>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Example 1 - DOM inspector and the CSS editor</h2>
<div class="content">
<div class="item">
<p>
In the <a target="_blank" href="examples/example1_inspector.html">example 1</a> we will learn about the DOM inspector and the CSS editor. This tool allows you to see what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.
</p>
</div>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Example 2 - JavaScript console</h2>
<div class="content">
<div class="item">
<p>
In the <a target="_blank" href="examples/example2_console.html">example 2</a> we will learn about the Javascript console. The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console, just press the Console button.
</p>
</div>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Example 3 - JavaScript Debugger</h2>
<div class="content">
<div class="item">
<p>
In the <a target="_blank" href="examples/example3_debugger.html">example 3</a> we will learn about the JavaScript Debugger. The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs. You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android.
</p>
</div>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Example 4 - Network monitor</h2>
<div class="content">
<div class="item">
<p>
In the <a target="_blank" href="examples/example4_network.html">example 4</a> we will learn about the Network monitor. The Network Monitor shows you all the network requests Firefox makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, and details of each request.
</p>
</div>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Example 5 - Responsive Design Mode</h2>
<div class="content">
<div class="item">
<p>
In the <a target="_blank" href="examples/example5_responsive.html">example 5</a> we will learn about the Network monitor. Responsive design is the practice of designing a website so it looks and works properly on a range of different devices: in particular, mobile phones and tablets as well as desktops and laptops.
</p>
<p>
The most obvious factor here is screen size, but there are other factors as well, including the pixel density of the display and whether it supports touch. Responsive Design Mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices.
</p>
</div>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Congratulations and next steps</h2>
<div class="content">
<div class="item">
<p>Congratulations! You just learned how use devtools to interact with a website.</p>
<p>
Now you are able to use Devtools to inspect a site, view and edit page content and layout (CSS and HTML), see messages logged by a web page and interact with the page using JavaScript and discover how your website or app will look and behave on different devices and network types.
</p>
<p>
<strong>Next steps:</strong> Do you want do more? Try to build some nice examples of how to use devtools and send to us! Open a pull request in this activity repo with your own examples and we can share with other students!
</p>
</div>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">What you will learn</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<p><i class="fa fa-quote-left"></i>By going through this activity you will learn a lot about Firefox developer tools. When we work in any web project, the DevTools are essential. We have to test, we have to check if everything is in the right place and if something is wrong we can explore our project with Firefox Developer tools in order to verify what is happening and why.</p>
</blockquote>
<p class="source"><span class="name">Felipe Do E. Santo</span><br /><span class="title">Web Developer & University professor</span></p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="skills aside section">
<div class="section-inner">
<h2 class="heading">Skills </h2>
<div class="content">
<p class="intro">
Skills and time required for running this activity
</p>
<div class="skillset">
<div class="item">
<h3 class="level-title">HTML<span class="level-label" data-toggle="tooltip" data-placement="left" data-animation="true" >Basic</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h3 class="level-title">CSS<span class="level-label" data-toggle="tooltip" data-placement="left" data-animation="true" >Basic</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h3 class="level-title">Javascript <span class="level-label">Basic</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h3 class="level-title">Time<span class="level-label">2 hours</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="20%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
</div>
<div class="item">
<h2 class="heading">Requirements</h2>
<ul>
<li>Laptops/Computers (1 per person)</li>
<li>Firefox <i class="fa fa-heart"></i></li>
</ul>
</div><!--//item-->
<div class="item">
<h2 class="heading">Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools" target="_blank">What are browser developer tools?</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools" target="_blank">Firefox Developer Tools</a></li>
</ul>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<!-- ******FOOTER****** -->
<footer class="footer">
<div class="container text-center">
<!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
<small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="campus.mozilla.community" target="_blank">Mozilla Campus Clubs</a> for all University Students</small>
</div><!--//container-->
</footer><!--//footer-->
<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- custom js -->
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>