Optimizing your experience
unsplashunsplash
Gradient background

A Trilogy About the Chrome DevTools in Many Parts

Clarice Bouwer

Software Engineering Team Lead and Director of Cloudsure

Sunday, 22 July 2018 · Estimated 3 minute read

Don't take your knowledge for granted. Share it. Someone could learn something new. It also helps you remember it. Keep a record of what you learn in a blog, memo or even a paperback book. Whatever you choose, jot it down and help your future self and others.


Features! It's all about the features. They make my life easier. 😄 There are so many unforgettable features. Here are the top few I want to document today. More to come in future posts and articles.

First, my article

I got published on Offerzen with my article titled Quick front end bug-fixes. It's a good starting point for anyone familiarizing themselves with the tool.

Debugging is an art form. Often, it feels like you need a series of serendipitous insights to fix a complicated bug. In reality, you need two things: technical knowledge to spot broader patterns and connections, and data on the bug itself to understand the problem.

What's new?

Chrome releases major updates automatically about every six weeks. As much as I love exploring and discovering on my own, Chrome offers a quick and easy way to get up to speed. They release a video with articles and these highlights are accessible directly within the tool. The What's New panel shows these highlights and I know of three ways to access it.

  1. Press ESC in any panel. The drawer will pop up. Simply click on the What's New panel in the drawer.

  2. If you have lost the panel for some reason then resurrect it by clicking on the left side kebab button (it's like the hamburger but healthier). Click on the What's New menu item at the bottom of the menu.

  3. Top right kebab button of the tool > More tools > What's New. This menu has other nifty options so be sure to look into them.

Tips and Tricks by @flaviocopes

The color picker

  • Add a background or foreground color using the kebab button on a selector.
  • Change the colors by using swatches, dragging bars, pasting colors...
  • Use the color picker to pick colors from a web page.
  • Undo all changes using Command+Z or Ctrl+Z.
  • Note: In Chrome 67, CSS variable colors (color: var(--main-color)) now have color blocks / indicators next to them like normal colors would.

Backtracking and fast-forwarding

JavaScript Snippets

If you need to run a repetitive script as a utility or debugging mechanism, you can save it as a snippet. Go to Sources > click on the show navigator button >> and select Snippets.

I pasted the following code into my snippet.

Copy
(function () {
  var greetings = ['Galaxy', 'World', 'Moon', 'Exception'];
  greetings.map(function (greeting) {
    greet(greeting);
  });
})();

function greet(greet) {
  switch (greet) {
    case 'World':
      console.log('Hello World!');
      break;
    case 'Exception':
      throw 'Simulating that something went horribly wrong.';
    default:
      console.warn(`I want Hello World not Hello ${greet}.`);
  }
}

Screenshots

Open the Command Menu Command+Shift+P or Ctrl+Shift+P and type in screenshot.

  • Capture screenshot: Screenshot the page as you see it.
  • Capture node screenshot: Find an element you like and screenshot the node.
  • Capture full size screenshot: Take a screenshot of how the entire page looks.

Uber search across resources

Open the Search tab using Command+Option+F or Ctrl+Shift+F or access the drawer by pressing ESC, go to the kebab and click on search.

"Search across resources"

"Search across resources"

Type in what you are looking for and the tools will search through the text of all your your JavaScript, CSS and HTML files. Stop and think about this for a second. I was completely ecstatic when I found this by chance.

:hover element

Shortcuts

I mention a few shortcuts. They are useful. The DevTools have many that you can learn in three ways.

  1. By chance. Play mortal combat with your keyboard in the tools and you are bound to discover something cool.
  2. Go to the settings from the main kebab > Settings > Shortcuts.
  3. Access the full list of DevTools keyboard shorcuts and gestures.

"Shortcuts"

"Shortcuts"


Random!

@adriancooney created console.image, "the one thing Chrome Dev Tools didn't need" - images in the console. It even supports gifs. ;-)

"Memes in the console"

"Memes in the console"

.

Copy
console.meme(upper text, lower text, meme type|url, width, height)
console.meme("Not sure if memes in dev tools is stupid", "or disastrous.", "Not Sure Fry", 400, 300);