-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
144 lines (138 loc) · 9.71 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
<html>
<head>
<meta charset="utf-8">
<title>Firefox Developer Tools</title>
<link rel="stylesheet" href="./styles.css"></link>
</head>
<body>
<!-- Mozilla Logo -->
<div class="navigation-logo">
<a href="https://www.mozilla.org/" data-link-name="mozilla home icon" data-link-type="nav">
<img class="navigation-logo-image" src="./images/mozilla.svg" alt="Mozilla" width="112" height="32">
</a>
</div>
<!-- Header -->
<div class="titlebar-container">
<img src="./images/fx-browser-developer-icon-full-color.svg" alt="" width="180px"/>
<div class="titlebar-wrapper">
<h1 class="title">Firefox Developer Tools</h1>
<p class="description">A set of tools for inspecting and editing web code.<br/>
Our team works closely with the community and is always happy to<br/>
welcome new contributors.</p>
</div>
</div>
<!-- Content -->
<div class="content-container">
<table class="content-table">
<tr>
<td>
<img class="basic-icon" src="./images/icon-involved.svg" alt="" />
</td>
<td>
<h2>Get Involved</h2>
Help build the last independent browser. Write code, fix bugs, make add-ons, and more.
<ul>
<li><a href="https://firefox-source-docs.mozilla.org/devtools">Contributor docs</a></li>
<li><a href="https://codetribute.mozilla.org/projects/devtools">Good first bugs</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<img class="basic-icon" src="./images/icon-speak.svg" alt="" />
</td>
<td>
<h2>Speak Up</h2>
Feedback makes us better. Tell us how we can improve the browser and Developer tools.
<ul>
<li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=DevTools&component=General">File bugs</a></li>
<li><a href="https://discourse.mozilla-community.org/c/devtools">Discourse forum</a></li>
<li><a href="https://mozilla.social/@FirefoxDevTools">Follow us on Mastodon</a> or <a href="https://twitter.com/FirefoxDevTools">Twitter</a></li>
<li><a href="https://chat.mozilla.org/#/room/#devtools:mozilla.org">Join our chat rooms</a></li>
<li><a href="https://groups.google.com/forum/#!forum/mozilla.dev.developer-tools">Mailing list</a></li>
</ul>
</td>
</tr>
</table>
</div>
<!-- Tools -->
<div class="content-container">
<div class="features">
<ul class="features-list">
<li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Page_Inspector?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-inspector.svg" alt="" />
<span data-l10n-id="features-inspector-title">Inspector</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-inspector-desc">Inspect and refine code to build pixel-perfect layouts. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Page_Inspector?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Web_Console?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-console.svg" alt="" />
<span data-l10n-id="features-console-title">Console</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-console-desc">Track CSS, JavaScript, security and network issues. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Web_Console?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Debugger?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-debugger.svg" alt="" />
<span data-l10n-id="features-debugger-title">Debugger</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-debugger-desc">Powerful JavaScript debugger with support for your framework. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Debugger?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Network_Monitor?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-network.svg" alt="" />
<span data-l10n-id="features-network-title">Network</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-network-desc">Monitor network requests that can slow or block your site. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Network_Monitor?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Storage_Inspector?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-storage.svg" alt="" />
<span data-l10n-id="features-storage-title">Storage</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-storage-desc">Add, modify and remove cache, cookies, databases and session data. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Storage_Inspector?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Responsive_Design_Mode?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-responsive.svg" alt="" />
<span data-l10n-id="features-responsive-title">Responsive Design Mode</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-responsive-desc">Test sites on emulated devices in your browser. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Responsive_Design_Mode?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Style_Editor?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-visualediting.svg" alt="" />
<span data-l10n-id="features-visual-editing-title">Visual Editing</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-visual-editing-desc">Fine-tune animations, alignment and padding. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Style_Editor?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Performance?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-performance.svg" alt="" />
<span data-l10n-id="features-performance-title">Performance</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-performance-desc">Unblock bottlenecks, streamline processes, optimize assets. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Performance?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li><li class="feature">
<h3 class="feature-name">
<a class="feature-link" href="https://developer.mozilla.org/docs/Tools/Memory?utm_source=devtools&utm_medium=onboarding" target="_blank">
<img class="feature-icon" src="./images/feature-memory.svg" alt="" />
<span data-l10n-id="features-memory-title">Memory</span>
</a>
</h3>
<p class="feature-desc" data-l10n-id="features-memory-desc">Find memory leaks and make your application zippy. <a class="feature-more-link external" href="https://developer.mozilla.org/docs/Tools/Memory?utm_source=devtools&utm_medium=onboarding" aria-hidden="true" tabindex="-1" target="_blank" data-l10n-name="learn-more">Learn more</a></p></li></ul>
</div>
</div>
<!-- Footer -->
<footer>
<img class="dev-edition-logo" src="./images/dev-edition-logo.svg" alt="" />
<div class="footer-message">
<h1 class="footer-message-title" data-l10n-id="footer-title">Firefox Developer Edition</h1>
<p data-l10n-id="footer-message">Looking for more than just Developer Tools? Check out the Firefox browser that is built specifically for developers and modern workflows.</p>
<a class="external footer-link" href="https://www.mozilla.org/firefox/developer/?utm_source=devtools&utm_medium=onboarding" target="_blank" data-l10n-id="footer-learn-more-link">Learn more</a>
</div>
</footer>
</body>
</html>