1. Chrome dev-tools snippets collection

• 1. Chrome dev-tools snippets collection
  • 1.1. Introduction
  • 1.2. What is Chrome dev-tools snippet?
  • ## 1.3. Snippets
    • 1.3.1. Console Dog 🐶
    • 1.3.2. CSS Wizardry
    • 1.3.3. Design Mode
    • 1.3.4. Form Visualizer
    • 1.3.5. Get Query Parameters
    • 1.3.6. Hash Links
    • 1.3.7. Lint HTML
    • 1.3.8. Page Headers
    • 1.3.9. Toggle Password Visibility
    • 1.3.10. View Cookies
    • 1.3.11. Wrap Element
  • 1.4. Disclaimer
  • 1.5. References

1.1. Introduction

Hey there 🙌🏻
This is a collection of useful/fancy snippets for chrome dev tools. I've picked some of them randomly from the internet 👨🏻‍🎤, some are Reference some other code on internet 👨🏻‍🔬 and some are purely mine 👨🏻‍🎨

1.2. What is Chrome dev-tools snippet?

In case you haven't heard of chrome dev tools snippets, this is just a way to store some javascript in your browser that you can run on any page via dev tools. You can think of these as a modern alternative of bookmarklets. Firefox DevTools has a feature similar to Snippets called Scratchpad. For more information, please checkout Chrome Developers blog on Javascript Snippets.

1.3. Snippets

---

1.3.1. Console Dog 🐶

This snippet is just for fun. It adds a console.dog method in the console method that outputs the given parameter in a fancy (woof-woof) manner.

  console.dog('Woof Woof');
  console.dog({
    dog: 'woof-woof',
    car: 'meoWoof'
  });

1.3.2. CSS Wizardry

This snippet can be used to expose a global variable named cssWizardry which has several functions in it's arsenal which can be used to tweak the visuals of the current page.

• insertCss: This method is used to insert some css on the page directly from the console. It is beneficial when we need to add multiple classes at once. For example:

  const css = '\
      * { background: white ! important; color: black !important } \
      :link, :link * { color: #0000EE !important } \
      :visited, :visited * { color: #551A8B !important } \
    ';
    window.cssWizardry.insertCss(css);

• insertCssHighContrast: This method is same as the example mentioned in insertCss available as a direct method to convert the visuals of the current page to high contrast. Usage:

  window.cssWizardry.insertCssHighContrast();

If needed, morer similar functions can be exposed via this snippet.
Reference: bgrins / devtools-snippets / insert-css

1.3.3. Design Mode

This snippet toggles design mode of a web page on or off. In case you don't know what design mode is, head on to MDN Docs for design mode.
When you run the snippet on a page for the first time, it will turn on the Design Mode and will toggle it's state afterwards. This is helpful in testing a webpage without actually changing it's content or code.
Reference: viclafouch/designMode.js

1.3.4. Form Visualizer

This snippet can be used to visualize all of the values of a form in a tabular format in console. It is useful when developing/testing huge forms.
Just run the template to print form data in the console.
Reference: bgrins / devtools-snippets / formcontrols

1.3.5. Get Query Parameters

This snippet is a very simple yet useful snippet.
When you run the snippet on a page, it will print all of the query parameters as well as hash strings in the URL in a nice & tidy table format in the console. This is helpful in viewing all of the query parameters when the URL is very long and contains non-legible texts such as authentication URLs and complex redirection URLs.
It also exposes two methods under window namespace i.e. printQP and 'printURLHash' to print query parameters and hash strings in the URL respectively. These methods also accept an optional URL string in case the desired URL is other than the current URL.
Usage:

  // Will print query parameters of the current URL
  window.printQP();
  // Will print query parameters of the URL passed as an argument
  window.printQP('https://example.com/page.html?token=skdjlsjdfsdsj');
  // 'printURLHash' can be used similarly

**Inspired from**: [bgrins / devtools-snippets / querystringvalues](https://github.com/bgrins/devtools-snippets/tree/master/snippets/querystringvalues)

1.3.6. Hash Links

This snippet can be used to retrieve the hash link of a section closest to the selected element.
Usage: Just run the snippet, then click on an element, and it will give you the closest #link to that page.
Reference: bgrins / devtools-snippets / hashlink

1.3.7. Lint HTML

This snippet is one of strongest items in this arsenal. It highlights all of the html elements on the page with some potential issues. Just run the snippet to see the highlighted html elements on the page.
Issues that would be highlighted are as follows:

• illicitDiv: A div which is a child of any of the elements like b, i, q, em, abbr, cite, code, span, small, label, strong
• htmlLangMissing: Missing lang attribute on the page
• webpMissing: A picture element is missing a webp source
• badImg: An img element is missing alt attribute
• unorderedHeaders: Bad sequence of heading elements h1, h2, h3, h4, h5, h6 on page
• inputIdMissing: An input and a label element are missing id and for attribute respectively
• unsecureLink: An a tag that opens in a new tab (target='_blank') is missing rel~='noopener' or rel~='noreferrer'
  
  Reference: viclafouch

1.3.8. Page Headers

This snippet is a pure simpleton. It prints the response headers for current URL in the console using console.table.
Reference: bgrins / devtools-snippets / page-headers

1.3.9. Toggle Password Visibility

We all would have done this at some point to see the password. Either to check the auto-filled password or just to be visually sure of what password we're typing. This snippet is just that! It toggles the visibility of all the password fields on the page.
Usage: Just run the snippet and it will toggle the password visibility.

1.3.10. View Cookies

Those who have worked with a lot of cookies 🍪 know that viewing all of the cookies of a page is not very convinient process. This snippet prints all of the cookies stored in document.cookies of the page in a nice and tidy table in browser console.
Reference: bgrins / devtools-snippets / viewcookies

1.3.11. Wrap Element

This snippet 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.
Example:

wrapElement('.foo', 'h1');
wrapElement(document.querySelector('#bar'), 'div');

Reference: bgrins / devtools-snippets / viewcookies

1.3.12. Debug Reload(s)

There are times when our app starts to unexpectedly reload continuously due to a bug. It then becomes really hard to find the root cause of this issue. This snippet adds a breakpoint on unload and beforeunload events and then we can check the stacktrace to check what is causing the reload(s).
Usage: Just run the snippet and it will add the relvant breakpoint.
Reference: stackoverflow

1.4. Disclaimer

I'll keep on adding new snippets as I find/write new ones and will add references of original sources as well. Let me know in case I've missed adding any credit for any of the code I'm sharing here. Also, please feel free to open a pull request if you'd like to contribute.

1.5. References

• Markdown All In One - VS Code plugin to do a lot of cool markdown stuff including auto generation of table of contents.
• bgrins / devtools-snippets - Most of the snippet ideas are from this repository.