DevTools Snippets ✨

Welcome to DevTools Snippets! This repository is a friendly collection of handy JavaScript snippets designed to be saved and reused directly within Chrome's DevTools Snippets feature. Think of them as your personal toolkit for quick, on-the-fly browser-based tasks. 🛠️ They're perfect for web developers, QA engineers, and anyone who loves to streamline their workflow right in the browser.

What's This Project All About? 💡

The core idea here is to provide a series of lightweight, versatile scripts that you can execute instantly in your browser's developer console. No need for heavy extensions or altering your codebase – just pure, efficient utility! Each snippet focuses on a specific task, making your debugging and development life a little easier.

Key Utilities You'll Find (or we're planning!):

• DOM Inspection & Manipulation: 🔍
  • Effortlessly inspect specific elements.
  • Quickly copy styles or entire sections of the DOM.
• Network Performance & Analysis: ⚡
  • Monitor network performance with ease.
  • Visualize network waterfalls for bottlenecks.
• SEO & Page Analysis: 📈
  • Check on-page SEO items (like our check-on-page-seo.js snippet).
  • Test page links to catch broken URLs.
• Data Extraction: 📊
  • Extract table data from web pages in a snap.
• General Utilities: 🚀
  • Plus, various other scripts to supercharge your development and debugging workflows!

How to Get Started with Chrome's DevTools Snippets 🚀

Using these snippets is super simple! Just follow these steps:

1. Open Chrome DevTools: Right-click anywhere on a web page and select "Inspect" or hit Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (macOS). Easy peasy!.
2. Navigate to the Sources Panel: In DevTools, click on the "Sources" tab at the top.
3. Go to the Snippets Tab: In the left sidebar of the Sources panel, you'll see a >> icon (or sometimes three dots). Click it and choose "Snippets" from the dropdown.
4. Create a New Snippet: Right-click anywhere in the Snippets pane and select "New snippet".
5. Name Your Snippet: Give your shiny new snippet a clear, descriptive name (e.g., check-on-page-seo).
6. Paste the Code: Copy the content of your desired .js file from this repository (like check-on-page-seo.js) and paste it right into the code editor area of your new snippet.
7. Save the Snippet: Don't forget to save! Press Ctrl+S (Windows/Linux) / Cmd+S (macOS).
8. Run the Snippet:
   • With the snippet open in the editor, just press Ctrl+Enter (Windows/Linux) / Cmd+Enter (macOS).
   • Alternatively, you can right-click the snippet in the Snippets pane and select "Run".

Once executed, the snippet will work its magic directly on your currently open web page. For snippets that create an overlay, like our awesome SEO audit tool, an interactive panel will pop right up on the page.

Found a Bug or Have an Idea? Let Us Know! 🐞✨

We love contributions and feedback! If you encounter any bugs, have suggestions for new features, or just want to chat about how to make these snippets even better, please don't hesitate to open an issue on this GitHub repository. Your input helps us improve and grow this collection for everyone. Thank you! 🙏