forked from addyosmani/devtools-snippets
-
Notifications
You must be signed in to change notification settings - Fork 0
/
snippets.html
245 lines (215 loc) · 11.4 KB
/
snippets.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>DevTools Snippets</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="devtools-snippets is a collection of helpful JavaScript code snippets to use inside of browser devtools.">
<meta name="author" content="Brian Grinstead, devtools-snippets contributors">
<link href="docs/styles.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>DevTools Snippets</h1>
<h2>A collection of helpful snippets to use inside of browser devtools</h2>
<a id="project-link" href="https://github.com/bgrins/devtools-snippets">View Project On Github</a>
</div>
<div class="content">
<div class="alert">
<p>
<strong>Instructions:</strong> The snippets can be used in any browser console. Chrome provides a '<a href="https://github.com/bgrins/devtools-snippets#to-enable-devtools-snippets-in-chrome">snippets</a>' feature that can be used to manage the scripts, while Firefox has a '<a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">scratchpad</a>' feature that lets you run, edit, and save chunks of JavaScript.
</p>
<p>
View the <a href="https://github.com/bgrins/devtools-snippets">devtools-snippets project page</a>. For more information about using them in your favorite browser, check out the <a href="https://github.com/bgrins/devtools-snippets/blob/master/README.md">README</a>. Here is an <a href="http://www.briangrinstead.com/blog/devtools-snippets"> article about snippets</a> detailing why you might use them and additional features that would be nice.
</p>
</div>
<hr />
<h3>
<a href="snippets/jquerify.js">jquerify.js</a>
<a id="jquerify" href="#jquerify">#</a>
</h3>
<p>
Includes jQuery onto a page if it is not yet included.
</p>
<div class="screenshot">
<img src="screenshots/jquerify.png" alt="jquerify.js snippet" title="jquerify.js snippet">
</div>
<div class="snippet" data-src="snippets/jquerify.js"></div>
<hr />
<h3>
<a href="snippets/log.js">log.js</a>
<a id="log" href="#log">#</a>
</h3>
<p>
Adds a `log` function to window object.
</p>
<div class="screenshot">
<img src="screenshots/log.png" alt="log.js snippet" title="log.js snippet">
</div>
<div class="snippet" data-src="snippets/log.js"></div>
<hr />
<h3>
<a href="snippets/showheaders.js">showheaders.js</a>
<a id="showheaders" href="#showheaders">#</a>
</h3>
<p>
Pretty prints the HTTP headers for the current page into the console. <em>Uses console.table</em>
</p>
<div class="screenshot">
<img src="screenshots/showheaders.png" alt="showheaders.js snippet" title="showheaders.js snippet">
</div>
<div class="snippet" data-src="snippets/showheaders.js"></div>
<hr />
<h3>
<a href="snippets/dataurl.js">dataurl.js</a>
<a id="dataurl" href="#dataurl">#</a>
</h3>
<p>
Convert all images on the page to data URLs. <small>Note: this only works for images that are on the same domain as the current page</small>
</p>
<div class="screenshot">
<img src="screenshots/dataurl.png" alt="dataurl.js snippet" title="dataurl.js snippet">
</div>
<div class="snippet" data-src="snippets/dataurl.js"></div>
<hr />
<h3>
<a href="snippets/allcolors.js">allcolors.js</a>
<a id="allcolors" href="#allcolors">#</a>
</h3>
<p>
Print out all the colors used in elements on the page by reading computed styles. Reads the <code>color</code>, <code>background-color</code>, and <code>border-color</code> properties. <em>Uses styled console.log calls to visualize each color</em>.
</p>
<div class="screenshot">
<img src="screenshots/allcolors.png" alt="allcolors.js snippet" title="allcolors.js snippet">
</div>
<div class="snippet" data-src="snippets/allcolors.js"></div>
<hr />
<h3>
<a href="snippets/performance.js">performance.js</a>
<a id="performance" href="#performance">#</a>
</h3>
<p>
Print out information about the <a href="https://developer.mozilla.org/en-US/docs/Navigation_timing">window.performance object</a>. <em>Uses console.table and grouping to organize the information</em>.
</p>
<div class="screenshot">
<img src="screenshots/performance.png" alt="performance.js snippet" title="performance.js snippet">
</div>
<div class="snippet" data-src="snippets/performance.js"></div>
<hr />
<h3>
<a href="snippets/cssprettifier.js">cssprettifier.js</a>
<a id="cssprettifier" href="#cssprettifier">#</a>
</h3>
<p>
Script for unminifying and prettifying a CSS file written by
<a href="http://addyosmani.com/">Addy Osmani</a> and
<a href="http://sindresorhus.com/">Sindre Sorhus</a>.
Check out the <a href="https://github.com/addyosmani/cssprettifier-bookmarklet">cssprettifier-bookmarklet project on github</a>.
</p>
<div class="screenshot">
<img src="screenshots/cssprettifier.png" alt="cssprettifier.js snippet" title="cssprettifier.js snippet">
</div>
<div class="snippet" data-src="snippets/cssprettifier.js"></div>
<hr />
<h3>
<a href="snippets/hashlink.js">hashlink.js</a>
<a id="hashlink" href="#hashlink">#</a>
</h3>
<p>
Handy way to find the closest linkable element on a page. Run it, then click on an element, and it will give you the closest #link to that page.
</p>
<div class="screenshot">
<img src="screenshots/hashlink.png" alt="hashlink.js snippet" title="hashlink.js snippet">
</div>
<div class="screenshot">
<img src="screenshots/hashlink.gif" alt="hashlink.js snippet" title="hashlink.js snippet">
</div>
<div class="snippet" data-src="snippets/hashlink.js"></div>
<hr />
<h3>
<a href="snippets/querystringvalues.js">querystringvalues.js</a>
<a id="querystringvalues" href="#querystringvalues">#</a>
</h3>
<p>
Print a table of query string (GET) values. This can be helpful, especially when trying to read the values from a long or complicated URL that may otherwise need to be pasted into another editor to read. Implementation by <a href="https://github.com/mattpass">mattpass</a>.
</p>
<div class="screenshot">
<img src="screenshots/querystringvalues.png" alt="querystringvalues.js snippet" title="querystringvalues.js snippet">
</div>
<div class="snippet" data-src="snippets/querystringvalues.js"></div>
<hr />
<h3>
<a href="snippets/wrapelement.js">wrapelement.js</a>
<a id="wrapelement" href="#wrapelement">#</a>
</h3>
<p>
Exposes a window function <code>wrapElement(element, tag)</code>. The first parameter is either a DOM Node, or a selector string, and the second parameter is the tag name for the wrapping element.
</p>
<div class="screenshot">
<img src="screenshots/wrapelement.png" alt="wrapelement.js snippet" title="wrapelement.js snippet">
</div>
<div class="snippet" data-src="snippets/wrapelement.js"></div>
<hr />
<h3>
<a href="snippets/plainforms.js">plainforms.js</a>
<a id="plainforms" href="#plainforms">#</a>
</h3>
<p>
HTML5 Forms are great, but sometimes you don't want the browser to validate or present special controls for them. For instance, if you want to test server-side validation of some fields, you do not want the browser to prevent invalid data for that field type. This snippet finds all of the HTML5 input elements, sets their type attributes to "text" (and keeps any values that were set), and removes any validations enforced by the browser.
</p>
<div class="screenshot">
<img src="screenshots/plainforms.gif" alt="plainforms.js snippet" title="plainforms.js snippet">
</div>
<div class="snippet" data-src="snippets/plainforms.js"></div>
<hr />
<h3>
<a href="snippets/formcontrols.js">formcontrols.js</a>
<a id="formcontrols" href="#formcontrols">#</a>
</h3>
<p>
Shows all html form elements with their values and types in a nice table. Adds a new table for each form on the page.
</p>
<div class="screenshot">
<img src="screenshots/formcontrols.png" alt="formcontrols.js snippet" title="formcontrols.js snippet">
</div>
<div class="snippet" data-src="snippets/formcontrols.js"></div>
<hr />
<h3>
<a href="snippets/html_i18n_content.js">html_i18n_content.js</a>
<a id="html_i18n_content" href="#html_i18n_content">#</a>
</h3>
<p>Generate downloadable files, based on location.href,
for <a href="http://developer.chrome.com/extensions/i18n.html">i18n</a> of Chrome App or Extension:</p>
<ul>
<li>messages.json containing chrome.i18n messages (with placeholders) for element.innerText and input[value]</li>
<li>location.href with i18n-content tags added (text and placeholders preserved to ease round-tripping changes)</li>
<li>applyChromeI18nMessages.js to include in location.href to initialize localized messages on load</li>
</ul>
<p>Implementation by <a href="https://github.com/anaran">anaran</a>.</p>
</p>
<div class="screenshot">
<img src="screenshots/html_i18n_content.gif" alt="html_i18n_content.js snippet" title="html_i18n_content.js snippet">
</div>
<div class="snippet" data-src="snippets/html_i18n_content.js"></div>
<hr />
<h3>
<a href="snippets/cachebuster.js">cachebuster.js</a>
<a id="cachebuster" href="#cachebuster">#</a>
</h3>
<p>
Overwrite all <code>link</code> and (optionally) <code>script</code> tags by adding Date.now() at the end of <code>href</code> and <code>src</code> attributes, respectively. By default processing <code>scripts</code> is not performed, you should change the variable <code>process_scripts</code> to true to run these.
</p>
<div class="screenshot">
<img src="screenshots/cachebuster.png" alt="cachebuster.js snippet" title="cachebuster.js snippet">
</div>
<div class="snippet" data-src="snippets/cachebuster.js"></div>
<hr />
<div id="footer">
<strong>devtools-snippets</strong> is maintained by <a href="http://twitter.com/bgrins">@bgrins</a> and <a href="https://github.com/bgrins/devtools-snippets/network/members">contributors</a>. Please let me know if you want to add or change any snippets by <a href="https://github.com/bgrins/devtools-snippets/issues">opening an issue or pull request</a>.
</div>
</div>
</div>
</body>
</html>