---
layout: post
title: "5 features you haven't used in the Chrome Developer Tools yet"
date: 2018-01-01
author: manu
tags: [javascript, tooling]
---

https://developers.google.com/web/tools/chrome-devtools/

## Device Mode

* Test Responsive and Device-specific Viewports
* Emulate Sensors: Geolocation & Accelerometer
* Screenshots

## Elements Panel

* Inspect and Tweak Your Pages
* Edit Styles
* Edit the DOM
* Inspect Animations

## Console Panel

* Interact from Command Line
    * `$_`
    * `$0`, `$1`, `$2`, `$3` and `$4`
    * `$(selector)`
    * `$$(selector)`
    * `copy(object)`
    * `dir(object)`
    * `getEventListeners(object)`
    * `monitorEvents(object[, events])`
    * ...
* Console API Reference
    * `console.assert(expression, object)`
    * `console.count(label)`
    * `console.dir(object)`
    * `console.log()`, `console.error()`,...
    * `console.profile([label])` and `console.profileEnd()`
    * `console.time([label])` and `console.timeEnd()`
    * `console.timeStamp([label])`
    * `console.trace(object)`
    * ...
    
## Sources Panel

* Pause Your Code With Breakpoints
    * `debugger;`
* Set Up Persistence with DevTools Workspaces
* Run Snippets Of Code From Any Page
* JavaScript Debugging Reference

## Network Panel

* Network Issues Guide
* Network Panel Reference
    * `mime-type:image/jpeg larger-than:1024`

## Performance Panel

* Performance Analysis Reference
* Analyze runtime performance
* Diagnose Forced Synchronous Layouts

## Memory Panel

* Fix Memory Problems
* JavaScript CPU Profiler

## Application Panel

* Debug Progressive Web Apps
* Inspect and Manage Storage, Databases, and Caches
* Inspect and Delete Cookies
* Inspect Resources

Add post skeleton for Chrome Developer Tools
Add post skeleton for Chrome Developer Tools
