forked from bgrins/devtools-snippets
-
Notifications
You must be signed in to change notification settings - Fork 0
/
snippets.html
162 lines (147 loc) · 7.46 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
<!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 on Github</a>
</div>
<div class="content">
<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 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>
<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 colors from computed styles used in elements on the page. <em>Uses styled console.log calls to visualize each color</em> <small>Currently reading only the `color` and `background-color` properties</small>.
</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 />
<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 / 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>