Web developer tools

Chrome DevTools

Dark Theme

a built-in dark theme

Selection Mode

cmd + shift + c

Store as global variable

right click on an object in the console and press “store as global variable”. This stores the object as a global variable accessible in the console called temp1 which you can then work with using JavaScript.

Simulate Element Pseudo State

clicking the :hov icon in the upper-right corner of the Styles panel

Prettify CSS and JavaScript

After opening a minified file in the “Sources” tab, you can click the brackets logo in the lower left corner of the file, and DevTools will “prettify” the code.

Alt + Up / Alt + Down

When debugging CSS, you can select a property and use the up/down keys to tweak it’s value. By default, the arrow keys adjust values by +/- 1. However, by holding the alt key, you can use the arrow keys to adjust values finely in steps of 0.1, which is particularly useful when working with fractional values.

Conversely, you can hold shift to adjust values in steps of 10.

Preserve Log

Preserve log is a checkbox that lets you persist logs between page refreshes.
When this option is enabled, a new type of “Navigation” log appears in the console to show page refreshes or navigation events to different pages.

Network + Log Filters

Code Coverage

go to the “Coverage” tab. Press “record” and then start using your app. When you’re done, Chrome will show you the exact code that ran during your session.

Quick file switching

Ctrl + P

Search source code

Ctrl + Shift + F

Go to line number

Ctrl + O

entered :375:18 to go to line 375, column 18.

Copy image as data URI (base64 encoded)

In the Network panel click on an image and then right click on it to have the option to Copy image as data URI.

hard refresh

A hard refresh is a way of clearing the browser’s cache for a specific page, to force it to load the most recent version of a page.

  • Hold down Ctrl and click the Reload button.
  • Or, Hold down Ctrl and press F5.
  • just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.

Firefox Developer Tools

View browser style

Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix).

  1. Developer > Inspector.
  2. Click the “Computed” tab in the right section.
  3. Check the “Browser styles” checkbox.

Hide CSS style from the page

To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets in the “Style Editor“ tab. Click it again to revert to the original view.

hard refresh

  • Hold the Ctrl key and press the F5 key.
  • Or, hold down Ctrl and ⇧ Shift and then press R.

ref

Chrome

Firefox