Writing multi-line code on Chrome DevTools

Altay Karakuş — Sat, 30 Mar 2024 06:31:38 +0000

One of the most frequently used panels of tools like Chrome DevTools is writing and running code through the console. This panel, which we often use to test a piece of code as well as when we debug, does not seem very practical when it comes to writing multi-line codes, even though it allows it.

To enter multiple lines on the console, simply press shift+enter instead of just enter at the end of the line. You can navigate through your code using the up and down arrow keys. However, sometimes you might lose your progress while navigating this history, especially if you mix up your shortcuts.

There may also be times when you want to paste a code, make changes to it, and run it numerous times. The console is very accessible for this, but there's another panel in DevTools called 'Snippets' that you might have overlooked. Snippets exist in almost every editor and can also be saved in DevTools. They support every feature related to debugging, making them more ideal for storing lengthy lines of code.

Moreover, you can find many useful snippets with a bit of research. You can experiment with these snippets and save the ones you like in DevTools.

To write multi-line code here are the steps:

Open Chrome DevTools (right-click anywhere on a webpage and select 'Inspect' or use the shortcut Ctrl+Shift+J for Windows/Linux or Cmd+Option+J for Mac).
Go to the 'Sources' tab.
On the left pane, click on the '>>' button and select 'Snippets'.
Click on 'New snippet'.
Give it a name and start writing your code in the editor.
Once you're done writing your code, you can run it by clicking the 'Run' button or using the shortcut Ctrl+Enter.

This way, you can write and run multi-line codes easily in the Chrome DevTools console.

Chrome DevTools: CSS Overview Panel

Altay Karakuş — Sat, 30 Mar 2024 05:59:28 +0000

For web developers, crafting beautiful and functional user interfaces goes hand-in-hand with meticulous CSS management. But with ever-growing stylesheets, keeping track of every property and selector can become a daunting task. This is where Chrome DevTools' CSS Overview Panel emerges.

To open the CSS Overview Panel in Chrome DevTools, follow these steps:

Open DevTools by right-clicking anywhere on a webpage and selecting "Inspect" or use the shortcut Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac).
In the DevTools window, click on the >> button to reveal additional panels.
Select "CSS Overview" from the dropdown list. If you do not see the CSS Overview panel, it might be because your DevTools are not updated to the latest version.
Click on the "Capture Overview" button in the CSS Overview Panel to analyze the CSS of the current webpage.

Here I try to list what you can find in the CSS Overview Panel, equipping you with the knowledge to:

Empowering Web Development with CSS Overview

The CSS Overview Panel acts as a central hub for analyzing and visualizing all the CSS styles applied on a webpage. It provides valuable insights into various aspects of your stylesheets, including:

Overall Statistics: Get a quick snapshot of the number of elements, selectors, and stylesheets used on the page.
Color Usage: Explore the palette of colors employed throughout the webpage, helping you identify potential redundancy or color scheme inconsistencies.
Font Families and Sizes: Gain a comprehensive view of all font families and their sizes, allowing you to check for consistency and optimize font usage.
Unused Declarations: Pinpoint styles that aren't currently affecting any elements, enabling you to clean up your stylesheets and improve performance.
Media Queries: View a breakdown of media queries and their breakpoints, aiding in responsive design adjustments.

Let's Take a Spin: Checking Out the CSS Overview Panel Sections

Quick Summary: Here's the 411 on the page's styles:
- Total Elements: How many HTML elements we got here.
- Selectors: The count of selectors doing the styling.
- Stylesheets: How many external and inline stylesheets are hanging around.
Colors: All the colors of the rainbow are here, sorted by:
- Hex Codes: The six-digit secret code for each color.
- RGB Values: The red, green, and blue mix for each color.
- HSL Values: The hue, saturation, and lightness game for each color.
Clicking a color will highlight all the stuff using it on the page. Pretty cool, huh?
Fonts: Step into the font zone! This section shows:
- Font Families: All the unique font families on the page.
- Font Sizes: How big or small things are looking.
- Font Weights: The different font weights (like normal, bold) in use.
Click a font family to see stuff like where it's from and the weights available.
Unused Declarations: The unsung hero of code cleanup, this section finds styles that aren't being used. You can:
- Check Out Unused Styles: See a list of all the unused stuff with details like selector and property.
- Filter by Stylesheet: Find unused styles for a tidy cleanup in specific stylesheets.
- Delete Unused Styles: Get rid of styles you don't need with a click (be careful!).
This section helps you clean up your stylesheets, making them smaller and maybe making your page load faster.
Media Queries: Learn all about the media queries used for responsive design:
- Media Query Rules: All the media queries in the stylesheets.
- Breakpoints: The screen sizes each media query is aiming for.
Click a media query rule to see the styles applied at that breakpoint on the page. It's a great way to understand your responsive design.

Making Your Life Easier with the CSS Overview Panel

The CSS Overview Panel is here to help you work smarter, not harder:

Fast Style Check: See how complex your stylesheets are and find places to improve.
Color Matching: Make sure your color scheme is consistent by seeing all the colors used.
Font Control: Keep track of your font families, sizes, and weights for a better user experience.
Cleaning Up Unused Styles: Get rid of styles you don't need to make your stylesheet smaller and maybe speed up page loads.
Checking Your Responsive Design: Make sure your media queries and breakpoints work for a smooth responsive experience.
Capture Overview: The panel lets you rerun an analysis by capturing a new overview. Handy for tracking style changes after edits.

In conclusion, Chrome DevTools' CSS Overview Panel is an indispensable tool for web developers. It streamlines your workflow, boosts productivity, and ensures you maintain high-quality, optimized stylesheets. From offering a bird's eye view of your CSS landscape to uncovering hidden inefficiencies, it's a powerful ally in your quest for web development mastery. So why wait? Start harnessing its potential today!

DEV Community: Altay Karakuş

Writing multi-line code on Chrome DevTools

Chrome DevTools: CSS Overview Panel