Skip to content

Liquid2Sky/devtools-snippets

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

devtools-snippets

A collection of helpful snippets to use inside of browser devtools.

View them all on a single page: http://bgrins.github.io/devtools-snippets/ or all of them inside of github. I have a more long winded article about snippets detailing why you might use them and additional features that would be nice, if you are interested.

If you have a useful snippet or updates to an existing one that you'd like to share, please contribute it or open an issue! Feel free to use, modify, or share any of these snippets.

To Enable DevTools Snippets in Chrome

Note: snippets are enabled by default in Chrome Canary and will be usable without changing your settings soon. You can read more about snippets at the Chrome developer tools documentation.

  • Open Chrome.
  • Navigate to chrome://flags -> Enable Developer Tools experiments.
  • Open Devtools -> Settings -> Developer Tools Experiments -> Enable "Snippets support".
  • Close and reopen devtools.
  • Open "Sources" panel.
  • Go to "Snippets" tab, and add whichever ones you want.

Chrome Flags

Chrome Enable Snippets

Chrome Snippets

To Use DevTools Snippets in Firefox Scratchpad

Note: you can read more about scratchpad at the Firefox developers tools documentation.

  • Open Firefox.
  • Go to Tools > Web Developer > Scratchpad.
  • Copy/paste and Cmd-R / Ctrl-R to run.
  • File > Save, then File > Open Recent to reuse them.

Firefox Scratchpad

Snippet screenshots

Or, view all on a single page with code: http://bgrins.github.io/devtools-snippets/

jquerify.js

Includes jQuery onto a page if it is not yet included.

jquerify

log.js

Adds a log function to window object.

log

showheaders.js

Pretty prints the HTTP headers for the current page into the console. Uses console.table.

showheaders

dataurl.js

Convert all images on the page to data URLs. Note: this only works for images that are on the same domain as the current page.

dataurl

allcolors.js

Print out all colors from computed styles used in elements on the page. Uses styled console.log calls to visualize each color.

allcolors

performance.js

Print out information about the window.performance object. Uses console.table and grouping to organize the information.

performance

cssprettifier.js

Script for unminifying and prettifying a CSS file written by addyosmani and sindresorhus. View the cssprettifier-bookmarklet project on github.

cssprettifier

hashlink.js

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.

hashlink

hashlink

querystringvalues.js

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 mattpass.

querystringvalues

wrapelement.js

Exposes a window function wrapElement(element, tag). The first parameter is either a DOM Node, or a selector string, and the second parameter is the tag name for the wrapping element. Implementation by gkatsev.

wrapelement

plainforms.js

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. Implementation by stroebjo.

plainforms

formcontrols.js

Shows all html form elements with their values and types in a nice table. Adds a new table for each form on the page. Implementation by Kienz.

formcontrols

html_i18n_content.js

Generate downloadable files, based on location.href, for i18n of Chrome App or Extension:

  • messages.json containing chrome.i18n messages (with placeholders) for element.innerText and input[value]
  • location.href with i18n-content tags added (text and placeholders preserved to ease round-tripping changes)
  • applyChromeI18nMessages.js to include in location.href to initialize localized messages on load

Implementation by anaran.

html_i18n_content

cachebuster.js

Overwrite all link and (optionally) script tags by adding Date.now() at the end of href and src attributes, respectively. By default processing scripts is not performed, you should change the variable process_scripts to true to run these.

cachebuster

About

A collection of helpful snippets to use inside of browser devtools

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 61.0%
  • HTML 36.3%
  • Ruby 2.7%