Fast Navigation Tips In Dev Tools

Posted Over 1 year ago. Visible to the public. Linked content.

Hide/Show Drawer

You can press Escape to show/hide the drawer.

Fast Navigation with Command Menu

Use Ctrl + Shift + p to open Command Menu, where you can switch to different panels, toggle settings etc.

Reorder DevTools panels and Drawer tabs and combine them by moving them up and down to and from the Drawer.

Right click on any tab and then choose Move to top / Move to bottom

Change DevTools layout from auto to always horizontal or vertical.

Click on Settings > Preferences > Panel Layout, Choose between Horizontal / Vertical / Auto

Customize DevTools shortcuts.

Go to Settings > Experiments > Enable keyboard shortcut editor.

developer.chrome.com
Felix Eschey
Say thanks
Last edit
Over 1 year ago
Felix Eschey
License
Source code in this card is licensed under the MIT License.

Related cards:

The Ruby Object Model

In Ruby (almost) everything is an Object. While this enables a lot of powerful features, this concept might be confusing for developers who have been programming in more static languages, such as Java or C#. This card should help understanding t...

The JavaScript Object Model: A deep dive into prototypes and properties

Speaker today is Henning Koch, Head of Development at makandra.

This talk will be in German with English slides.

Introduction

As web developers we work with JavaScript every day, even when our backend code uses anothe...

Lightning Talk: Coverage based Test Case Prioritization in Ruby on Rails

For my computer science bachelor's thesis I programmed and evaluated a CLI Test Case Prioritization (TCP) tool for makandra. It has been written as a Ruby Gem and was tested and evaluated against one Ruby on Rails project....

Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools

tl;dr

In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:

  • Display size and lines along with labels
  • Changing their attributes
  • Change how overlay is colored and fastl...

CarrierWave: Processing images with libvips

When you write your next CarrierWave uploader, consider processing your images with libvips instead of ImageMagick.

Reasons for libvips

There are several **upsi...

How to create giant memory leaks in AngularJS (and other client-side JavaScript)

This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.

Although this guide has been written for Angular 1 originally, most of the advice is relevant...

How to make changes to a Ruby gem (as a Rails developer)

At makandra, we've built a few gems over the years. Some of these are quite popular: spreewald (> 1M downloads), active_type (> 1M downloads), and geordi (> 200k downloads)

Developing a Ruby gem is different from developing Rails applications, w...

Integrating or upgrading makandra-rubocop

Introduction

Most of the time it is a tedious task to apply a code style guide to an existing code base as there are likely to be a lot of conflicts. At makandra we are using [makandra-rubocop](https://makandracards.com/makandra/62188-makandr...

Introduction to Google Tag Manager (for web developers who know Google Analytics)

As a web developer, you know Google Analytics (GA). Probably you've dropped the GA snippet into more than one website, maybe you've even used its Javascript API to implement tracking at the event level.

Google Tag Manager (GTM) is a related tool,...

PSA: "index: true" in Rails migrations does not work as you'd expect

Several Rails migration methods accept index: true as an option to create an index. In some cases (like #add_column), this option is silently discarded. Know what you are doing, or use #add_index instead.

Example

Consider the following ...

Posted by Felix Eschey to makandra dev (2022-11-15 09:49)
This website uses short-lived cookies to improve usability.
or learn more